总结：
一：css层叠样式表
1.Css层叠样式表优先级：内联>内
部>外部
2.外部样式表主要是用来共享
二：css选择器
标记选择器：直接使用标签
* 全局
Id选择器：id # 唯一性
类选择器：class . 复用
多类选择器：元素的class属性的单词使用空格隔开
选择器的分组：h1,h2,h3,.r,#w{}使用逗号
派生选择器：后代选择器和子元素选择器
后代选择器：div span 使用空格隔开，可以选择span后面所有的
子元素选择器：div>span,使用大于号。只能选择span元素的内容
三：元素的显示以及内外边距
1.块级元素：能识别宽高，独占一行，多个块元素，默认排序是从上自下
2.行内元素：设置宽高无效，对于margin仅设置左右有效
3.行内块：不自动换行，单可以识别宽高
4.display:inline；转换成行内元素
5.display:inline-block;转换成行内块元素
6.display:block，转换成块元素
实例
<!DOCTYPE html>
<html>
<head>
<title>优酷-这世界很酷</title>
<meta charset="utf-8">
<link rel="icon" type="image/icon" href="http://gw.alicdn.com/tfs/TB1ZvwSycbpK1RjSZFyXXX_qFXa-48-48.ico">
<style type="text/css">
*{margin:0; padding:0;}
li{list-style: none; float: left;}
a{color: #000; text-decoration: none;}
small{color:#a1a1a1;}
.clear{clear:both;}
.mr{margin-right: 10px;}
.l{float:left;}
.contents{
width: 1500px;
margin:0 auto;
}
.content{
width: 100%;
margin-top:20px;
}
.contentUL{line-height: 70px; }
.hot_tv img{
width:240px;
height: 360px;
}
.tab li{margin-left: 25px;}
.big_show img{width: 490px;height: 330px;}
.tv_tab img{
width: 240px;
height: 135px;
}
.www{margin-top:14px;}
</style>
</head>
<body>
<div class="contents">
<div class="content">
<div class="contentUL">
<h2>正在热播</h2>
</div>
<ul class="hot_tv">
<li class="mr">
<a href="">
<img src="http:////r1.ykimg.com/050E00005BFBB2578B77742E3907E6F2?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>摘金奇缘</span><br>
</a>
<small>全亚裔阵容爆红好莱坞</small>
</li>
<li class="mr">
<a href="">
<img src="http://////r1.ykimg.com/050E00005C73B0DD859B5E05970C8529?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>海王</span><br>
</a>
<small>温子仁开启“海鲜盛宴</small>
</li>
<li class="mr">
<a href="">
<img src="http:////r1.ykimg.com/050E00005C7F60B3ADA7B2223F062800?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>神探蒲松龄</span><br>
</a>
<small>成龙颠覆演绎志怪书生</small>
</li>
<li class="mr">
<a href="">
<img src="http://r1.ykimg.com/050E00005C4282F9859B5EF597032529?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>闪亮的名字</span><br>
</a>
<small>每期讲述一位英雄故事</small>
</li>
<li class="mr">
<a href="">
<img src="http://r1.ykimg.com/050E00005C77A8DAADA7B2AE4A0E2B7F?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>大城晓聚</span><br>
</a>
<small>四座城市四场晓聚</small>
</li>
<li>
<a href="">
<img src="http://r1.ykimg.com/050E00005C380571ADA7B24C8D0A04C5?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>欢乐喜剧人 第五季 </span><br>
</a>
<small>张云雷返场爆笑来袭</small>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="content">
<div class="contentUL">
<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="http://ykimg.alicdn.com/develop/image/2019-02-02/71dfd0277977f96c77118c49818f91e2.jpg"><br>
<span>神盾局特工 1-3季</span>
</a>
<br><small>漫威英雄筋肉集结</small>
</div>
<ul class="tv_tab l">
<li class="mr">
<a href="">
<img src="http://r1.ykimg.com/050C00005B2E10A1E5CC8B087A06AC29?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>德雷尔一家 第三季/span><br>
</a>
<small>英国超治愈电视剧</small>
</li>
<li class="mr">
<a href="">
<img src="http://r1.ykimg.com/050C00005A3B7DDDADBA1FA758068058?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>美国众神 第一季</span><br>
</a>
<small>围观异次元神仙打架</small>
</li>
<li class="mr">
<a href="">
<img src="http://ykimg.alicdn.com/develop/image/2019-01-07/879124002351239a57a0e3d10c2c2b4b.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>神探夏洛克 第四季</span><br>
</a>
<small>福华组合强势回归</small>
</li>
<li class="mr">
<a href="">
<img src="http://ykimg.alicdn.com/develop/image/2019-03-06/62786008607b62be4c0ec1532f5a5016.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>神秘博士 第十季</span><br>
</a>
<small>时间领主的穿越游戏</small>
</li>
</ul>
<ul class="tv_tab l www">
<li class="mr">
<a href="">
<img src="http://r1.ykimg.com/050C00005922AFA1ADBC096E2A0D3E88?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>憨豆先生</span><br>
</a>
<small>憨豆先生的喜剧人生</small>
</li>
<li class="mr">
<a href="">
<img src="http://r1.ykimg.com/050C00005AD6BE27AD881A05BD01831B?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>新贵 第一季</span><br>
</a>
<small>莎士比亚坎坷人生之旅</small>
</li>
<li class="mr">
<a href="">
<img src="http://r1.ykimg.com/050C000051931634670C4A1AD90A84BD?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>楼上楼下 第一季</span><br>
</a>
<small>三十年代伦敦市政厅</small>
</li>
<li class="mr">
<a href="">
<img src="http://r1.ykimg.com/050C00005BC4097AADB1857AD60BD536?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
<span>神秘博士 第十一季</span><br>
</a>
<small>首位女博士神秘袭来</small>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
