本文主要是介绍前端静态开发案例-基于H5C3开发的仿照视频网站的前端静态页面-1 静态页面部分，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
原创作者：田超凡（程序员田宝宝）
版权所有，引用请注明原作者，严禁复制转载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>程序员田宝宝原创版权所有，仿冒必究，该界面是仿照某视频网站官网开发的静态页面</title>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<link href="common.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#top {
margin-bottom:20px;
}
#dingbu {
height: 60px;
background-color: #222222;
}
#nei {
width: 1000px;
margin: auto;
}
#dingbu span {
margin-left: 50px;
}
#dingbu .yue {
position: relative;
margin-left: 50px;
color: #535353;
font-size: 14px;
top: -8px;
left: 7px;
}
#s {
position: relative;
top: -30px;
}
#dingbu .sou {
color: #ffffff;
width:40px;
background-color:#42a900;
}
#dingbu .kuang {
width: 300px;
height: 20px;
background-color: #e3e3e3;
}
#dingbu .kuang:hover {
background-color: #ffffff;
}
#dingbu .dao {
width: 40px;
height: 50px;
position: relative;
left: -0px;
top: -30px;
background-color: #808080;
color: #e3e3e3;
font-size: 20px;
}
#dingbu li {
list-style: none;
float: left;
margin-left: 10px;
color: #CCC;
cursor: pointer;
font-size: 12px;
}
#dingbu ul {
float: right;
margin-top: -20px;
}
#dingbu li:hover {
color: #42a900;
}
#tp {
background-color: #000;
height:480px;
}
#lun ul {
margin-top: -50px; /*外边距，设置为负数，就是向上偏移*/
margin-left: 400px;
position: relative; /*相对定位，数字就会显示在图片的上面*/
text-align: center;
}
#lun li {
float: left;
list-style: none; /*去掉前面的点*/
width: 30px;
height: 30px;
background-color: #b6ff00;
margin: 5px;
text-align: center; /*水平居中*/
line-height: 30px; /*行高设置为和高度一样，就是垂直居中*/
border-radius: 15px; /*边框半径，可以设置为圆形*/
cursor: pointer; /*鼠标的样式*/
}
#lun{
position:relative;
margin-left:200px;
}
#tu {
clear: both;
height:400px;
width:1000px;
}
#xia {
margin:auto;
clear: both;
width: 1200px;
padding-top: 15px;
padding-left:90px;
position:relative;
top:-5px;
}
table {
width: 1200px;
text-align:center;
border: 1px solid #42a900;
border-radius: 10px;
}
.you{
border:1px solid red;
position:relative;
top:-30px;
right:-15px;
}
table tr td {
color: #ffffff;
/*border:1px solid #ffffff;*/
padding-left: 10px;
font-size: 12px;
padding-top: 5px;
}
table tr td:hover{
color:#42a900;
cursor:pointer;
}
</style>
</head>
<body>
<div id="top">
<div id="dingbu">
<div id="nei">
<span class="zuo">
<img src="image/aiqiyilogo.png" /><br />
<a class="yue">悦   享   品   质</a>
</span>
<span class="dao">导航▽</span>
<span id="s">
<input class="kuang" /><a class="sou">搜全网</a></span>
<ul class="you">
<li>登录</li>
<li>注册</li>
<li>开通VIP</li>
<li>上传</li>
<li>下载客户端</li>
<li>消息</li>
<li>播放记录</li>
</ul>
</div>
</div>
<div id="tp">
<div id="lun">
<img id="tu" src="image/ad-01.jpg" />
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div id="xia">
<table>
<tr>
<td>娱乐</td>
<td>电影</td>
<td>电视剧</td>
<td>动漫</td>
<td>生活</td>
<td>音乐</td>
<td>搞笑</td>
<td>财经</td>
<td>军事</td>
<td>风云榜</td>
<td>奇秀直播</td>
<td>商场</td>
<td>大头</td>
<td>文学</td>
<td rowspan="2"><img src="image/会员.PNG" /></td>
</tr>
<tr>
<td>体育</td>
<td>片花</td>
<td>综艺</td>
<td>儿童</td>
<td>母婴</td>
<td>时尚</td>
<td>原创</td>
<td>科技</td>
<td>公益</td>
<td>全网影视</td>
<td>直播中心</td>
<td>游戏视频</td>
<td> 号</td>
<td>广告</td>
</tr>
<tr>
<td>咨询</td>
<td>网络电影</td>
<td>脱口秀</td>
<td>教育</td>
<td>健康</td>
<td>旅游</td>
<td>拍客</td>
<td>汽车</td>
<td>纪录片</td>
<td>全网搜索</td>
<td>应用商店</td>
<td>游戏中心</td>
<td>VR</td>
<td>个人中心</td>
<td>VIP会员</td>
</tr>
<tr>
</tr>
</table>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var i = 1;
$("#lun li").eq(0).css("background-color", "#f00");//一开始，第一个变红
function chgImg() {
i++;
if (i > 6) {
i = 1;
}
$("#lun img").attr("src", "image/ad-0" + i + ".jpg");/*图片变换*/
$("#lun li").css("background-color", "#b6ff00"); /*所有的li颜色先还原*/
$("#lun li").eq(i - 1).css("background-color", "#f00"); /*下标对应的li变红*/
}
var s = setInterval(chgImg, 1000);//注意：这里必须要有一个变量接收，后面才能关闭定时器
$("#lun li").mouseover(function () {
i = $(this).text() - 1; //将li里面的文本，赋值给下标变量i
chgImg();
clearInterval(s); //定时器关闭
}).mouseleave(function () {
s = setInterval(chgImg, 1000); //定时器开启
})
</script>
<!--主体开始-->
<div id="full">
<div id="no1">
<div id="Focus">
<div id="top">
<h3>今日焦点</h3>
<p>更多></p>
</div>
<div id="middle">
<h2><a href="#">文在寅当选韩国新总统 今日立即执政</a></h2>
<ul>
<li><a href="#">17年中国最富500人出炉 蓝鲸死亡游戏流入中国</a></li>
<li><a href="#">男子摩托车被偷没报案 车辆肇事被判连带赔8万</a></li>
<li><a href="#">女司机30秒犀利眼神吓小偷 大城市恋爱成本报告</a></li>
<li><a href="#">去吃生蚝三文鱼的先等等 加州遭千万小龙虾入侵</a></li>
<li><a href="#">孩子被小伙伴欺负，家长是否应支持打回去？</a></li>
<li><a href="#">婴儿手握避孕环出生 夫妻深圳卖房养百余流浪狗</a></li>
</ul>
</div>
<div id="bottom">
<div id="left">
<img src="图片素材/img1.PNG"/>
<h2><a href="#">解放军地铁列队候车照走红</a></h2>
</div>
<div id="right">
<img src="图片素材/001.gif" id="jun"/>
<h2><a href="#">老师无视墙倒淡定继续上课</a></h2>
</div>
</div>
</div>
<div id="Focus2">
<div id="top">
<img src="图片素材/002.jpg"/>
<div id="jui"><a href="#">笑霸来了 ：真人芭比卸妆照骗 毒鸡汤太浪</a></div>
<div id="suv"></div>
</div>
<div id="bottom">
<ul>
<li><a href="#">专访《冠军》宋茜:没偶像包袱 霍如夫妇为女祈福</a></li>
<li><a href="#">Baby谈儿子:一拍他就打嗝 韩红方否认赴美结婚</a></li>
<li><a href="#">罗晋郑爽新戏片场甜发糖 《外科》结局胡歌现身</a></li>
<li><a href="#">音乐榜:鹿晗开挂霸榜 刘雯刘诗诗巴黎看秀组CP</a></li>
<li><a href="#">欢乐颂回忆录 娜扎同款防晒保湿喷雾39元包邮</a></li>
</ul>
</div>
</div>
<div id="Focus3">
<ul>
<li>
<img src="图片素材/0e9d805bb1ee4b0a999881eef57e3d90.jpg"/> </li>
<li class="txt"><a href="#">奔跑吧：邓超秀套路坑队友</a></li>
<li>
<img src="图片素材/img5.PNG"/>
</li>
<li class="txt"><a href="#">姜思达化身捕黄鳝小能手</a></li>
<li>
<img src="图片素材/a6a6f5a3f7584e5aae81b114dfcbbbe7.jpg"/>
</li>
<li class="txt"><a href="#">黄磊曝曾是奇葩说导师人选</a></li>
</ul>
<ul>
<li>
<img src="图片素材/img6.PNG"/>
</li>
<li class="txt"><a href="#">周冬雨赵丽颖素颜封面PK</a></li>
<li>
<img src="图片素材/img7.PNG"/>
</li>
<li class="txt"><a href="#">盘点那些跨界实力的好歌手</a></li>
<li>
<img src="图片素材/img8.PNG"/>
</li>
<li class="txt"><a href="#">中国有嘻哈周艺轩竞选曝光</a></li>
</ul>
<ul id="end">
<li>
<img src="图片素材/0718e5f0f6a643c4a667bc445ca54334.jpg"/>
</li>
<li class="txt"><a href="#">一带一路与你相关的都在这</a></li>
<li>
<img src="图片素材/img9.PNG"/>
</li>
<li class="txt"><a href="#">高能！妹子爬墙结局笑喷</a></li>
<li>
<img src="图片素材/img10.PNG"/>
</li>
<li class="txt"><a href="#">佩奇和苏西郊游迷路了</a></li>
</ul>
</div>
</div>
<div id="artical">
<div id="no2">
<div id="area1">
<h3>综艺
<p>更多></p>
<ul>
<li>奔跑吧</li>
<li>歌手</li>
<li>坑王驾到</li>
</ul>
</h3>
</div>
<div id="area2">
<div id="left">
<div id="top">
<p class="rule">05-09期</p>
</div>
<div id="under" class="tab">
<h3><a href="#">吃光全宇宙：杭州(上)</a></h3>
<p><a href="#">吃光天团泥塘大战黄鳝 姜思达开挂了！捉黄鳝名媛范尽失</a></p>
</div>
</div>
<div id="right">
<ul>
<li>
<img src="图片素材/icon2.jpg"/>
</li>
<li class="tab">
<h3><a href="#">奔跑吧</a></h3>
<p><a href="#">陈赫李沁嘴对嘴互投食</a></p>
</li>
<li>
<img src="图片素材/icon6.jpg"/>
</li>
<li class="tab">
<h3><a href="#">来吧冠军第2季</a></h3>
<p><a href="#">叫一声“假”乃亮 你敢答应吗</a></p>
</li>
</ul>
<ul>
<li>
<img src="图片素材/icon3.jpg"/>
</li>
<li class="tab">
<h3><a href="#">天生是优我</a></h3>
<p><a href="#">黄思嘉状态欠佳罗教头临时换人</a></p>
</li>
<li>
<img src="图片素材/icon7.jpg"/>
</li>
<li class="tab">
<h3><a href="#">坑王驾到：VIP尊享</a></h3>
<p><a href="#">吓死宝宝了！唱戏竟唱出鬼</a></p>
</li>
</ul>
<ul>
<li>
<img src="图片素材/icon4.jpg"/>
</li>
<li class="tab">
<h3><a href="#">等着我</a></h3>
<p><a href="#">弟弟被拐卖引父母双双自杀</a></p>
</li>
<li>
<img src="图片素材/icon8.jpg"/>
</li>
<li class="tab">
<h3><a href="#">金曲捞</a></h3>
<p><a href="#">郁可唯再现王菲遗珠之作</a></p>
</li>
</ul>
<ul id="lEnd">
<li>
<img src="图片素材/icon5.jpg"/>
</li>
<li class="tab">
<h3><a href="#">笑声传奇</a></h3>
<p><a href="#">我也很绝望！文松被怼“娘仙”</a></p>
</li>
<li >
<img src="图片素材/icon8.jpg"/>
</li>
<li class="tab">
<h3><a href="#">妈妈咪呀</a></h3>
<p><a href="#">媳妇献唱公公婆婆定情之歌</a></p>
</li>
</ul>
</div>
</div>
</div>
<div id="no3">
<div id="top">
<h2>精彩推荐</h2>
<p>更多</p>
</div>
<div id="bottom" class="tab">
<img src="图片素材/icon11.jpg"/>
<h4><a href="#">奔跑团撩妹能力排行榜</a></h4>
<ul>
<li><a href="#">小区发球王贾乃亮回归</a></li>
<li><a href="#">郑恺唐艺昕互怼集锦</a></li>
<li><a href="#">爱笑家族回归笑幕重启</a></li>
<li><a href="#">吴亦凡潘玮柏全球集结</a></li>
<li><a href="#">姐姐2回归大S夫妇来啦</a></li>
</ul>
</div>
</div>
</div>
<div id="selfArt">
<h3>自制综艺
<p>奇葩说></p>
<ul>
<li class="ru">中国有嘻哈</li>
<li class="ru">吃光全宇宙</li>
<li>饭饭男友粉丝独享</li>
</ul>
</h3>
<div id="showImage">
<ul>
<li class="sou"><img src="图片素材/icon15.jpg"/></li>
<li class="tab" class="sv1" ><a href="#"><input type="button" name="" value="奇葩说4" class="button"/></a><a href="#">婚礼咬着牙尬聊！臧鸿飞变美发店一哥</a>
</li>
</ul>
<ul>
<li class="sou"><img src="图片素材/icon16.jpg"/></li>
<li class="tab" class="sv1"><a href="#"><input type="button" name="" value="姐姐好饿2" class="button"/></a><a href="#">抢先看：S姐妹厨艺比拼 汪小菲成裁判</a>
</li>
</ul>
<ul>
<li class="sou"><img src="图片素材/icon17.jpg"/></li>
<li class="tab" class="sv1"><a href="#"><input type="button" name="" value="中国有嘻哈" class="button"/></a><a href="#">6月24日每周六燥动声势！吴亦凡等你来战</a>
</li>
</ul>
<ul>
<li class="sou"><img src="图片素材/icon18.jpg"/></li>
<li class="tab" class="sv1"><a href="#"><input type="button" name="" value="吃光全宇宙" class="button"/></a><a href="#">
棒呆！陈瑶学做G20国宴菜</a>
</li>
</ul>
<ul>
<li class="sou"><img src="图片素材/icon19.jpg"/></li>
<li class="tab" class="sv1" id="sv"><a href="#"><input type="button" name="" value="爱笑会议室" class="button"/></a><a href="#">经典回顾：偶像包袱碎一地 陈伟霆被整惨</a>
</li>
</ul>
<ul>
<li class="sou"><img src="图片素材/icon20.jpg"/></li>
<li class="tab" class="sv1"><a href="#"><input type="button" name="" value="饭饭男友" class="button"/></a><a href="#">进口小哥哥迪玛希挑花眼霸气表白</a>
</li>
</ul>
<ul>
<li class="sou"><img src="图片素材/icon21.jpg"/></li>
<li class="tab" class="sv1"><a href="#"><input type="button" name="" value="发布会" class="button"/></a><a href="#">抢先看：张绍刚评谢娜小S不如何洁</a>
</li>
</ul>
</div>
</div>
<div id="speak">
<h3>脱口秀
<p>更多></p>
<p id="re">智在说</p>
</h3>
<div id="jum">
<ul>
<li><img src="图片素材/icon22.gif"/></li>
<li class="tab" class="txt1">
<h4><a href="#">笑霸来了</a></h4>
<p><a href="#">追风者！怎么大风越狠我心越荡</a></p>
</li>
</ul>
<ul>
<li><img src="图片素材/icon23.jpg"/></li>
<li class="tab" class="txt1">
<h4><a href="#">财经郎眼</a></h4>
<p><a href="#">苹果封杀微信打赏的真正原因</a></p>
</li>
</ul>
<ul>
<li><img src="图片素材/icon24.jpg"/></li>
<li class="tab" class="txt1">
<h4><a href="#">明星大吐槽</a></h4>
<p><a href="#">张一山“吸毒”反成就黄景瑜</a></p>
</li>
</ul>
<ul>
<li><img src="图片素材/icon25.jpg"/></li>
<li class="tab" class="txt1">
<h4><a href="#">翻翻翻你牌</a></h4>
<p><a href="#">吴倩神还原《择天记》落落撒娇</a></p>
</li>
</ul>
<ul>
<li><img src="图片素材/icon26.jpg"/></li>
<li class="tab" class="txt1">
<h4><a href="#">添码流星拳</a></h4>
<p><a href="#">张曼玉玩摇滚 周杰伦成LOL大神</a></p>
</li>
</ul>
<ul>
<li><img src="图片素材/icon27.jpg"/></li>
<li class="tab" class="txt1">
<h4><a href="#">耐撕大片</a></h4>
<p><a href="#">周冬雨舔脸张孝全秀撩汉技能</a></p>
</li>
</ul>
<ul>
<li><img src="图片素材/icon28.jpg"/></li>
<li class="tab" class="txt1">
<h4><a href="#">非正式会谈</a></h4>
<p><a href="#">澳洲辣眼吉祥物竟可保出行平安</a></p>
</li>
</ul>
</div>
</div>
<!---->
<div id="goto"><img src="图片素材/pay1.jpg"/></div>
<div id="happy">
<h2>娱乐
<p>更多></p>
<ul>
<li id="jar"> 早班机</li>
<li>娱乐猛回头</li>
<li>七分七秒</li>
<li>帕帕帮</li>
<li>泡菜帮</li>
<li>音乐大抖腿</li>
</ul>
</h2>
<div id="left">
<img src="图片素材/icon29.jpg"/>
<div class="tab" id="description">
<h3><a href="#"> 早班机：奶茶妹妹成富人榜最年轻富豪</a></h3>
<p><a href="#">最近，《新财富》杂志公布了2017年500富人榜，最引人瞩目的就是...</a></p>
</div>
</div>
<div id="right">
<ul>
<li><img src="图片素材/icon30.jpg"/></li>
<li class="tab" class="txt2"><a href="#">迷弟：迪玛希自曝是机甲迷 祝新片票房大卖</a></li>
</ul>
<ul>
<li><img src="图片素材/icon32.jpg"/></li>
<li class="tab" class="txt2"><a href="#">亲密：小贝长子被曝姐弟恋 与女友伦敦约会举止亲昵</a></li>
</ul>
<ul>
<li><img src="图片素材/icon34.jpg"/></li>
<li class="tab" class="txt2"><a href="#">搞怪：舒淇实力模仿狗狗 吐舌卖萌素颜依旧美丽</a></li>
</ul>
<ul>
<li><img src="图片素材/icon36.jpg"/></li>
<li class="tab" class="txt2"><a href="#">扎心：长生果化身“委屈果” 鹿晗娜扎甜蜜互动</a></li>
</ul>
<ul>
<li><img src="图片素材/icon38.jpg"/></li>
<li class="tab" class="txt2"><a href="#">灵感：《七分七秒》彭浩翔 称：鬼点子源于日常观察</a></li>
</ul>
<ul>
<li><img src="图片素材/icon31.jpg"/></li>
<li class="tab" class="txt2"><a href="#">神似：黄轩蜡像萌帅满点 期待与Baby合作</a></li>
</ul>
<ul>
<li><img src="图片素材/icon33.jpg"/></li>
<li class="tab" class="txt2"><a href="#">幸福：王雷报喜李小萌顺利产子 母子平安</a></li>
</ul>
<ul>
<li><img src="图片素材/icon35.jpg"/></li>
<li class="tab" class="txt2"><a href="#">迷弟：安吉是赵丽颖小粉丝 看她的戏看到上瘾</a></li>
</ul>
<ul>
<li><img src="图片素材/icon37.jpg"/></li>
<li class="tab" class="txt2"><a href="#">花絮：《废柴兄弟5》将播 泰式大保健之啃腿"美人鱼"</a></li>
</ul>
<ul>
<li><img src="图片素材/icon39.jpg"/></li>
<li class="tab" class="txt2"><a href="#">热议：崔雪莉真空吊带出游 性感又不失甜美</a></li>
</ul>
</div>
</div>
<div id="like">
<h2>猜你喜欢
<p>更多></p>
<ul>
<li id="times">我的播放记录</li>
<li>我的订阅</li>
<li>我的收藏</li>
<li>我的上传</li>
</ul>
</h2>
<div id="video">
<ul>
<li><img src="图片素材/icon40.jpg"/></li>
<li class="tab">
<h4><a href="#">超崩溃生活</a></h4>
<p><a href="#">当小偷躲在你家你该做什么</a></p>
</li>
</ul>
<ul>
<li><img src="图片素材/icon42.jpg"/></li>
<li class="tab">
<h4><a href="#">外科风云</a></h4>
<p><a href="#">靳东揭秘医疗内幕</a></p>
</li>
</ul>
<ul>
<li><img src="图片素材/icon44.jpg"/></li>
<li class="tab">
<h4 id="yar"><a href="#">特朗普解职联邦调查局长科米</a></h4>
</li>
</ul>
<ul>
<li><img src="图片素材/icon46.jpg"/></li>
<li class="tab">
<h4><a href="#">猛料精选</a></h4>
<p><a href="#">一女与野人竟生下半兽人</a></p>
</li>
</ul>
<ul>
<li><img src="图片素材/icon48.jpg"/></li>
<li class="tab">
<h4><a href="#">一条狗的使命</a></h4>
<p><a href="#">忠犬八公导演催泪新作</a></p>
</li>
</ul>
<ul>
<li><img src="图片素材/icon50.jpg"/></li>
<li class="tab">
<h4><a href="#">【飞碟说】第二季</a></h4>
<p><a href="#">有一种痛叫不会说方言</a></p>
</li>
</ul>
<ul>
<li><img src="图片素材/icon52.jpg"/></li>
<li class="tab">
<h4><a href="#">择天记</a></h4>
<p><a href="#">鹿晗演绎逆天改命</a></p>
</li>
</ul>
<ul id="sec">
<li><img src="图片素材/icon41.jpg"/></li>
<li class="tab">
<h4><a href="#">最高法明确个人信息范围</a></h4>
</li>
</ul>
<ul>
<li><img src="图片素材/icon43.jpg"/></li>
<li class="tab">
<h4><a href="#">欢乐囧图精选集</a></h4>
<p><a href="#">妹子演示连体裤的尴尬脱法</a></p>
</li>
</ul>
<ul>
<li><img src="图片素材/icon45.jpg"/></li>
<li class="tab">
<h4><a href="#">为爱担当</a></h4>
<p><a href="#">广东VS福建育儿决战</a></p>
</li>
</ul>
<ul>
<li><img src="图片素材/icon47.jpg"/></li>
<li class="tab">
<h4><a href="#">逼你说 第四季</a></h4>
<p><a href="#">美女出门旅行带几条内内</a></p>
</li>
</ul>
<ul>
<li><img src="图片素材/icon49.jpg"/></li>
<li class="tab">
<h4><a href="#">继承人</a></h4>
<p><a href="#">刘恺威蒋欣CP甜蜜撒糖</a></p>
</li>
</ul>
<ul>
<li><img src="图片素材/icon51.jpg"/></li>
<li class="tab">
<h4><a href="#">特朗普正考虑增兵阿富汗</a></h4>
</li>
</ul>
<ul>
<a href="#"><li id="cek"><h4>进入个人中心 ></h4></li></a>
</ul>
</div>
</div>
<div id="iqiyi">
<h2> 号
<p>更多></p>
</h2>
<div id="video2">
<ul>
<li><img src="图片素材/icon53.jpg"/></li>
<li class="tab">
<h4><a href="#">兔小贝十万个为什么</a></h4>
<p><a href="#">兔小贝儿童乐园</a></p>
</li>
</ul>
<ul>
<li><img src="图片素材/icon54.jpg"/></li>
<li class="tab">
<h4><a href="#">2分钟揭秘韩国新总统：...</a></h4>
<p><a href="#">新京报动新闻</a></p>
</li>
</ul>
<ul>
<li><img src="图片素材/icon55.jpg"/></li>
<li class="tab">
<h4><a href="#">惊！传说坟头蹦迪惊现江湖</a></h4>
<p><a href="#">基腐社</a></p>
</li>
</ul>
<ul>
<li><img src="图片素材/icon56.jpg"/></li>
<li class="tab">
<h4><a href="#">【飞碟一分钟】上司拉着...</a></h4>
<p><a href="#">飞碟说</a></p>
</li>
</ul>
<ul>
<li><img src="图片素材/icon57.jpg"/></li>
<li class="tab">
<h4><a href="#">好久没见过这么纯粹的爱...</a></h4>
<p><a href="#">每日一囧V</a></p>
</li>
</ul>
<ul>
<li><img src="图片素材/icon58.jpg"/></li>
<li class="tab">
<h4><a href="#">让人吃到生气的鸡？！★...</a></h4>
<p><a href="#">XFun吃货俱乐部官号</a></p>
</li>
</ul>
<ul>
<li><img src="图片素材/icon59.jpg"/></li>
<li class="tab">
<h4><a href="#">高兴就好精选集：二货...</a></h4>
<p><a href="#">比特工作室</a></p>
</li>
</ul>
</div>
</div>
<div id="payShow">
<div id="iconT">推广广告</div>
<div id="showIcon">
<ul id="fir">
<li><img src="图片素材/icon60.jpg"/></li>
<li class="logo"><img src="图片素材/icon61.jpg"/></li>
</ul>
<ul>
<li><img src="图片素材/icon62.jpg"/></li>
<li class="logo"><img src="图片素材/icon63.jpg"/></li>
</ul>
<ul>
<li><img src="图片素材/icon64.jpg"/></li>
<li class="logo"><img src="图片素材/icon65.jpg"/></li>
</ul>
<ul>
<li><img src="图片素材/icon66.jpg"/></li>
<li class="logo"><img src="图片素材/icon67.jpg"/></li>
</ul>
<ul class="logo">
<li><img src="图片素材/icon68.jpg"/></li>
<li><img src="图片素材/icon69.jpg"/></li>
</ul>
<ul class="logo">
<li><img src="图片素材/icon70.jpg"/></li>
<li><img src="图片素材/icon71.jpg"/></li>
</ul>
<ul class="logo">
<li><img src="图片素材/icon72.jpg"/></li>
<li><img src="图片素材/icon74.jpg"/></li>
</ul>
</div>
</div>
<div id="movieFull">
<div id="movie">
<h2>电影
<p>更多></p>
<ul>
<li> 爱电影</li>
<li>网络大电影</li>
<li id="jav">VIP会员</li>
<li id="rar">2017上半年过亿电影排行榜</li>
</ul>
</h2>
<div id="showImg1">
<ul>
<li class="image1"><img src="图片素材/icon75.gif"/></li>
<li class="tab" class="txt3">
<h4><a href="#">一条狗的使命</a></h4>
<p><a href="#">忠犬八公导演催泪新作</a></p>
</li>
</ul>
<ul>
<li class="image1"><img src="图片素材/icon76.jpg"/></li>
<li class="tab" class="txt3">
<h4><a href="#">仙医神厨3</a></h4>
<p><a href="#">各路英雄抗日展身手</a></p>
</li>
</ul>
<ul>
<li class="image1"><img src="图片素材/icon77.jpg"/></li>
<li class="tab" class="txt3">
<h4><a href="#">隐藏人物</a></h4>
<p><a href="#">第89届奥斯卡三项提名</a></p>
</li>
</ul>
<ul>
<li class="image1"><img src="图片素材/icon78.jpg"/></li>
<li class="tab" class="txt3">
<h4><a href="#">为爱担当</a></h4>
<p><a href="#">呆萌阿牛变身超能奶爸</a></p>
</li>
</ul>
<ul>
<li class="image1"><img src="图片素材/icon79.jpg"/></li>
<li class="tab" class="txt3">
<h4><a href="#">生化危机：终章</a></h4>
<p><a href="#">双枪女战神末日斗丧尸</a></p>
</li>
</ul>
<ul class="sup">
<li class="image1"><img src="图片素材/icon80.jpg"/></li>
<li class="tab" class="txt3">
<h4><a href="#">刺客信条</a></h4>
<p><a href="#">法鲨半裸出镜穿梭古今</a></p>
</li>
</ul>
<ul>
<li class="image1"><img src="图片素材/icon81.jpg"/></li>
<li class="tab" class="txt3">
<h4><a href="#">天才少女</a></h4>
<p><a href="#">美国队长的萝莉养成记</a></p>
</li>
</ul>
<ul>
<li class="image1"><img src="图片素材/icon82.jpg"/></li>
<li class="tab" class="txt3">
<h4><a href="#">周冬雨推倒张孝全</a></h4>
<p><a href="#">异食癖活吞指甲刀</a></p>
</li>
</ul>
<ul>
<li class="image1"><img src="图片素材/icon83.jpg"/></li>
<li class="tab" class="txt3">
<h4><a href="#">王牌逗王牌</a></h4>
<p><a href="#">华仔黄晓明夺宝救世界</a></p>
</li>
</ul>
<ul>
<li class="image1"><img src="图片素材/icon84.jpg"/></li>
<li class="tab" class="txt3">
<h4><a href="#">你好，疯子</a></h4>
<p><a href="#">万茜分饰7人疯相毕露</a></p>
</li>
</ul>
<ul>
<li class="image1"><img src="图片素材/icon85.jpg"/></li>
<li class="tab" class="txt3">
<h4><a href="#">绝地逃亡（国语）</a></h4>
<p><a href="#">成龙爆笑动作喜剧新作</a></p>
</li>
</ul>
<ul class="sup">
<li class="image1"><img src="图片素材/icon86.jpg"/></li>
<li class="tab" class="txt3">
<h4><a href="#">摆渡人</a></h4>
<p><a href="#">鹿晗雨中开唱实力撩妹</a></p>
</li>
</ul>
</div>
</div>
<div id="showMovie">
<h2>电影榜
<p>更多></p>
</h2>
<ul class="tab">
<li id="png1"><a href="#"><p class="info1">1</p></a><a href="#">一条狗的使命</a></li>
<li id="png2"><a href="#"><p class="info1">2</p></a><a href="#">王牌逗王牌</a></li>
<li id="png3"><a href="#"><p class="info1">3</p></a><a href="#">银河护卫队</a></li>
<li id="png4"><a href="#"><p>4</p></a><a href="#">仙医神厨3</a></li>
<li id="png5"><a href="#"><p>5</p></a><a href="#">西游伏妖篇</a></li>
<li id="png6"><a href="#"><p>6</p></a><a href="#">降龙大师</a></li>
<li id="png7"><a href="#"><p>7</p></a><a href="#">刺客信条</a></li>
<li id="png8"><a href="#"><p>8</p></a><a href="#">恶魔总裁的契约情人</a></li>
<li id="png9"><a href="#"><p>9</p></a><a href="#">生化危机：终章</a></li>
</ul>
<div id="showImg2">
<img src="图片素材/icon87.jpg"/>
<h4><a href="#">大卫贝肯之倒霉特工熊</a></h4>
<p><a href="#">贱萌贝肯对决神秘组织</a></p>
</div>
</div>
</div>
<div id="interMovie">
<div id="left">
<h2>网络电影
<p>更多></p>
<ul>
<li>独播网大推荐</li>
<li>我要合作</li>
</ul>
</h2>
<div id="showImg3">
<ul>
<li class="image2"><img src="图片素材/icon88.jpg"/></li>
<li class="tab" class="txt4"><a href="#">指定被害者</a></li>
</ul>
<ul>
<li class="image2"><img src="图片素材/icon89.jpg"/></li>
<li class="tab" class="txt4"><a href="#">我在清朝当密探</a></li>
</ul>
<ul id="sub1">
<li class="image2"><img src="图片素材/icon90.jpg"/></li>
<li class="tab" class="txt4"><a href="#">恶魔总裁的契约情人</a></li>
</ul>
</div>
</div>
<div id="right">
<h2>片花
<p>更多></p>
<p id="con1">《美女与野兽》最新片段</p>
</h2>
<div id="showImg4">
<ul>
<li class="image3"><img src="图片素材/icon91.jpg"</li>
<li class="tab" class="txt5"><a href="#">《夏天19岁的肖像》爱情...</a></li>
</ul>
<ul>
<li class="image3"><img src="图片素材/icon92.jpg"</li>
<li class="tab" class="txt5"><a href="#">《异星觉醒》绝杀断背男</a></li>
</ul>
<ul>
<li class="image3"><img src="图片素材/icon91.jpg"</li>
<li class="tab" id="jia"><a href="#">《麻烦家族》路演口碑</a></li>
</ul>
<ul id="su1">
<li class="image3"><img src="图片素材/icon91.jpg"</li>
<li class="tab" class="txt5"><a href="#">《亚瑟王：斗兽争霸》最...</a></li>
</ul>
</div>
</div>
</div>
<div id="payShow2"><img src="图片素材/pay2.jpg"/></div>
<div id="soapShow">
<div id="left">
<h2>电视剧
<p>更多></p>
<ul>
<li>内地</li>
<li>美剧</li>
<li class="sufo">自制剧</li>
<li class="sufo">网络剧</li>
<li class="sufo">神剧亮了</li>
</ul>
</h2>
<div id="soap">
<ul class="ru2">
<li class="pto1"><img src="图片素材/icon92.gif"/></li>
<li class="tab"><a href="#">外科风云</a></li>
</ul>
<ul class="ru2">
<li class="pto1"><img src="图片素材/icon93.jpg"/></li>
<li class="tab"><a href="#">卧底2</a></li>
</ul>
<ul class="ru2">
<li class="pto1"><img src="图片素材/icon94.jpg"/></li>
<li class="tab"><a href="#">秘果</a></li>
</ul>
<ul class="ru2">
<li class="pto1"><img src="图片素材/icon95.jpg"/></li>
<li class="tab"><a href="#">云巅之上第2季</a></li>
</ul>
<ul class="ru2">
<li class="pto1"><img src="图片素材/icon96.jpg"/></li>
<li class="tab" ><a href="#">花间提壶方大厨第1季</a></li>
</ul>
<ul id="juk">
<li class="pto1"><img src="图片素材/icon102.jpg"/></li>
<li class="tab"><a href="#">假凤虚凰</a></li>
</ul>
<ul class="ru2">
<li class="pto1"><img src="图片素材/icon97.jpg"/></li>
<li class="tab"><a href="#">思美人</a></li>
</ul>
<ul class="ru2">
<li class="pto1"><img src="图片素材/icon98.jpg"/></li>
<li class="tab"><a href="#">择天记</a></li>
</ul>
<ul class="ru2">
<li class="pto1"><img src="图片素材/icon99.jpg"/></li>
<li class="tab"><a href="#">人民的名义</a></li>
</ul>
<ul class="ru2">
<li class="pto1"><img src="图片素材/icon100.jpg"/></li>
<li class="tab"><a href="#">继承人</a></li>
</ul>
<ul class="ru2">
<li class="pto1"><img src="图片素材/icon101.jpg"/></li>
<li class="tab"><a href="#">御姐归来</a></li>
</ul>
<ul>
<li class="pto1"><img src="图片素材/icon103.jpg"/></li>
<li class="tab"><a href="#">赛小花的远大前程</a></li>
</ul>
</div>
</div>
<div id="right">
<h2>电视剧榜
<p>更多></p>
</h2>
<ul>
<li><a href="#"><p class="green">1</p></a><a href="#">人民的名</a>义</li>
<li><a href="#"><p class="green">2</p></a><a href="#">外科风云</a></li>
<li><a href="#"><p class="green">3</p></a><a href="#">择天记</a></li>
<li><a href="#"><p>4</p></a><a href="#">继承人</a></li>
<li><a href="#"><p>5</p></a><a href="#">思美人</a></li>
<li><a href="#"><p>6</p></a><a href="#">铁血将军</a></li>
<li><a href="#"><p>7</p></a><a href="#">御姐归来</a></li>
<li><a href="#"><p>8</p></a><a href="#">云巅之上第2季</a></li>
</ul>
<div id="image4">
<ul>
<li><img src="图片素材/icon104.jpg"/></li>
<li class="tab" id="intro"><a href="#">神剧亮了：拿错剧本的男主</a></li>
</ul>
</div>
</div>
</div>
<div id="payShow3">
<h3>推广广告</h3>
<div id="play1">
<ul id="woty1">
<li><img src="图片素材/icon105.jpg"/></li>
<li><img src="图片素材/icon106.jpg"/></li>
</ul>
<ul>
<li><img src="图片素材/icon107.jpg"/></li>
<li><img src="图片素材/icon108.jpg"/></li>
</ul>
<ul>
<li><img src="图片素材/icon109.jpg"/></li>
<li><img src="图片素材/icon110.jpg"/></li>
</ul>
<ul>
<li><img src="图片素材/icon111.jpg"/></li>
<li><img src="图片素材/icon112.jpg"/></li>
</ul>
<ul>
<li><img src="图片素材/icon113.jpg"/></li>
<li><img src="图片素材/icon114.jpg"/></li>
</ul>
<ul>
<li><img src="图片素材/icon115.jpg"/></li>
<li><img src="图片素材/icon116.jpg"/></li>
</ul>
<ul>
<li><img src="图片素材/icon117.jpg"/></li>
<li><img src="图片素材/icon118.jpg"/></li>
</ul>
</div>
</div>
<div id="cartoon">
<div id="left">
<h2>动漫
<p>更多></p>
<ul>
<li><a href="#">真人特摄</a></li>
<li><a href="#">动画电影</a></li>
</ul>
</h2>
<div id="showImg4">
<ul id="moveL">
<li class="zero"><img src="图片素材/icon119.jpg"/></li>
<li class="tab" id="fun"><a href="#">熊出没 奇幻空间</a></li>
</ul>
<div id="moveR">
<ul>
<li class="juto"><img src="图片素材/icon120.jpg"/></li>
<li class="tab" class="sth"><a href="#">博人传 火影忍者新时代</a></li>
</ul>
<ul id="move1">
<li class="juto"><img src="图片素材/icon124.jpg"/></li>
<li class="tab" class="sth"><a href="#">航海王</a></li>
</ul>
</div>
</div>
</div>
<div id="julic">
<h2>儿童
<p>更多></p>
<ul>
<li><img src="图片素材/icon129.jpg"/></li>
<li><img src="图片素材/icon130.jpg"/></li>
<li><img src="图片素材/icon131.jpg"/></li>
<li><img src="图片素材/icon132.jpg"/></li>
<li><img src="图片素材/icon133.jpg"/></li>
</ul>
</h2>
<div id="showImg5">
<ul>
<li class="sofo"><img src="图片素材/icon121.jpg"/></li>
<li class="tab"><a href="#">汽车城之友爱互助篇</a></li>
</ul>
<ul>
<li class="sofo"><img src="图片素材/icon122.jpg"/></li>
<li class="tab"><a href="#">超级飞侠 第3季</a></li>
</ul>
<ul>
<li class="sofo"><img src="图片素材/icon125.jpg"/></li>
<li class="tab"><a href="#">汪汪队立大功 第2季</a></li>
</ul>
<ul>
<li class="sofo"><img src="图片素材/icon126.jpg"/></li>
<li class="tab"><a href="#">粉红猪小妹全集</a></li>
</ul>
</div>
</div>
<div id="sublic">
<h2>教育
<p>更多></p>
<ul>
<li>巧虎</li>
<li id="doc">广场舞</li>
<li>国考</li>
<li>考研</li>
</ul>
</h2>
<div id="showImg6">
<ul>
<li class="sofo"><img src="图片素材/icon123.jpg"/></li>
<li class="tab" class="jolin"><a href="#">亲宝儿歌大全</a></li>
</ul>
<ul>
<li class="sofo"><img src="图片素材/icon134.jpg"/></li>
<li class="tab" class="jolin"><a href="#">小老虎丹尼尔</a></li>
</ul>
<ul class="join">
<li class="sofo"><img src="图片素材/icon127.jpg"/></li>
<li class="tab" class="jolin"><a href="#">哈利学拼音</a></li>
</ul>
<ul class="join">
<li class="sofo"><img src="图片素材/icon135.jpg"/></li>
<li class="tab" class="jolin"><a href="#">张庆祥讲传习录</a></li>
</ul>
</div>
</div>
</div>
<div id="sports">
<div id="sport">
<h2>体育
<p>更多></p>
<ul>
<li>足球</li>
<li>篮球</li>
<li>美网</li>
<li>昆仑决</li>
</ul>
</h2>
<div id="showImg7">
<ul>
<li class="sofo"><img src="图片素材/icon136.jpg"/></li>
<li class="tab"><a href="#">欧冠-曼朱进球尤文2-1获胜</a></li>
</ul>
<ul>
<li class="sofo"><img src="图片素材/icon137.jpg"/></li>
<li class="tab"><a href="#">亚冠-恒大2-2小组第2出线</a></li>
</ul>
<ul class="jofa1">
<li class="sofo"><img src="图片素材/icon138.jpg"/></li>
<li class="tab"><a href="#">世俱杯朱婷14分瓦基弗完胜</a></li>
</ul>
<ul class="jofa1">
<li class="sofo"><img src="图片素材/icon139.jpg"/></li>
<li class="tab"><a href="#">亚冠苏宁1-0阿德莱德</a></li>
</ul>
</div>
</div>
<div id="music">
<h2>音乐
<p>更多></p>
<ul>
<li> 音乐榜</li>
</ul>
</h2>
<div id="com">
<ul>
<li id="rau"><img src="图片素材/icon140.jpg"/></li>
<li class="tab" class="txt8"><a href="#">薛之谦 - 高尚</a></li>
</ul>
</div>
<div id="com1">
<ul>
<li class="sofo"><img src="图片素材/icon141.jpg"/></li>
<li class="tab" class="txt8"><a href="#">哈卷新单Sign Of The Times</a></li>
</ul>
<ul>
<li class="sofo"><img src="图片素材/icon142.jpg"/></li>
<li class="tab" class="txt8"><a href="#">Triple H - 365 FRESH</a></li>
</ul>
</div>
</div>
<div id="fashion">
<h2>时尚
<p>更多></p>
</h2>
<div id="feng">
<ul>
<li class="sofo"><img src="图片素材/icon150.jpg"/></li>
<li class="tab" class="ten"><a href="#">刘雯诗诗巴黎看秀组CP</a></li>
</ul>
</div>
<div id="interest">
<ul>
<li class="sofo"><img src="图片素材/icon151.jpg"/></li>
<li class="tab" class="txt9"><a href="#">超模奚梦瑶VS杜鹃转型盘点</a></li>
</ul>
<ul>
<li class="sofo"><img src="图片素材/icon152.jpg"/></li>
<li class="tab" class="txt9"><a href="#">朱丹卫衣配短裙青春俏皮</a></li>
</ul>
<ul>
<li class="sofo"><img src="图片素材/icon153.jpg"/></li>
<li class="tab" class="txt9"><a href="#">拥有精致妆容的心机tips</a></li>
</ul>
<ul>
<li class="sofo"><img src="图片素材/icon154.jpg"/></li>
<li class="tab" class="txt9"><a href="#">温婉低马尾尽显女神范儿</a></li>
</ul>
</div>
</div>
</div>
<div id="baby">
<div id="babys">
<h2>母婴
<p>更多></p>
<ul>
<li class="jort">孕期</li>
<li>早教益智</li>
<li>趣味玩具</li>
</ul>
</h2>
<div id="showImg8">
<ul>
<li class="sofo"><img src="图片素材/icon155.jpg"/></li>
<li class="tab" class="txt9"><a href="#">奇宝儿歌 童年</a></li>
</ul>
<ul>
<li class="sofo"><img src="图片素材/icon156.jpg"/></li>
<li class="tab" class="txt9"><a href="#">宝宝辅食 彩蔬蛤蜊面</a></li>
</ul>
</div>
</div>
<div id="life">
<h2>生活
<p>更多></p>
<ul>
<li>懒人季</li>
<li>悦活汇</li>
<li>食刻分享</li>
</ul>
</h2>
<div id="showImg9">
<ul>
<li class="sofo"><img src="图片素材/icon157.jpg"/></li>
<li class="tab"><a href="#">你好，荒野游侠！</a></li>
</ul>
<ul>
<li class="sofo"><img src="图片素材/icon158.jpg"/></li>
<li class="tab" class="txt9"><a href="#">微体兔菜谱 酸辣米线</a></li>
</ul>
</div>
</div>
<div id="healthy">
<h2>健康
<p>更多></p>
<ul>
<li>医疗卫生</li>
<li>养生保健</li>
<li>雀巢怡养50+</li>
</ul>
</h2>
<div id="showImg10">
<ul>
<li class="sofo"><img src="图片素材/icon159.jpg"/></li>
<li class="tab" class="jar"><a href="#">慌！男友竟拖我进卧室</a></li>
</ul>
<ul>
<li class="sofo"><img src="图片素材/icon160.jpg"/></li>
<li class="tab" class="jar"><a href="#">可乐杀精？骗谁呢！</a></li>
</ul>
<ul>
<li class="sofo"><img src="图片素材/icon161.jpg"/></li>
<li class="tab" class="jar"><a href="#">怀不上？试试暖宫助孕汤</a></li>
</ul>
</div>
</div>
</div>
<div id="science">
<div id="phisics">
<h2>科技
<p>更多></p>
<ul>
<li><a href="#">科科情报局</a></li>
<li><a href="#">极客说</a></li>
</ul>
</h2>
<div id="showImg11">
<ul>
<li class="sofo"><img src="图片素材/icon162.gif"/></li>
<li class="tab" class="txt9"><a href="#">闲蛋疼！小哥造最长自行车</a></li>
</ul>
<ul>
<li class="sofo"><img src="图片素材/icon163.jpg"/></li>
<li class="tab" class="txt9"><a href="#">锤子春季发布会全程回顾</a></li>
</ul>
</div>
</div>
<div id="car">
<h2>汽车
<p>更多></p>
<ul>
<li><a href="#">微试车</a></li>
<li><a href="#">快车道</a></li>
<li><a href="#">奇闻路事</a></li>
</ul>
</h2>
<div id="showImg12">
<ul>
<li class="sofo"><img src="图片素材/icon164.jpg"/></li>
<li class="tab" class="txt9"><a href="#">闲蛋疼！小哥造最长自行车</a></li>
</ul>
<ul>
<li class="sofo"><img src="图片素材/icon165.jpg"/></li>
<li class="tab" class="txt9"><a href="#">锤子春季发布会全程回顾</a></li>
</ul>
</div>
</div>
<div id="money">
<h2>财经
<p>更多></p>
<ul>
<li><a href="#">吴晓波频道</a></li>
<li><a href="#">天天神评论</a></li>
<li><a href="#">大头频道</a></li>
</ul>
</h2>
<div id="showImg13">
<ul>
<li class="sofo"><img src="图片素材/icon166.jpg"/></li>
<li class="tab" class="txt9"><a href="#">它是中国经济学界的良心</a></li>
</ul>
<ul>
<li class="sofo"><img src="图片素材/icon167.jpg"/></li>
<li class="tab" class="txt9"><a href="#">怒怼共享充电宝，思聪立...</a></li>
</ul>
<ul>
<li class="sofo"><img src="图片素材/icon168.jpg"/></li>
<li class="tab" class="txt9"><a href="#">小黄损坏率高 坏车堆成山</a></li>
</ul>
</div>
</div>
</div>
<div id="travel">
<div id="go">
<h2>旅游
<p>更多></p>
<ul>
<li><a href="#">加拿大</a></li>
<li id="jor"><a href="#">吃货</a></li>
<li id="search"><a href="#"> 旅行团</a></li>
</ul>
</h2>
<div id="showImg14">
<ul>
<li class="sofo"><img src="图片素材/icon170.jpg"/></li>
<li class="tab"><a href="#">雌雄同体的吞粪蛞蝓</a></li>
</ul>
<ul>
<li class="sofo"><img src="图片素材/icon171.jpg"/></li>
<li class="tab"><a href="#">德国蟒蛇颈部按摩爽到极点</a></li>
</ul>
</div>
</div>
<div id="directory">
<h2>纪录片
<p>更多></p>
<ul>
<li><a href="#">BBC大片</a></li>
<li><a href="#">地球脉动</a></li>
</ul>
</h2>
<div id="showImg15">
<ul>
<li class="sofo"><img src="图片素材/icon172.gif"/></li>
<li class="tab"><a href="#">探索金砖国家的医疗体制</a></li>
</ul>
<ul>
<li class="sofo"><img src="图片素材/icon173.gif"/></li>
<li class="tab"><a href="#">100秒看古代为何多叛乱</a></li>
</ul>
</div>
</div>
<div id="junshi">
<h2>军事
<p>更多></p>
<ul>
<li id="sun"><a href="#">军事奇兵</a></li>
<li><a href="#">烽火议军情</a></li>
<li><a href="#">军武次位面</a></li>
</ul>
</h2>
<div id="showImg16">
<ul>
<li class="sofo"><img src="图片素材/icon174.gif"/></li>
<li class="tab"><a href="#">我军空降兵分分钟到你家</a></li>
</ul>
<ul>
<li class="sofo"><img src="图片素材/icon175.jpg"/></li>
<li class="tab"><a href="#">普京祝寿老领导就送报纸</a></li>
</ul>
<ul>
<li class="sofo"><img src="图片素材/icon176.jpg"/></li>
<li class="tab"><a href="#">集团军只是番号调整？</a></li>
</ul>
</div>
</div>
</div>
<div id="bySelf">
<div id="self">
<h2>原创
<p id="run">更多></p>
<ul>
<li class="char4"><a href="#">原创热点</a></li>
<li class="char4"><a href="#">新锐动画</a></li>
<li class="char3"><a href="#">网络剧</a></li>
<li><a href="#">狂徒</a></li>
<li class="char6"><a href="#">滚蛋吧旁白君</a></li>
<li class="char4"><a href="#">见诡十法</a></li>
</ul>
<p id="Rev"> 号认证与合作申请</p>
</h2>
<div id="bigPic">
<ul>
<li class="gofo"><img src="图片素材/icon177.jpg"/></li>
<li class="tab">
<h3>《夜宿》女友捉奸男友却沦为小三</h3>
<p>刘一因为老同学出国拜托他看房，引来了几个女房客，发生了一系列...</p>
</li>
</ul>
</div>
<div id="showImg17">
<ul>
<li class="gofo"><img src="图片素材/icon178.jpg"/></li>
<li class="tab" class="txt9">
<h4>12星座谁一恋爱就黏人？</h4>
<p>星座小姐姐</p>
</li>
</ul>
<ul>
<li class="gofo"><img src="图片素材/icon179.jpg"/></li>
<li class="tab" class="txt9">
<h4>女主逃跑未遂遭霸总囚禁</h4>
<p>蓝蓝蓝蓝影视传媒</p>
</li>
</ul>
<ul>
<li class="gofo"><img src="图片素材/icon180.jpg"/></li>
<li class="tab" class="txt9">
<h4>超爆笑的7种付账“大招”</h4>
<p>这群人TGOP</p>
</li>
</ul>
<ul>
<li class="gofo"><img src="图片素材/icon181.jpg"/></li>
<li class="tab" class="txt9">
<h4>暗恋是关于青春的秘密</h4>
<p>新片场</p>
</li>
</ul>
<ul>
<li class="gofo"><img src="图片素材/icon182.jpg"/></li>
<li class="tab" class="txt9">
<h4> 生死瞬间之神的力量</h4>
<p>这群人TGOP</p>
</li>
</ul>
<ul>
<li class="gofo"><img src="图片素材/icon183.jpg"/></li>
<li class="tab" class="txt9">
<h4>有一种痛叫不会说方言</h4>
<p>飞碟说</p>
</li>
</ul>
<ul>
<li class="gofo"><img src="图片素材/icon184.jpg"/></li>
<li class="tab" class="txt9">
<h4>一场斗殴引发的浪漫</h4>
<p>情书馆长</p>
</li>
</ul>
<ul>
<li class="gofo"><img src="图片素材/icon185.jpg"/></li>
<li class="tab" class="txt9">
<h4>村民的名义</h4>
<p>全是广告啊</p>
</li>
</ul>
</div>
</div>
<div id="writer">
<h2>原创达人
<p>更多></p>
</h2>
<div id="pai">
<dl>
<dt><img src="图片素材/icon186.jpg"/></dt>
<dd>
<p class="tit">酷瞧新媒体</p>
<p class="peo">70,624人订阅</p>
<p><img src="图片素材/icon190.png"/></p>
</dd>
</dl>
<dl id="one">
<dt><img src="图片素材/icon187.jpg"/></dt>
<dd>
<p class="tit">胡桃夹子工作</p>
<p class="peo">24,009人订阅</p>
<p><img src="图片素材/icon190.png"/></p>
</dd>
</dl>
<dl>
<dt><img src="图片素材/icon188.jpg"/></dt>
<dd>
<p class="tit">星马映像工作</p>
<p class="peo">99,612人订阅</p>
<p><img src="图片素材/icon190.png"/></p>
</dd>
</dl>
<dl>
<dt><img src="图片素材/icon189.jpg"/></dt>
<dd>
<p class="tit">金刚时代</p>
<p class="peo">3,857人订阅</p>
<p><img src="图片素材/icon190.png"/></p>
</dd>
</dl>
</div>
</div>
</div>
<div id="laugh">
<div id="laughing">
<h2>搞笑
<p>更多></p>
<ul>
<li>欢乐精选</li>
<li>雷人囧事</li>
<li>奇闻趣事</li>
</ul>
</h2>
<div id="showImg18">
<ul>
<li class="gofo"><img src="图片素材/icon193.jpg"/></li>
<li class="tab" class="txt10">二货化身泳池狂魔虐女友</li>
</ul>
<ul>
<li class="gofo"><img src="图片素材/icon194.jpg"/></li>
<li class="tab" class="txt10">英雄联盟版《忽然掉线》...</li>
</ul>
<ul>
<li class="gofo"><img src="图片素材/icon195.jpg"/></li>
<li class="tab" class="txt10">惊！传说坟头蹦迪惊现江湖</li>
</ul>
</div>
</div>
<div id="takePhoto">
<h2>拍客
<p>更多></p>
<ul>
<li id="junNum">加入拍客领万元拍摄设备</li>
<li>每日必看</li>
<li>监控纪实</li>
<li>行车记录</li>
<li>自拍网红</li>
</ul>
</h2>
<div id="showImg19">
<ul>
<li class="gofo"><img src="图片素材/icon196.jpg"/></li>
<li class="tab" class="txt10">黑天鹅被人偷回家炖着吃了</li>
</ul>
<ul>
<li class="gofo"><img src="图片素材/icon197.gif"/></li>
<li class="tab" class="txt10">奶爸们用小宝宝玩B-Box</li>
</ul>
<ul>
<li class="gofo"><img src="图片素材/icon198.jpg"/></li>
<li class="tab" class="txt10">性感美女挑战与鲨共舞被咬</li>
</ul>
<ul>
<li class="gofo"><img src="图片素材/icon199.jpg"/></li>
<li class="tab" class="txt10">女兵跳伞撞高压线瞬间爆炸</li>
</ul>
</div>
</div>
</div>
<div id="video3">
<div id="tape">
<h2>游戏视频
<p>更多></p>
<ul>
<li id="num1">我的世界中国版首测活动</li>
<li> 游报</li>
</ul>
</h2>
<div id="showImg20">
<ul>
<li class="gofo"><img src="图片素材/icon200.jpg"/></li>
<li class="tab" class="txt10">
<h4>VR成就岛国风俗店新姿势</h4>
<p> 游报</p>
</li>
</ul>
<ul>
<li class="gofo"><img src="图片素材/icon201.jpg"/></li>
<li class="tab" class="txt10">
<h4>【鳄小星】王者荣耀达摩</h4>
<p>YAN鳄小星</p>
</li>
</ul>
<ul>
<li class="gofo"><img src="图片素材/icon202.jpg"/></li>
<li class="tab" class="txt10">
<h4>【小龙】我的世界恐怖血人</h4>
<p>小龙解说520</p>
</li>
</ul>
</div>
</div>
<div id="showFace">
<h2>奇秀
<p id="infro">零距离互动></p>
<ul>
<li>奇秀新星</li>
<li>美女</li>
</ul>
</h2>
<div id="showImg21">
<ul>
<li class="gofo"><img src="图片素材/icon203.jpg"/></li>
<li class="tab" class="txt10">
<h4>Mc陌路：哐当传媒！</h4>
<p>965人在线观看</p>
</li>
</ul>
<ul>
<li class="gofo"><img src="图片素材/icon204.jpg"/></li>
<li class="tab" class="txt10">
<h4>成成关注本人18号庆典</h4>
<p>1155人在线观看</p>
</li>
</ul>
<ul>
<li class="gofo"><img src="图片素材/icon205.jpg"/></li>
<li class="tab" class="txt10">
<h4>柱子-八卦气人主播</h4>
<p>1385人在线观看</p>
</li>
</ul>
<ul>
<li class="gofo"><img src="图片素材/icon206.jpg"/></li>
<li class="tab" class="txt10">
<h4>旋子丶求百元榜</h4>
<p>1087人在线观看</p>
</li>
</ul>
</div>
</div>
</div>
<div id="document">
<ul>
<li><img src="图片素材/icon207.jpg"/></li>
<li class="gue"> 公益寻亲平台</li>
<li class="opacity"></li>
<li class="diven"><img src="图片素材/bh1.PNG"/></li>
</ul>
<ul>
<li><img src="图片素材/icon208.jpg"/></li>
<li class="gue">超崩溃生活</li>
<li class="opacity"></li>
<li class="diven"><img src="图片素材/bh3.PNG"/></li>
</ul>
<ul>
<li><img src="图片素材/icon209.jpg"/></li>
<li class="gue">未曾听过的母亲声音</li>
<li class="opacity"></li>
<li class="diven"><img src="图片素材/bh4.PNG"/></li>
</ul>
<ul>
<li><img src="图片素材/icon210.jpg"/></li>
<li class="gue">热血传奇高清重制页游</li>
<li class="opacity"></li>
<li class="diven"><img src="图片素材/bh9.PNG"/></li>
</ul>
<ul>
<li><img src="图片素材/icon211.png"/></li>
<li class="gue"> 应用商店</li>
<li class="opacity"></li>
<li class="diven"><img src="图片素材/bh6.PNG"/></li>
</ul>
<ul>
<li><img src="图片素材/icon212.jpg"/></li>
<li class="dave"><img src="图片素材/bh7.PNG"/></li>
</ul>
<ul>
<li><img src="图片素材/icon213.jpg"/></li>
<li class="gue">晓松奇谈</li>
<li class="opacity"></li>
<li class="diven"><img src="图片素材/bh8.PNG"/></li>
</ul>
</div>
<div id="partEnd">
<div id="partner">
<h1>合作伙伴
<p>更多></p>
</h1>
<div id="friend">
<ul>
<li>万达电影网</li>
<li>华谊兄弟</li>
<li>星美</li>
<li>光线影业</li>
<li>电影网</li>
<li>华策影视</li>
<li>百度视频</li>
<li>百度百科</li>
<li>微博视频台</li>
<li>百度贴吧</li>
<li>央广网</li>
<li>hao123</li>
<li> 天猫店</li>
</ul>
</div>
</div>
<div id="query">
<h1> 动态
<p>更多></p>
</h1>
<div id="act">
<ul>
<li>《中国有嘻哈》发布会举行</li>
<li> 与Netflix达成内容授权合作</li>
<li>尖叫之夜—全Live交互演唱会发布</li>
<li>移动APP格局： 超过QQ</li>
<li> 独家携手国际儿童救助协会</li>
<li> 发布首款4K VR一体机</li>
</ul>
</div>
</div>
</div>
<div id="endNo1">
<ul>
<li>京网文[2015]0652-282号-1</li>
<li><img src="图片素材/icon214.png"/>中国互联网诚信联盟</li>
<li>出版物经营许可证</li>
<li class="long">信息网络传播视听节目许可证 0110544号</li>
<li class="long">广播电视节目制作经营许可证 (京)字第1938号</li>
</ul>
<ul id="tuv">
<li>京ICP证110636号</li>
<li><img src="图片素材/icon215.png"/>经营性网站备案信息</li>
<li>京公网安备 11010802010263号</li>
<li class="long">增值电信业务经营许可证 B2-20120273</li>
<li class="long">互联网药品信息服务资格证书 (京)-经营性-2013-0012</li>
<li class="lon">互联网医疗保健信息服务审核同意书 京卫计网审[2015]第0627号</li>
</ul>
</div>
<div id="endNo2">
<div id="hau">
<ul>
<li>公司介绍</li>
<li>新闻动态</li>
<li>联系方式</li>
<li>招聘英才</li>
<li class="charSix"> 实验室</li>
<li>开放平台</li>
<li class="charSix"> 号认证</li>
<li class="charSev"> 作者中心</li>
<li class="charFar">安全应急响应中心</li>
<li>帮助中心</li>
<li id="theEnd">侵权投诉</li>
</ul>
</div>
<div id="hou">
<ul>
<li class="riv"><img src="图片素材/icon216.png"/>中国互联网举报中心</li>
<li class="cuf">网络举报APP下载</li>
<li>网上有害信息举报专区</li>
<li>网上暴恐有害信息举报</li>
<li class="groove">违法和不良信息举报电话：400-923-7171</li>
<li class="groove">举报邮箱：jubao365@qiyi.com</li>
</ul>
</div>
<div id="finally">
反盗版和反盗链权利声明 Copyright © 2017 All Rights Reserved
</div>
</div>
</div>
</body>
</html>
这篇关于前端静态开发案例-基于H5C3开发的仿照视频网站的前端静态页面-1 静态页面部分的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
