实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>优酷</title>
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
<style type="text/css">
*{margin: 0;padding: 0;}
li{list-style: none;float: left;}
a{text-decoration: none;color: dimgray;}
.mr{margin-right: 9px;}
.mt{margin-top: 20px;}
.clear{clear: both;}
.l{float: left;}
.r{float: right;}
.contens{width:1204px;margin: 0 auto;}
.conten{width: 100%;margin-top:20px ;}
.hot-tv img{width:193px ;height: 289px;}
.tv-tab{width: 800px;}
.tv-tab li{margin:0px 3px 20px;}
.tv-tab img{width: 193px;height: 107px;}
.big-show img{width: 395px;height: 281px;}
.conten-ul{line-height: 60px;}
/* lb */
.header{width: 100%;height: 420px;background:#07233A;position:relative;}
.pic-show{width:1204px;margin: 0 auto;height: 420px;background: url(images/y1.jpg);background-size: cover;position: relative;}
.bg{width: 100%;height: 100%;background: url(images/y.png);background-size:100% 100%; absolute;top:0;left: 0;z-index: 999;}
.logo form{width: 370px;height: 35px;position: relative;margin-left: 320px;display: inline-block;}
.logo input{width: 350px;height: 35px;border-radius: 100px;border: none;background: rgba(234,234,234,0.5);outline: none;padding-left: 20px;}
.logo button{width: 90px;height: 35px;border-top-right-radius: 30px;border-bottom-right-radius: 30px;background: red;border: none;position: absolute;top: 0;right: 0;color: #FFF;}
/* 头部导航 */
.header-ul{position: fixed;left: 90px;z-index: 1000px;top:0;}
.menu-li li{padding: 0 10px;text-align: center;font-size: 12px;position: relative;}
.menu-li i{font-size: 18px;}
.menu-li a,i{color: rgba(234,234,234,0.5);}
.menu-li li:hover a{color: #48ADF2;}
.menu-li li:hover i{color: #48ADF2;}
/*下拉框*/
.menu-li .box{position: absolute;padding: 20px;background: #fff;top: 50px;right: -10px; display: none;}
.menu-li p{color:#ccc;font-size: 15px;}
.menu-li button{width:260px ;height:36px ;background:#48ADF2;color: #fff;border: none;margin-top: 20px;border-radius: 50px;}
.menu-li :hover .box{display: block;}
.head-r{position: absolute;top: 80px;z-index: 1000px;right: -38px;}
.head-r-menu{width: 190px;padding: 0px 15px;background: rgba(0,0,0,0.5);}
.head-r-menu a{padding: 10px 0px;color:rgba(254,254,254.0.6);display:block;font-size: 15px;line-height: 25px;white-space: nowrap;overflow: hidden;text-overflow:ellipsis;border-bottom: 1px solid #07233A;}
.head-r-menu a:hover{color: #fff;}
.head-r-menu a:hover span{font-size: 18px; display: block;color: #fff;}
/*小箭头*/
.jt{ width: 0;height: 7px;border: 7px solid;border-color: transparent transparent #fff transparent ;/*上右下左*/position: absolute;top: -21px;right: 30px;}
/**/
.ul-totage li{width: 150px;font-size: 14px;}
.ul-totage a{padding-right: 15px;color: #6D7076;line-height: 25px;}
.hrSpan{border-right: 1px solid #f2f2f2;height: 30px;display: inline-block;float: left;margin-top: 7px;margin-right:15px;}
li.icons{width: 100px;text-align: center;padding: 0 10px;}
.ul-totage li i{font-size:20px; color: #696969;margin-right: 18px;line-height: 15px;}
.icons{margin-top: 5px;}
/**/
.sup-tv img{width: 193px;height: 109px;}
/*gg*/
.lasy-ykgg{width: 100%;height: 100px;background-image: url(images/yk-gg.png);background-size: cover;background-repeat: no-repeat;}
</style>
</head>
<body>
<div class="header">
<!-- lb -->
<div class="pic-show">
<div class="bg"></div>
<div class="contens head-r">
<div class="head-r-menu r">
<a href="#"><span>这！就是原创 :</span>1v1说唱厮杀晋级赛</a>
<a href="#"><span>聚焦两会：</span>关注民生 关注人民生活健康</a>
<a href="#"><span>动漫大咖:</span>火影忍者童年的追逐的忍道</a>
<a href="#"><span>快乐大本营:</span>这里不接受娱乐请登录芒果查看</a>
<a href="#"><span>岳云鹏郭德纲:</span>欢乐喜剧人沈龙脱口秀</a>
<a href="#"><span>乡村爱情11:</span>谢广坤刘能赵四谢老七</a>
<a href="#"><span>王牌会员版 :</span>华晨宇魔改《刀剑如梦》</a>
</div>
</div>
<!-- 搜索导航 -->
<div class="contens header-ul">
<div class="logo l mt">
<a href="#"><img src="images/logo.png" ></a>
<form action="" method="">
<input type="text" name="" />
<button>全网搜</button>
</form>
</div>
<ul class="menu-li r mt">
<li><i class="fa fa-bank"></i><br /><a href="#">VIP</a></li>
<li><i class="fa fa-feed"></i><br /><a href="#">订阅</a></li>
<li><i class="fa fa-clock-o"></i><br /><a href="#">记录</a></li>
<li><i class="fa fa-arrow-up"></i><br /><a href="#">上传</a></li>
<li><i class="fa fa-television"></i><br /><a href="#">客户端</a></li>
<li><a><img src="images/80.png" style="width:40px ;height:40px;margin-top: -8px;" /></a>
<div class="box">
<span class="jt"></span>
<p>登录使用更多功能</p>
<button>登录/注销</button>
</div>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<!--end-->
<div class="contens">
<div class="conten">
<ul class="ul-totage">
<li>
<a href="#">剧集</a>
<a href="#">电影</a>
<a href="#">综艺</a>
<a href="#">动漫</a>
<a href="#">娱乐</a>
<a href="#">生活</a>
</li>
<span class="hrSpan"></span>
<li>
<a href="#">剧集</a>
<a href="#">电影</a>
<a href="#">综艺</a>
<a href="#">动漫</a>
<a href="#">娱乐</a>
<a href="#">生活</a>
</li>
<span class="hrSpan"></span>
<li>
<a href="#">剧集</a>
<a href="#">电影</a>
<a href="#">综艺</a>
<a href="#">动漫</a>
<a href="#">娱乐</a>
<a href="#">生活</a>
</li
<span class="hrSpan"></span>
<li>
<a href="#">剧集</a>
<a href="#">电影</a>
<a href="#">综艺</a>
<a href="#">动漫</a>
<a href="#">娱乐</a>
<a href="#">生活</a>
</li>
<span class="hrSpan"></span>
<li style="width: 60px;">
<a href="#">剧集</a><br />
<a href="#">电影</a>
</li>
<span class="hrSpan"></span>
<li class="icons"><i class="fa fa-bars"></i><br /><a href="#">优酷片库</a></li>
<li class="icons"><i class="fa fa-book"></i><br /><a href="#">指数排行</a></li>
<li class="icons"><i class="fa fa-cubes"></i><br /><a href="#">大鱼号精选</a></li>
<li class="icons"><i class="fa fa-crosshairs"></i><br /><a href="#">下载应用</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<!---->
<div class="contens">
<div class="conten">
<div class="conten-ul">
<h2>正在热播</h2>
</div>
<ul class="hot-tv">
<li class="mr"><a href="#"><img src="images/a.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li class="mr"><a href="#"><img src="images/b.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li class="mr"><a href="#"><img src="images/c.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li class="mr"><a href="#"><img src="images/d.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li class="mr"><a href="#"><img src="images/f.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li><a href="#"><img src="images/c.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
</ul>
<div class="clear"></div>
</div>
<!-- 第二块 -->
<div class="contens">
<div class="conten">
<div class="conten-ul">
<h2 class="l mr">剧集 ></h2>
<ul class="tab 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>
<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="images/tv.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small>
</div>
<ul class="tv-tab l">
<li><a href="#"><img src="images/tv1.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li><a href="#"><img src="images/tv2.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li><a href="#"><img src="images/tv3.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li><a href="#"><img src="images/tv4.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li><a href="#"><img src="images/tv1.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li><a href="#"><img src="images/tv2.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li><a href="#"><img src="images/tv3.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li><a href="#"><img src="images/tv4.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
</ul>
</div>
</div>
<!--网剧-->
<div class="contens">
<div class="conten">
<div class="conten-ul">
<h2>超级网剧</h2>
</div>
<ul class="sup-tv l">
<li class="mr"><a href="#"><img src="images/tv1.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li class="mr"><a href="#"><img src="images/tv2.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li class="mr"><a href="#"><img src="images/tv4.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li class="mr"><a href="#"><img src="images/tv3.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li class="mr"><a href="#"><img src="images/tv1.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li><a href="#"><img src="images/tv2.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
</ul>
</div>
<div class="clear"></div>
</div>
<!---->
<div class="contens">
<div class="conten">
<div class="lasy-ykgg"></div>
</div>
</div>
<!---->
<div class="contens">
<div class="conten">
<div class="conten-ul">
<h2 class="l mr">剧集 ></h2>
<ul class="tab 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>
<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="images/tv.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small>
</div>
<ul class="tv-tab l">
<li><a href="#"><img src="images/tv1.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li><a href="#"><img src="images/tv2.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li><a href="#"><img src="images/tv3.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li><a href="#"><img src="images/tv4.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li><a href="#"><img src="images/tv1.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li><a href="#"><img src="images/tv2.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li><a href="#"><img src="images/tv3.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
<li><a href="#"><img src="images/tv4.jpg" /><br /><span>看中国：宁夏</span></a><br /><small>江山如画</small></li>
</ul>
</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
