实例
运用之前所学的html和css知识，结合今天所学的布局，完成优酷首页热播和剧集模块的布局，运用到了盒模型，内外边距，浮动，清除浮动
<!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>
/*公共css*/
*{margin: 0;padding: 0;}
a{color: #000;text-decoration: none;}
li{list-style: none;}
.fl{float: left;} .fr{float: right;}
.clear{clear:both;}
.mr10{margin-right: 10px;} .mb20{margin-bottom: 18px;}
.content{width: 1750px;margin:0 auto;}
.title{line-height:70px;}
/*热播*/
.hot_list li{width:240px;}
.hot_list li img{width: 100%;}
.hot_list li span{display: block;color:#000;}
/*剧集*/
.sub_title li{margin-left:25px;}
.big_tv{width: 490px;}
.big_tv img{width: 490px;height: 334px;}
.big_tv span{display: block;}
.tv_top{overflow: hidden;}
.tv_top li{width:240px}
.tv_top li img{width:240px;height: 135px;}
.tv_top li span{display: block;}
</style>
</head>
<body>
<div class="content">
<div class="title">
<h2>正在热播</h2>
</div>
<ul class="hot_list">
<li class="fl mr10">
<a href="">
<img src="static/images/a.jpg" alt="">
<span>瞰中国：宁夏 </span>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="fl mr10">
<a href="">
<img src="static/images/b.jpg" alt="">
<span>瞰中国：宁夏 </span>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="fl mr10">
<a href="">
<img src="static/images/c.jpg" alt="">
<span>瞰中国：宁夏 </span>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="fl mr10">
<a href="">
<img src="static/images/d.jpg" alt="">
<span>瞰中国：宁夏 </span>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="fl mr10">
<a href="">
<img src="static/images/e.jpg" alt="">
<span>瞰中国：宁夏 </span>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="fl mr10">
<a href="">
<img src="static/images/f.jpg" alt="">
<span>瞰中国：宁夏 </span>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="fl">
<a href="">
<img src="static/images/g.jpg" alt="">
<span>瞰中国：宁夏 </span>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<div class="clear"></div>
</ul>
</div>
<div class="content">
<div class="title">
<h2 class="fl">剧集 ></h2>
<ul class="sub_title">
<li class="fl"><a href="">大陆剧</a></li>
<li class="fl"><a href="">欧美剧</a></li>
<li class="fl"><a href="">港台剧</a></li>
<li class="fl"><a href="">日韩剧</a></li>
<div class="clear"></div>
</ul>
</div>
<div class="tv">
<div class="big_tv fl mr10">
<a href="">
<img src="static/images/tv.jpg" alt="">
<span>瞰中国：宁夏 </span>
</a>
<small>低调的宁夏 美了四季</small>
</div>
<ul class="tv_top mb20">
<li class="fl mr10">
<a href="">
<img src="static/images/tv1.jpg" alt="">
<span>瞰中国：宁夏 </span>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="fl mr10">
<a href="">
<img src="static/images/tv2.jpg" alt="">
<span>瞰中国：宁夏 </span>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="fl mr10">
<a href="">
<img src="static/images/tv3.jpg" alt="">
<span>瞰中国：宁夏 </span>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="fl mr10">
<a href="">
<img src="static/images/tv4.jpg" alt="">
<span>瞰中国：宁夏 </span>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="fl mr10">
<a href="">
<img src="static/images/tv5.jpg" alt="">
<span>瞰中国：宁夏 </span>
</a>
<small>低调的宁夏 美了四季</small>
</li>
</ul>
<ul class="tv_top">
<li class="fl mr10">
<a href="">
<img src="static/images/tv1.jpg" alt="">
<span>瞰中国：宁夏 </span>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="fl mr10">
<a href="">
<img src="static/images/tv2.jpg" alt="">
<span>瞰中国：宁夏 </span>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="fl mr10">
<a href="">
<img src="static/images/tv3.jpg" alt="">
<span>瞰中国：宁夏 </span>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="fl mr10">
<a href="">
<img src="static/images/tv4.jpg" alt="">
<span>瞰中国：宁夏 </span>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="fl mr10">
<a href="">
<img src="static/images/tv5.jpg" alt="">
<span>瞰中国：宁夏 </span>
</a>
<small>低调的宁夏 美了四季</small>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
