实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优酷视频网站</title>
<style type="text/css">
*{margin: 0px;padding: 0px;list-style: none;}
.l{float: left;margin-right: 3px;}
img{border-radius: 10px;}
.clear{clear: both;}
a{color: #000;text-decoration: none;}
.contents{width: 1740px;margin: 0px auto;}
.hot_tv{line-height: 70px;}
.hot_tv ul{padding: 0 30px;}
li img{width: 240px;height: 360px;}
li{float: left; }
.mr{margin-right:10px; }
.hg{line-height: 70px;}
.big_img img{width: 100%;}
.tv_img img{width: 240px;height: 130px;}
.tv_img{width: 1740px;}
.tv_img li{margin-bottom: 55px;}
small {color: #999;}
li img:hover {box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);} /*伪类鼠标移到图片的阴影效果 X y 模糊度 外延值 颜色*/
.hot_tv img:hover {box-shadow: 1px 2px 5px 1px rgba(0,0,0,0.2);}
.hot_tv li a:hover {text-decoration: none;color:#2692FF;} /*设置鼠标移上去的颜色，没有下划线*/
.hot_tv li a:hover:after {content: "";background:#2692FF;border-radius: 10px;display: block;width: 20px;height: 3px;margin:-20px auto; }
/* :after 在……之后加上content内容（content参数必须要的） 画圆角 转换成区块 使他能用宽高参数，然后居中显示*/
</style>
</head>
<body>
<div class="contents">
<div class="content">
<div class="hot_tv">
<h2>正在热播</h2>
</div>
<ul>
<li class="l">
<a href="">
<img src="images/a.jpg" alt="">
</a><br>
<span>大冰小将 第一季</span><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
<li class="l">
<a href="">
<img src="images/b.jpg" alt="">
</a><br>
<span>大冰小将 第一季</span><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
<li class="l">
<a href="">
<img src="images/c.jpg" alt="">
</a><br>
<span>大冰小将 第一季</span><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
<li class="l">
<a href="">
<img src="images/d.jpg" alt="">
</a><br>
<span>大冰小将 第一季</span><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
<li class="l">
<a href="">
<img src="images/e.jpg" alt="">
</a><br>
<span>大冰小将 第一季</span><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
<li class="l">
<a href="">
<img src="images/f.jpg" alt="">
</a><br>
<span>大冰小将 第一季</span><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
<li class="l">
<a href="">
<img src="images/g.jpg" alt="">
</a><br>
<span>大冰小将 第一季</span><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="content">
<div class="hot_tv">
<h2 class="l">剧集></h2>
<ul class="l">
<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>
</ul>
<div class="clear"></div>
</div>
<ul>
<li class="big_img mr">
<a href="">
<img src="images/tv.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
</ul>
<ul class="tv_img">
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
</ul>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例