收藏
批改状态：未批改
老师批语：
第三节课内容总结如下：
css层叠样式表有三种书写方式：内联/内部/外部。
内联样式 针对当前元素，
内部样式表 针对当前单个文档，
外部样式表 主要用于共享。优先级关系：内联>内部>外部。
css选择器有很多种，常用以下几种：
标记选择器即标签选择器，如body{ }，直接使用标签名来定义样式 。
id选择器，以"#"来定义 特殊性:唯一，不能重复使用该id。
class选择器，以"."来定义 用于描述一组元素的样式 class可以在多个元素中使用。分为单类选择器和多类选择器，多类(元素的calss属性可能不止包含一个单词而是一串单词，各个单词之间用空格隔开)
派生选择器：(通过元素文档中位置的上下文关系来定义样式 优点:使标记更加简洁)，主要同个层级关系来确定元素
子元素选择器：子选择器使用了大于号（子结合符），该选择器只作用于子元素 ，孙辈元素无效
内外边距:(margin\padding)，一个值表示全部，两个值表示 （上下） （ 左右） ，三个值表示 （上）(左右)（下），四个值表示上右下左。margin：auto；居中显示
元素的显示 (行内\块级\行内块)(display:none\block\inline-block\inline)
块级元素:能够识别宽高，独占一行，多个块状元素标签写在一起，默认排列方式为从上至下‘
行内元素:设置宽高无效,对margin仅设置左右方向有效，上下无效,不会自动进行换行(span/b/..)
行内块:行内块状元素综合了行内元素和块状元素的特性，但是各有取舍、不自动换行 能够识别宽高(img input)
块级、行内、行内块元素相互转换：使用display属性，inline：转换为行内元素；block：转为块元素(不常用)；inline-block：转换为行内块状元素。display：none；不显示
浮动：float 属性实现元素的浮动, 属性值:left right。浮动的框可以水平方向移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。注意:浮动使元素的位置与文档流无关，因此不占据空间。注意清除浮动，很重要！！！
以下为作业部分，仿优酷首页电视剧展示列表，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优酷-这世界很酷</title>
<link rel="icon" type="image/x-icon" href="static/images/1.ico">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
float: left;
}
a{
text-decoration: none;
color: #333333;
}
.l{
float: left;
}
.mr{
margin-right: 10px;
}
.mt{
margin-top: 18px;
}
.clear {
clear: both;
}
.contents {
width: 1740px;
margin: 0 auto;
}
.contentTitle {
line-height: 70px;
}
.content {
width: 100%;
margin-top: 20px;
}
.hot_tv img {
width: 240px;
height: 360px;
}
small{
color: #999999;
}
.tab li{
margin-left: 25px;
font-size: 16px;
}
.tab_tv img{
width: 240px;
height: 135px;
}
</style>
</head>
<body>
<div class="contents">
<div class="content">
<div class="contentTitle">
<h2>正在热播</h2>
</div>
<ul class="hot_tv">
<li class="mr">
<a href="">
<img src="static/images/a.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/b.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/c.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/d.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/e.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/f.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="static/images/g.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="content">
<div class="contentTitle">
<h2 class="l mr">剧集 ></h2>
<ul class="tab l">
<li> <a href=""> 最新</a></li>
<li> <a href="">大陆剧</a></li>
<li> <a href=""> 日剧</a></li>
<li> <a href=""> 韩剧</a></li>
<li> <a href=""> 美剧</a></li>
</ul>
<div class="clear"></div>
</div>
<div class="tv_show">
<div class="big_show l mr">
<a href="">
<img src="static/images/tv.jpg"><br>
<span>逆流而上的你</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</div>
<ul class="tab_tv l">
<li class="mr">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>都挺好</span>
</a><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>都挺好</span>
</a><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>都挺好</span>
</a><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>都挺好</span>
</a><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</li>
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>都挺好</span>
</a><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</li>
</ul>
<ul class="tab_tv l mt">
<li class="mr">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>都挺好</span>
</a><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>都挺好</span>
</a><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>都挺好</span>
</a><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>都挺好</span>
</a><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</li>
<li>
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>都挺好</span>
</a><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
结果页面截图如下：
总结：注意清除浮动，还有class的多类和单类的使用，可把某些样式写成单类，元素引用多类样式，使效果更简单更好。浮动时注意可浮动的大小，避免超出换行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
