第三节课内容总结如下：
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的多类和单类的使用，可把某些样式写成单类，元素引用多类样式，使效果更简单更好。浮动时注意可浮动的大小，避免超出换行。
