模仿优酷主页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>优酷-这世界很酷</title>
<link rel="shortcut icon" href="static/images/1.ico" type="image/x-icon">
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<div class="header">
<div class="pic_show">
<div class="bg"></div>
<div class="contents header_r">
<div class="header_r_menu r">
<a href="" style="color: #FFFFFF;"><span style="font-size: 20px;display: block;color: #FFFFFF;">都挺好:</span>苏明成冲动离婚</a>
<a href=""><span>喜剧人5:</span>卢鑫说摇滚相声对飙叶逢春</a>
<a href=""><span>这就是原创会员版:</span>萧敬腾轰走博出位网红</a>
<a href=""><span>乡村爱情11:</span>出事啦！宋晓峰遭暴打</a>
<a href=""><span>只为遇见你:</span>亲姐妹开撕！</a>
<a href=""><span>以团会员版:</span>奶茶跳</a>
<a href="" style="border:none"><span>王牌会员版:</span>华晨宇掐架碰瓷</a>
</div>
</div>
</div>
<div class="contents header_ul">
<div class="logo l mt">
<a href="http://www.youku.com"><img src="static/images/logo.png" alt="" srcset=""></a>
<form action="" method="">
<input type="text" name="" id="">
<button>全网搜</button>
</form>
</div>
<ul class="menu_li r mt">
<li><i class="fa fa-bank" style="color:#c4a25a"></i><br><a href="" style="color:#c4a25a">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>
<div class="client">
<span class="arrow"></span>
<div class="ctop">
<a href="">
<img src="static/images/client1.png" width="64">
<h3>优酷客户端</h3>
<span>快速·稳定的观看体验</span>
</a>
<a href="">
<img src="static/images/client2.jpg" width="64">
<h3>优酷移动APP</h3>
<span>全网独播尽在手中</span>
</a>
</div>
<div class="cbottom">
<span>优酷TV版</span>
<span>CIBN酷喵影视智能电视App</span>
</div>
</div>
</li>
<li>
<a href=""><img src="static/images/80.png" alt="" srcset="" width="40" style="margin-top:-5px;"></a>
<div class="box">
<span class="arrow"></span>
<p>登陆使用更多功能</p>
<form action="" method="">
<button>登陆/注册</button>
</form>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<!-- head头部内容结束 -->
<div class="contents">
<div class="content">
<ul class="voltage">
<li>
<a href="">剧集</a>
<a href="">电影</a>
<a href="">综艺</a>
<a href="">动漫</a>
<a href="">娱乐</a>
<a href="">生活</a>
</li>
<span class="b_r"></span>
<li>
<a href="">少儿</a>
<a href="">来疯</a>
<a href="">音乐</a>
<a href="">搞笑</a>
<a href="">直播</a>
<a href="">片库</a>
</li>
<span class="b_r"></span>
<li>
<a href="">纪实</a>
<a href="">公益</a>
<a href="">体育</a>
<a href="">汽车</a>
<a href="">科技</a>
<a href="">财经</a>
</li>
<span class="b_r"></span>
<li>
<a href="">文化</a>
<a href="">旅游</a>
<a href="">时尚</a>
<a href="">亲子</a>
<a href="">教育</a>
<a href="">游戏</a>
</li>
<span class="b_r"></span>
<li style="width: 80px;">
<a href="">资讯</a><br>
<a href="">VR</a>
</li>
<span class="b_r"></span>
<li class="hoc"><i class="fa fa-feed"></i><br><a href="">优酷片库</a></li>
<li class="hoc"><i class="fa fa-bar-chart"></i><br><a href="">指数排行</a></li>
<li class="hoc"><i class="fa fa-angellist"></i><br><a href="">大鱼号精选</a></li>
<li class="hoc"><i class="fa fa-desktop"></i><br><a href="">下载应用</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="contents">
<div class="content">
<div class="contentUL">
<h2 class="l">正在热播</h2>
<a class="r" href="#">向前一步</a>
<!-- <span class="r" style="margin-right:60px;">向前一步</span> -->
</div>
<div class="clear"></div>
<ul class="hot_tv">
<li class="mr">
<a href="">
<img src="static/images/a.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/b.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/c.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/d.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/e.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/e.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li>
<a href="">
<img src="static/images/f.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="content">
<div class="contentUL">
<h2 class="l">剧集 ></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>
</div>
<div class="clear"></div>
<div class="content">
<ul class="juji">
<li class="mr">
<a href="">
<img src="static/images/tv.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li>
<div class="juright">
<div>
<ul>
<li class="mr">
<a href="">
<img src="static/images/tv1.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv2.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv3.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv4.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li>
<a href="">
<img src="static/images/tv5.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
</ul>
</div>
<div class="jbbox">
<ul>
<li class="mr">
<a href="">
<img src="static/images/tv1.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv2.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv3.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv4.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li>
<a href="">
<img src="static/images/tv5.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
<div class="content">
<div class="contentUL">
<h2>超级网剧</h2>
</div>
<ul class="net_tv">
<li class="mr">
<a href="">
<img src="static/images/nettv1.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/nettv2.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/nettv3.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/nettv4jpg.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/nettv5.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/nettv6.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li>
<a href="">
<img src="static/images/nettv4jpg.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="content">
<img src="static/images/middle.jpg" alt="" srcset="">
</div>
<div class="content">
<div class="contentUL">
<h2 class="l">综艺 ></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>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="content">
<ul class="juji">
<li class="mr">
<a href="">
<img src="static/images/tv.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li>
<div class="juright">
<div>
<ul>
<li class="mr">
<a href="">
<img src="static/images/tv1.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv2.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv3.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv4.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li>
<a href="">
<img src="static/images/tv5.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
</ul>
</div>
<div class="jbbox">
<ul>
<li class="mr">
<a href="">
<img src="static/images/tv1.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv2.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv3.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv4.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
<li>
<a href="">
<img src="static/images/tv5.jpg" alt="" srcset=""><br>
<span>瞰中国 : 宁夏</span>
</a><br>
<small>低调的宁夏，美了四季</small>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</body>
</html>