css分外部样式，外部样式针对共享样式表head下插入link标签来调用外部样式表
}内部样式，针对单个文档。
常用的CSS选择器，基础选择器分标记选择器，*在CSS中称为通配符，为所有的意思。
id选择器，以"#"来定义，特殊性：唯一。
类选择器，class以“.”来定义，可以多个元素使用。
分单类和多类选择器。
单类有个特殊性。可调取某个标签来赋予样式。
p.main{border:1px solid red;}/*p标签下class为main赋予样式*/
多类选择器，class的属性可以包含多个单词，每个单词用空格隔开。使元素同时拥有多个样式。
内联样式优先级最高。内部第二，外部最后。
float浮动设定后一定要清除浮动，否则浮动使元素不占据空间。
clear{clear:both}清除所有浮动
实例
<!DOCTYPE html>
<html>
<head>
<title>优酷-这世界很酷</title>
<link rel="icon" type="imgaes-icon" href="staic/imgaes/1.ico">
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
html,body{overflow-x: hidden; }/*去掉X轴的滚动框*/
a{color: #000;text-decoration:none; }/*a链接加颜色去下划线*/
li{list-style:none; float: left;}/*去除无序列表效果，向左浮动*/
.qcfd{clear: both;}/*清除浮动*/
.fd{float: left;}/*向左浮动*/
.cn_tu{ /*定义li无序列表*/
margin-right: 10px;
}
.cn_tu2{
margin-right: 20px;
}
.cnwai{ /*最外围的一个大小*/
width: 1316px;
margin: 0 auto;
margin-left: 50px;
}
.cnnei{
width: 100%;
margin-top: 20px;
}
.cnul{line-height: 70px;
}
.hot_tv img{
width: 200px;
height: 300px;
}
.tb li{
margin-left: 25px;
}
.tv_teb img{
width: 230px;
height: 142px;
}
</style>
<body>
<div class="cnwai">
<div class="cnnei">
<div class="cnul"><h2>正在热播</h2></div>
<ul class="hot_tv">
<li class="cn_tu">
<a href="">
<img src="static/images/a.jpg" ><br>
<span>瞰中国：宁夏</span><br><small>低调的宁夏 美了四季</small></a>
</li>
<li class="cn_tu">
<a href="">
<img src="static/images/b.jpg" ><br>
<span>瞰中国：宁夏</span><br><small>低调的宁夏 美了四季</small></a>
</li>
<li class="cn_tu">
<a href="">
<img src="static/images/c.jpg" ><br>
<span>瞰中国：宁夏</span><br><small>低调的宁夏 美了四季</small></a>
</li>
<li class="cn_tu">
<a href="">
<img src="static/images/d.jpg" ><br>
<span>瞰中国：宁夏</span><br><small>低调的宁夏 美了四季</small></a>
</li>
<li class="cn_tu">
<a href="">
<img src="static/images/e.jpg" ><br>
<span>瞰中国：宁夏</span><br><small>低调的宁夏 美了四季</small></a>
</li>
<li class="cn_tu">
<a href="">
<img src="static/images/f.jpg" ><br>
<span>瞰中国：宁夏</span><br><small>低调的宁夏 美了四季</small></a>
</li>
</ul>
<div class="qcfd"></div>
</div>
<div class="cnnei">
<div class="cnul"><h2 class="cn_tu fd">剧集 ></h2>
<ul class="fd tb">
<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="qcfd"></div>
</div>
<div class="tv_show">
<div class="big_show fd cn_tu2">
<a href="">
<img src="static/images/tv.jpg"><br>
<span>瞰中国：宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small></div>
<ul class="tv_teb">
<li class="cn_tu2">
<a href=""><img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span></a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="cn_tu2">
<a href=""><img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span></a><br>
<small>低调的宁夏 美了四季</small>
</li><li class="cn_tu2">
<a href=""><img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span></a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="cn_tu2">
<a href=""><img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span></a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="cn_tu2">
<a href=""><img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span></a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="cn_tu2">
<a href=""><img src="static/images/tv1.jpg"><br>
<span>瞰中国：宁夏</span></a><br>
<small>低调的宁夏 美了四季</small>
</li>
</ul>
<div class="qcfd"></div>
</div>
<div class="cnnei"><h2>大陆影讯</h2></div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例