实例
<!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;}
li{
list-style: none;
}
a{
text-decoration: none;
color: #000;
}
.mr{
margin-right: 10px;
}
.mt{
margin-top: 20px;
}
.clear{
clear: both;
}
.float_all{
float: left;
}
#box{
width: 1200px;
margin: 0 auto;
}
.box-1{
width: 100%;
margin-top: 35px;
}
h2{
line-height: 52px;
margin-right: 15px;
}
.img_1{
width: 162px;
height: 240px;
}
.p2{
font-size: 14px;
}
li a{
font-size: 14px;
}
.p1{
font-size: 16px;
line-height: 52px;
}
.p1 a{
margin-left: 15px;
}
.img_2{
width: 394px;
height: 280px;
}
.img_3{
width: 190px;
height: 108px;
}
</style>
</head>
<body>
<div id="box">
<div class="box-1">
<h2>正在热播</h2>
<ul>
<li class="mr float_all">
<a href="#"><img class="img_1" src="static/images/a.jpg"></a><br>
<a href="#">瞰中国：宁夏</a>
<p class="p2">低调的宁夏 美了四季</p>
</li>
<li class="mr float_all">
<a href="#"><img class="img_1" src="static/images/b.jpg"></a><br>
<a href="#">瞰中国：宁夏</a>
<p class="p2">低调的宁夏 美了四季</p>
</li>
<li class="mr float_all">
<a href="#"><img class="img_1" src="static/images/c.jpg"></a><br>
<a href="#">瞰中国：宁夏</a>
<p class="p2">低调的宁夏 美了四季</p>
</li>
<li class="mr float_all">
<a href="#"><img class="img_1" src="static/images/d.jpg"></a><br>
<a href="#">瞰中国：宁夏</a>
<p class="p2">低调的宁夏 美了四季</p>
</li>
<li class="mr float_all">
<a href="#"><img class="img_1" src="static/images/e.jpg"></a><br>
<a href="#">瞰中国：宁夏</a>
<p class="p2">低调的宁夏 美了四季</p>
</li>
<li class="mr float_all">
<a href="#"><img class="img_1" src="static/images/a.jpg"></a><br>
<a href="#">瞰中国：宁夏</a>
<p class="p2">低调的宁夏 美了四季</p>
</li>
<li class="float_all">
<a href="#"><img class="img_1" src="static/images/f.jpg"></a><br>
<a href="#">瞰中国：宁夏</a>
<p class="p2">低调的宁夏 美了四季</p>
</li>
</ul>
<div class="clear"></div>
<div class="box-1">
<h2 class="float_all">剧集 ></h2>
<p class="p1">
<a href="#">最新</a>
<a href="#">大陆剧</a>
<a href="#">日剧</a>
<a href="#">韩剧</a>
<a href="#">美剧</a>
</p>
<div class="clear"></div>
<ul class="float_all mr">
<li><a href=""><img class="img_2" src="static/images/tv.jpg"></a></li>
<a href="#">瞰中国：宁夏</a>
<p class="p2">低调的宁夏 美了四季</p>
</ul>
<ul class="float_all">
<li class="mr float_all">
<a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br>
<a href="#">瞰中国：宁夏</a>
<p class="p2">低调的宁夏 美了四季</p>
</li>
<li class="mr float_all">
<a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br>
<a href="#">瞰中国：宁夏</a>
<p class="p2">低调的宁夏 美了四季</p>
</li>
<li class="mr float_all">
<a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br>
<a href="#">瞰中国：宁夏</a>
<p class="p2">低调的宁夏 美了四季</p>
</li>
<li class="float_all">
<a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br>
<a href="#">瞰中国：宁夏</a>
<p class="p2">低调的宁夏 美了四季</p>
</li>
</ul>
<ul class="float_all mt">
<li class="mr float_all">
<a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br>
<a href="#">瞰中国：宁夏</a>
<p class="p2">低调的宁夏 美了四季</p>
</li>
<li class="mr float_all">
<a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br>
<a href="#">瞰中国：宁夏</a>
<p class="p2">低调的宁夏 美了四季</p>
</li>
<li class="mr float_all">
<a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br>
<a href="#">瞰中国：宁夏</a>
<p class="p2">低调的宁夏 美了四季</p>
</li>
<li class="float_all">
<a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br>
<a href="#">瞰中国：宁夏</a>
<p class="p2">低调的宁夏 美了四季</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例