1.优酷的模块布局，运用浮动，及内外边距大量运用。
实例
<!DOCTYPE html>
<html>
<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;}
.mr{margin-left: 10px;}
li{list-style: none; float: left;}
a{color: #000;text-decoration: none;}
.clear{clear: both;}/*清除浮动*/
.contents{
width: 1200px;
margin: 0 auto;
}
.content{
width: 100%;
margin-top: 20px;
}
.contentul{line-height: 60px;}
.hot_tv img{
width: 190px;
height: 290px;
}
.small-tv li{margin:0px 5px 18px;}
/*定义图片尺寸，*/
.tab li{margin-left: 20px;}
.o{float: left;}
.big-show img{
width: 390px;
height:282px;
margin-right: 5px;
}
.small-tv img{
width: 190px;
height: 110px;
}
</style>
</head>
<body>
<div class="contents">
<div class="content">
<div class="contentul">
<h2>正在热播</h2>
</div>
<ul class="hot_tv">
<li>
<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>
</ul>
<div class="clera"></div>
</div><!-- 正在热播 -->
<div class="content">
<div class="contentul">
<h2 class="o ">剧集 ></h2>
<ul class="tab o">
<li>最新</li>
<li>大陆剧</li>
<li>英美剧</li>
<li>日韩剧</li>
<li>港台剧</li>
</ul>
<div class="clear"></div>
</div>
<div class="tv-show">
<div class="big-show o ">
<a href="">
<img src="static/images/tv.jpg"><br>
<span>都挺好</span>
</a><br>
<small>大幅度发到付</small>
</div>
<ul class="small-tv">
<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/tv2.jpg"><br>
<span>宁夏多少度</span>
</a><br>
<small>风景传单车队</small>
</li>
<li>
<a href="">
<img src="static/images/tv3.jpg"><br>
<span>宁夏多少度</span>
</a><br>
<small>风景传单车队</small>
</li>
<li>
<a href="">
<img src="static/images/tv4.jpg"><br>
<span>宁夏多少度</span>
</a><br>
<small>风景传单车队</small>
</li>
<li>
<a href="">
<img src="static/images/tv5.jpg"><br>
<span>宁夏多少度</span>
</a><br>
<small>风景传单车队</small>
</li>
<li>
<a href="">
<img src="static/images/tv5.jpg"><br>
<span>宁夏多少度</span>
</a><br>
<small>风景传单车队</small>
</li>
<li>
<a href="">
<img src="static/images/tv3.jpg"><br>
<span>宁夏多少度</span>
</a><br>
<small>风景传单车队</small>
</li>
<li>
<a href="">
<img src="static/images/tv4.jpg"><br>
<span>宁夏多少度</span>
</a><br>
<small>风景传单车队</small>
</li>
</ul>
</div>
<div class="clear"></div>
</div><!-- 剧集 -->
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：浮动的运用，也要清除浮动。
