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