实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>优酷-这世界很酷</title>
<link rel="icon" type="image/x-icon" href="http://cs.voopuse.com/home/images/1.ico">
<style type="text/css">
*{margin: 0;padding: 0;}
li{list-style: none; float:left;}
a{color: #000;text-decoration: none;}
.clear{clear: both;} /*清除浮动*/
.mr{margin-right:10px; }
.l{float: left;} /*左浮动*/
.contents{
width: 1740px;
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;}
.tv_tab img{
width: 240px;
height: 135px;
padding-bottom: 5px;
}
</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://cs.voopuse.com/home/images/a.jpg"><br>
<span>瞰中国:宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="http://cs.voopuse.com/home/images/b.jpg"><br>
<span>瞰中国:宁夏</span>
</a><br>
<small>低调的宁夏 没了四季</small>
</li>
<li class="mr">
<a href="">
<img src="http://cs.voopuse.com/home/images/c.jpg"><br>
<span>瞰中国:宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="http://cs.voopuse.com/home/images/d.jpg"><br>
<span>瞰中国:宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="http://cs.voopuse.com/home/images/e.jpg"><br>
<span>瞰中国:宁夏</span>
</a><br>
<small>低调的宁夏 没了四季</small>
</li>
<li class="mr">
<a href="">
<img src="http://cs.voopuse.com/home/images/f.jpg"><br>
<span>瞰中国:宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="http://cs.voopuse.com/home/images/g.jpg"><br>
<span>瞰中国:宁夏</span>
</a><br>
<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://cs.voopuse.com/home/images/tv.jpg"><br>
<span>瞰中国:宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</div>
<ul class="tv_tab l">
<li class="mr">
<a href="">
<img src="http://cs.voopuse.com/home/images/tv1.jpg"><br>
<span>瞰中国:宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="http://cs.voopuse.com/home/images/tv1.jpg"><br>
<span>瞰中国:宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="http://cs.voopuse.com/home/images/tv1.jpg"><br>
<span>瞰中国:宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="http://cs.voopuse.com/home/images/tv1.jpg"><br>
<span>瞰中国:宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="http://cs.voopuse.com/home/images/tv1.jpg"><br>
<span>瞰中国:宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<div class="clear"></div>
<ul class="tv_tab l">
<li class="mr">
<a href="">
<img src="http://cs.voopuse.com/home/images/tv1.jpg"><br>
<span>瞰中国:宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="http://cs.voopuse.com/home/images/tv1.jpg"><br>
<span>瞰中国:宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="http://cs.voopuse.com/home/images/tv1.jpg"><br>
<span>瞰中国:宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="http://cs.voopuse.com/home/images/tv1.jpg"><br>
<span>瞰中国:宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="http://cs.voopuse.com/home/images/tv1.jpg"><br>
<span>瞰中国:宁夏</span>
</a><br>
<small>低调的宁夏 美了四季</small>
</li>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例