实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优酷</title>
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
*{ margin:0; padding:0; }
li{ list-style:none ; float: left; }
.l{float: left;}
.mr{ margin-right:15px; }
a{ color: #000; text-decoration: none; }
.clear {clear:both;}
.conte{ width: 1740px; margin: 0 auto; }
.contet{ width: 100%; margin-top: 20px; }
h2{ }
.hot_tv img{ width:240px;}
.contets{line-height: 60px;}
.tab li { float-right:10px; }
.tv_tab img {width: 240px;height: 135px; }
li span{ line-height:30px; font-size: 20px;font-weight:bold;}
li small { line-height:30px; font-size: 14px;}
</style>
</head>
<body>
<div class="conte">
<div class="contet">
<div class="contets">
<h2>正在热播</h2>
</div>
<ul class="hot_tv">
<li class="mr"><a href=""><img src="img/a.jpg"><br> <span>俯瞰宁夏</span></a><br><small>低调的宁夏</small></li>
<li class="mr"><a href=""><img src="img/b.jpg"><br> <span>俯瞰宁夏</span></a><br><small>低调的宁夏</small></li>
<li class="mr"><a href=""><img src="img/c.jpg"><br> <span>俯瞰宁夏</span></a><br><small>低调的宁夏</small></li>
<li class="mr"><a href=""><img src="img/d.jpg"><br> <span>俯瞰宁夏</span></a><br><small>低调的宁夏</small></li>
<li class="mr"><a href=""><img src="img/e.jpg"><br> <span>俯瞰宁夏</span></a><br>低调的宁夏</li>
<li ><a href=""><img src="img/f.jpg"><br> <span>俯瞰宁夏</span></a><br>低调的宁夏</li>
</ul>
</div>
<div class="clear"></div>
<div class="contet1">
<div class="contets">
<h2 class="l">剧集 ></h2>
<ul class="tab l mr">
<li class="mr"><a href="">最新</a></li>
<li class="mr"><a href="">大陆</a></li>
<li class="mr"><a href="">日剧</a></li>
<li class="mr"><a href="">韩剧</a></li>
<li><a href="">美剧</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="tv_show">
<div class="big_show l mr">
<a href="">
<img src="img/tv.jpg"><br>
<span> 服饰宁乡</span><br>
<small>asdff</small>
</a>
</div>
<ul class="tv_tab l">
<li class="mr"><a href="">
<img src="img/tv1.jpg"><br>
<span> 服饰宁乡</span><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</a>
</li>
<li class="mr"><a href="">
<img src="img/tv2.jpg"><br>
<span> 服饰宁乡</span><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</a>
</li>
<li class="mr"><a href="">
<img src="img/tv1.jpg"><br>
<span> 服饰宁乡</span><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</a>
</li>
</ul>
<ul class="tv_tab l">
<li class="mr"><a href="">
<img src="img/tv1.jpg"><br>
<span> 服饰宁乡</span><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</a>
</li>
<li class="mr"><a href="">
<img src="img/tv1.jpg"><br>
<span> 服饰宁乡</span><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</a>
</li>
<li class="mr"><a href="">
<img src="img/tv1.jpg"><br>
<span> 服饰宁乡</span><br>
<small>姚晨郭京飞陷亲情旋涡</small>
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例