先看看部分页面效果吧
这个项目我个人觉得还是很简单的大部分都是重复的代码
只用到了前端的HTML跟CSS技术
比较适合新手练习
不过这是第一次完完整整做的一个项目有不好的地方别喷
代码有些冗余,别喷!别喷!别喷
要是各位大佬有好的意见也是可以发在评论区我虚心接受!!!!
接下来就展示一下代码吧
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
<!-- <style>
#tb #dbbj{
width: 100%;
height: 480px;
background-image: url(./images/banner01.jpg);
}
</style> -->
</head>
<body>
<!----------------------------------------头部---------------------------------------->
<!-- tb:头部 -->
<header id="tb">
<!-----------------------------------导航模块-------------------------------------->
<!-- dh:导航 -->
<div id="dh">
<!-- dhq:导航前部分 -->
<div id="dhq">
<!-- dh-list:导航的列表 -->
<ul id="dh-list">
<li><a href="#">首页</a></li>
<!-- mv:MV导航 -->
<li><a href="#">
MV
<!-- mv-xsj:MV旁的小三角 -->
<div id="mv-xsj"></div>
</a>
<!-- xf:悬浮导航 -->
<div id="xf">
<!-- xf-list:悬浮列表 -->
<ul id="xf-list">
<li><a href="#" id="mv">MV
<div id="mv1-xsj"></div>
</a>
</li>
<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>
</li>
<li><a href="#">V榜</a></li>
<li><a href="#">娱乐</a></li>
<!-- dt:动图 -->
<li><a href="#" id="dt">商城</a></li>
<li><a href="#">众筹</a></li>
<li><a href="#">民俗文化</a></li>
</ul>
</div>
<!-- dhz:导航中间搜索框 -->
<div id="dhz">
<!-- ssk:搜索框 -->
<input type="text" name="ssk" placeholder=" 15分钟看完韩国女团20年" id="ssk">
<!-- sst:搜索图标 -->
<div id="sst"></div>
</div>
<!-- dhh:导航后部分 -->
<div id="dhh">
<!-- dhh-list:导航后部分列表 -->
<ul id="dhh-list">
<li>
<!-- vip:vip图标 -->
<div id="vip"></div>
</li>
<li>
<!-- sc:上传图标 -->
<div id="sc"></div>
</li>
<li>
<!-- <div id="xsj"></div> -->
<!-- dn:电脑图标 -->
<div id="dn">
<!-- dn-xsj:电脑旁 的小三角 -->
<div id="dn-xsj"></div>
</div>
<!-- dnxf-list:电脑悬浮列表 -->
<ul id="dnxf-list">
<!-- <li></li> -->
<li><a href="#">移动客户端</a></li>
<li><a href="#">PC客户端</a></li>
<li><a href="#">Star明星直播</a></li>
</ul>
</li>
</ul>
<!-- <img src="./images/topbar_icon.png" alt=""> -->
<!-- <img src="./images/topbar_icon.png" alt=""> -->
<!-- <img src="./images/app.png" alt=""> -->
</div>
</div>
<!-- qk:清除浮动 -->
<div class="qk"></div>
<!-----------------------------------顶部模块-------------------------------------->
<!-- dbbj:顶部背景 -->
<div id="dbbj">
<!-- dbbj-list:顶部背景的列表 -->
<ul id="dbbj-list">
<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>
<li><a href="#">River flows in you完整版MV</a></li>
<li><a href="#">UU少年团 2018回忆录</a></li>
<li><a href="#">粉丝节特辑 - 请回答,帅男!</a></li>
<li><a href="#">暑期档电视剧OST友情大放送</a></li>
<li><a href="#">那些"剧"好听的歌~在此!</a></li>
</ul>
</div>
</header>
<!----------------------------------------中间---------------------------------------->
<!-- zjnr:中间内容 -->
<section id="zjnr">
<!-----------------------------------首播&娱乐模块-------------------------------------->
<!-- sbmk:首播&娱乐模块 -->
<div id="sbmk">
<!-- sbmk-sm:首播&娱乐模块上面 -->
<div id="sbmk-sm">
<!-- sb:首播&娱乐标题 -->
<h3 id="sb">首播</h3>
<!-- sbdh-list:首播&娱乐导航列表 -->
<ul id="sbdh-list">
<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>
<li><a href="#">日本</a></li>
</ul>
</div>
<!-- sbmk-nr:首播&娱乐模块内容 -->
<div id="sbmk-nr">
<!-- sbmk-nrz:首播&娱乐模块内容左边 -->
<div id="sbmk-nrz">
<img src="./images/left_big_1.png" alt="">
<!-- dy:第一行 -->
<p><a href="#" class="dy">金曲《深蓝的天空》</a></p>
<!-- de:第二行 -->
<p><a href="#" class="de">治愈系金曲</a></p>
</div>
<!-- sbmk-nry:首播&娱乐模块内容右边 -->
<div id="sbmk-nry">
<!-- sbmk-nry-xlist:首播&娱乐模块内容右边上列表 -->
<ul id="sbmk-nry-slist">
<li>
<img src="./images/right_1.jpg" alt="">
<p><a href="#" class="dy">三生三世十里桃花</a></p>
<p><a href="#" class="de">影视主题曲</a></p>
</li>
<li>
<img src="./images/right_3.jpg" alt="">
<p><a href="#" class="dy">Lemonade Love 完整版</a></p>
<p><a href="#" class="de">流行金曲</a></p>
</li>
<li>
<img src="./images/right_5.jpg" alt="">
<p><a href="#" class="dy">越过山脉 官方版</a></p>
<p><a href="#" class="de">网络音乐</a></p>
</li>
</ul>
<!-- sbmk-nry-xlist:首播&娱乐模块内容右边下列表 -->
<ul id="sbmk-nry-xlist">
<li>
<img src="./images/right_2.jpg" alt="">
<p><a href="#" class="dy">Moonlight</a></p>
<p><a href="#" class="de">外国金曲</a></p>
</li>
<li>
<img src="./images/right_4.jpg" alt="">
<p><a href="#" class="dy">That Girl 练习室自拍版</a></p>
<p><a href="#" class="de">网络音乐</a></p>
</li>
<li>
<img src="./images/right_6.jpg" alt="">
<p><a href="#" class="dy">还来得及 电影《遇见更好的自己》</a></p>
<p><a href="#" class="de">影视金曲</a></p>
</li>
</ul>
</div>
</div>
</div>
<!-- hx:灰线 -->
<div class="hx"></div>
<!-- sbmk:首播&娱乐模块 -->
<div id="sbmk">
<!-- sbmk-sm:首播&娱乐模块上面 -->
<div id="sbmk-sm">
<!-- sb:首播&娱乐标题 -->
<h3 id="sb">娱乐</h3>
<!-- sbdh-list:首播&娱乐导航列表 -->
<ul id="sbdh-list">
<li><a href="#">全部</a></li>
<li><a href="#">现场</a></li>
<li><a href="#">影视</a></li>
</ul>
</div>
<!-- sbmk-nr:首播&娱乐模块内容 -->
<div id="sbmk-nr">
<!-- sbmk-nrz:首播&娱乐模块内容左边 -->
<div id="sbmk-nrz">
<img src="./images/left_big.jpg" alt="">
<!-- dy:第一行 -->
<p><a href="#" class="dy">悠悠校园乐队主唱受伤入院!</a></p>
<!-- de:第二行 -->
<p><a href="#" class="de">无可磨灭,无可取代,回顾十...</a></p>
</div>
<!-- sbmk-nry:首播&娱乐模块内容右边 -->
<div id="sbmk-nry">
<!-- sbmk-nry-xlist:首播&娱乐模块内容右边上列表 -->
<ul id="sbmk-nry-slist">
<li>
<img src="./images/1.jpg" alt="">
<p><a href="#" class="dy">POWER OF LOVE</a></p>
<p><a href="#" class="de">外国金曲</a></p>
</li>
<li>
<img src="./images/3.jpg" alt="">
<p><a href="#" class="dy">谁是谁</a></p>
<p><a href="#" class="de">影视金曲</a></p>
</li>
<li>
<img src="./images/5.jpg" alt="">
<p><a href="#" class="dy">落花泪</a></p>
<p><a href="#" class="de">网络金曲</a></p>
</li>
</ul>
<!-- sbmk-nry-xlist:首播&娱乐模块内容右边下列表 -->
<ul id="sbmk-nry-xlist">
<li>
<img src="./images/2.jpg" alt="">
<p><a href="#" class="dy">快乐星期六</a></p>
<p><a href="#" class="de">淘淘乐队</a></p>
</li>
<li>
<img src="./images/4.jpg" alt="">
<p><a href="#" class="dy">永远的永远</a></p>
<p><a href="#" class="de">经典歌曲</a></p>
</li>
<li>
<img src="./images/6.jpg" alt="">
<p><a href="#" class="dy">超级喜欢</a></p>
<p><a href="#" class="de">网络金曲</a></p>
</li>
</ul>
</div>
</div>
</div>
<!-- hx:灰线 -->
<div class="hx"></div>
<!-----------------------------------热播推荐模块-------------------------------------->
<!-- rbtj:热播推荐模块 -->
<div id="rbtj">
<!-- rbtj-sm:热播推荐上面 -->
<div id="rbtj-sm">
<!-- rbtj-bt:热播推荐模块标题 -->
<h3 id="rbtj-bt">热播推荐</h3>
<p><a href="#">换一换</a></p>
</div>
<!-- rbtj-xm:热播推荐下面 -->
<div id="rbtj-xm">
<!-- rbtj-list:热播推荐内容 -->
<ul id="rbtj-list">
<li>
<img src="./images/rb1.jpg" alt="">
<!-- rbtj-dy:第一行 -->
<p><a href="#" class="rbtj-dy">蜜雪柠檬</a></p>
<!-- rbtj-de:第二行 -->
<p><a href="#" class="rbtj-de">网络金曲</a></p>
</li>
<li>
<img src="./images/rb2.jpg" alt="">
<p><a href="#" class="rbtj-dy">蜜雪柠檬</a></p>
<p><a href="#" class="rbtj-de">网络金曲</a></p>
</li>
<li>
<img src="./images/rb3.jpg" alt="">
<p><a href="#" class="rbtj-dy">蜜雪柠檬</a></p>
<p><a href="#" class="rbtj-de">网络金曲</a></p>
</li>
<li>
<img src="./images/rb4.jpg" alt="">
<p><a href="#" class="rbtj-dy">蜜雪柠檬</a></p>
<p><a href="#" class="rbtj-de">网络金曲</a></p>
</li>
<li>
<img src="./images/rb5.jpg" alt="">
<p><a href="#" class="rbtj-dy">蜜雪柠檬</a></p>
<p><a href="#" class="rbtj-de">网络金曲</a></p>
</li>
</ul>
</div>
</div>
<!-- hx:灰线 -->
<div class="hx"></div>
<!-----------------------------------音乐V榜模块-------------------------------------->
<!-- yyvb:音乐V榜模块 -->
<div id="yyvb">
<!-- yyvb-sm:音乐V榜模块上面标题导航 -->
<div id="yyvb-sm">
<!-- yyvb-bt:音乐V榜标题 -->
<h3 id="yyvb-bt">音乐V榜</h3>
<!-- yyvb-list:音乐V榜导航列表 -->
<ul id="yyvb-list">
<li><a href="#"> TOP10</a></li>
<li><a href="#"> 看音乐</a></li>
<li><a href="#"> 密谈室</a></li>
<li><a href="#"> 有话说</a></li>
<li><a href="#"> 特别企划</a></li>
</ul>
</div>
<!-- yyvb-nr:音乐V榜模块内容 -->
<div id="yyvb-nr">
<!-- yyvb-nrz:音乐V榜模块内容左边 -->
<div id="yyvb-nrz">
<img src="./images/vleftbig.jpg" alt="">
<!-- yyvb-nrz-dy:音乐V榜模块内容左边第一行 -->
<p><a href="#" class="yyvb-nrz-dy">夏日女团清凉回归 V榜特别企划</a></p>
<!-- yyvb-nrz-de:音乐V榜模块内容左边第二行 -->
<p><a href="#" class="yyvb-nrz-de">欧尼!欧尼!我爱你!</a></p>
</div>
<!-- yyvb-nry:音乐V榜模块内容右边 -->
<div id="yyvb-nry">
<!-- yyvb-nry-list:音乐V榜模块右边内容列表 -->
<ul id="yyvb-nry-list">
<li>
<!-- yyvb-nry-dy:音乐V榜模块右边内容列表第一行 -->
<p><a href="#" class="yyvb-nry-dy">周五节目单</a></p>
<!-- yyvb-nry-de:音乐V榜模块右边内容列表第二行 -->
<p><a href="#" class="yyvb-nry-de">FRIDAY</a></p>
<img src="./images/v1.jpg" alt="">
<!-- yyvb-nry-nr:音乐V榜模块右边列表内容 -->
<!-- yyvb-nry-nr:音乐V榜模块右边列表内容p标签 -->
<p class="yyvb-nry-nr-p"><a href="#" class="yyvb-nry-nr">夏日女团清凉回归 V榜特别企划</a></p>
<p class="yyvb-nry-nr-p"><a href="#" class="yyvb-nry-nr">2017夏季日剧档开更啦</a></p>
<p class="yyvb-nry-nr-p"><a href="#" class="yyvb-nry-nr">V榜特别企划推陈出新的风向标</a></p>
</li>
<li>
<p><a href="#" class="yyvb-nry-dy">周四节目单</a></p>
<p><a href="#" class="yyvb-nry-de">THURSDAY</a></p>
<img src="./images/v2.jpg" alt="">
<p class="yyvb-nry-nr-p"><a href="#" class="yyvb-nry-nr">2017上半年男团评价排行榜 V榜有话说</a></p>
<p class="yyvb-nry-nr-p"><a href="#" class="yyvb-nry-nr">2017上半年女团评价排行榜</a></p>
<p class="yyvb-nry-nr-p"><a href="#" class="yyvb-nry-nr">总选举一个时代的落幕 V榜有话 说</a>
</p>
</li>
<li>
<p><a href="#" class="yyvb-nry-dy">周三节目单</a></p>
<p><a href="#" class="yyvb-nry-de">WEDNESDAY</a></p>
<img src="./images/v3.jpg" alt="">
<p class="yyvb-nry-nr-p"><a href="#" class="yyvb-nry-nr">暖心聊天室</a></p>
<p class="yyvb-nry-nr-p"><a href="#" class="yyvb-nry-nr">V榜密谈室元气满满</a></p>
<p class="yyvb-nry-nr-p"><a href="#" class="yyvb-nry-nr">性感玫瑰V榜密谈室</a></p>
</li>
</ul>
</div>
</div>
</div>
<!-- hx:灰线 -->
<div class="hx"></div>
<!-----------------------------------自制节目模块-------------------------------------->
<!-- zzjm:自制节目模块 -->
<div id="zzjm">
<!-- zzjm-sm:自制节目模块上面标题导航 -->
<div id="zzjm-sm">
<!-- zzjm-bt:自制节目标题 -->
<h3 id="zzjm-bt">自制节目</h3>
<!-- zzjm-ck:自制节目里的查看更多 -->
<!-- zzjm-ck-p:自制节目里的查看更多p标签 -->
<p id="zzjm-ck-p"><a href="#" id="zzjm-ck">查看更多》</a></p>
</div>
<!-- zzjm-nr:自制节目模块内容 -->
<div id="zzjm-nr">
<!-- zzjm-nrz:自制节目模块内容左边 -->
<div id="zzjm-nrz">
<img src="./images/zzleftbig.jpg" alt="">
<!-- zzjm-nrz-dy:自制节目模块内容左边第一行 -->
<p><a href="#" class="zzjm-nrz-dy">快男对话:我是看你的戏长大的?!</a></p>
<!-- zzjm-nrz-de:自制节目模块内容左边第二行 -->
<p><a href="#" class="zzjm-nrz-de">大家快看我像谁,萌萌哒!</a></p>
</div>
<!-- zzjm-nry:自制节目模块内容右边 -->
<div id="zzjm-nry">
<!-- zzjm-nry-list:自制节目模块右边内容列表 -->
<ul id="zzjm-nry-list">
<li>
<!-- zzjm-nry-dy:自制节目模块右边内容列表第一行 -->
<p><a href="#" class="zzjm-nry-dy">STAR!调查团</a></p>
<!-- zzjm-nry-de:自制节目模块右边内容列表第二行 -->
<p><a href="#" class="zzjm-nry-de">INVESTIGATION MISSION</a></p>
<img src="./images/zz1.jpg" alt="">
<!-- zzjm-nry-nr:自制节目模块右边列表内容 -->
<!-- zzjm-nry-nr:自制节目模块右边列表内容p标签 -->
<p class="zzjm-nry-nr-p"><a href="#" class="zzjm-nry-nr">728粉丝节特辑</a></p>
<p class="zzjm-nry-nr-p"><a href="#" class="zzjm-nry-nr">会闪光的少女</a></p>
<p class="zzjm-nry-nr-p"><a href="#" class="zzjm-nry-nr">天生自带呆萌属性</a></p>
</li>
<li>
<p><a href="#" class="zzjm-nry-dy">Eva的艺能时光机</a></p>
<p><a href="#" class="zzjm-nry-de">YHBOYS TIME MACHINE</a></p>
<img src="./images/zz2.jpg" alt="">
<p class="zzjm-nry-nr-p"><a href="#" class="zzjm-nry-nr">YHBOYS的艺能时光机 花絮特辑 未公开片段大放送</a></p>
<p class="zzjm-nry-nr-p"><a href="#" class="zzjm-nry-nr">Eva的艺能时光机人生首次迷你 粉丝见面会</a></p>
<p class="zzjm-nry-nr-p"><a href="#" class="zzjm-nry-nr">Eva的艺能时光机工作人员身份 体验</a>
</p>
</li>
<li>
<p><a href="#" class="zzjm-nry-dy">音悦大来宾</a></p>
<p><a href="#" class="zzjm-nry-de">YINYUE GUEST</a></p>
<img src="./images/zz3.jpg" alt="">
<p class="zzjm-nry-nr-p"><a href="#" class="zzjm-nry-nr">逗比被爆睡前萌料?可爱大PK!</a></p>
<p class="zzjm-nry-nr-p"><a href="#" class="zzjm-nry-nr">吃货小白各种套路节目组</a></p>
<p class="zzjm-nry-nr-p"><a href="#" class="zzjm-nry-nr">"疯狂的你"生日愿望大公开</a></p>
</li>
</ul>
</div>
</div>
</div>
<!-- hx:灰线 -->
<div class="hx"></div>
<!-----------------------------------猜你喜欢模块-------------------------------------->
<!-- cnxh:猜你喜欢模块 -->
<div id="cnxh">
<!-- cnxh-sm:猜你喜欢上面 -->
<div id="cnxh-sm">
<!-- cnxh-bt:猜你喜欢标题 -->
<h3 id="cnxh-bt">猜你喜欢</h3>
<p><a href="#">换一换</a></p>
</div>
<!-- cnxh-xm:猜你喜欢模块下面内容 -->
<div id="cnxh-xm">
<!-- cnxh-list:猜你喜欢内容 -->
<ul id="cnxh-list">
<li>
<!-- cnxh-list-t:猜你喜欢内容图片 -->
<div class="cnxh-list-t">
<img src="./images/c1.jpg" alt="">
</div>
<!-- cnxh-dy:第一行 -->
<p><a href="#" class="cnxh-dy">风中有你</a></p>
<!-- cnxh-de:第二行 -->
<p><a href="#" class="cnxh-de">情感金曲</a></p>
</li>
<li>
<div class="cnxh-list-t">
<img src="./images/c2.jpg" alt="">
</div>
<p><a href="#" class="cnxh-dy">十五秒记忆</a></p>
<p><a href="#" class="cnxh-de">网络金曲</a></p>
</li>
<li>
<div class="cnxh-list-t">
<img src="./images/c3.jpg" alt="">
</div>
<p><a href="#" class="cnxh-dy">男团三首新歌强势上榜!</a></p>
<p><a href="#" class="cnxh-de">热门榜歌曲</a></p>
</li>
<li>
<div class="cnxh-list-t">
<img src="./images/c4.jpg" alt="">
</div>
<p><a href="#" class="cnxh-dy">一生有你</a></p>
<p><a href="#" class="cnxh-de">怀旧金曲</a></p>
</li>
<li>
<div class="cnxh-list-t">
<img src="./images/c5.jpg" alt="">
</div>
<p><a href="#" class="cnxh-dy">2017上半年男团评价排行榜 V榜有</a></p>
<p><a href="#" class="cnxh-de">明星直播间</a></p>
</li>
</ul>
</div>
<!-- cnxh-xm-t:猜你喜欢模块下面图片 -->
<div id="cnxh-xm-t"><img src="./images/adver.jpg" alt=""></div>
</div>
<!-- hx:灰线 -->
<div class="hx"></div>
</section>
<!----------------------------------------底部---------------------------------------->
<!-- db:底部 -->
<footer id="db">
<!-- dbnr:底部内容 -->
<div id="dbnr">
<!-- dbnr-list:底部内容上面列表 -->
<ul id="dbnr-list">
<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>
<li><a href="#">客服中心</a></li>
</ul>
<!-- dbnr-dy:底部内容第一行 -->
<p id="dbnr-dy"><a href="#">Copyright © 2019 - 2020 广播电视节目制作经营 许可证编号(京)字第1891号 | 京网文[2014]2037-287号 | 网络视听许可证0110413号</a></p>
<!-- dbnr-de:底部内容第二行 -->
<p id="dbnr-de"><a href="#">京公网安备11010502014900号 | 京ICP备11024134号-1 | 京ICP证060716号 | 出版物经营许可证 新出发京批字第直160022号 | 增值电信业务经营许可证B2-20140501</a></p>
</div>
</footer>
</body>
</html>
CSS部分
* {
padding: 0;
margin: 0;
}
.hx {
width: 100%;
height: 1px;
background-color: darkgray;
}
/* -----------------------------------------头部---------------------------------------------- */
/* ----------------------------------导航---------------------------------------- */
li {
list-style: none;
}
/* tb:头部 */
/* dh:导航 */
#tb #dh {
width: 100%;
height: 50px;
background-color: black;
}
/* dhq:导航前部分 */
#tb #dh #dhq {
float: left;
}
/* dh-list:导航的列表 */
#tb #dh #dhq #dh-list {
width: 1070px;
height: 50px;
padding-left: 20px;
/* border: 1px solid red; */
}
#tb #dh #dhq #dh-list li {
float: left;
width: 80px;
height: 50px;
line-height: 50px;
position: relative;
/* border: 1px solid blue; */
}
#tb #dh #dhq #dh-list li:hover {
color: #cf9;
background-color: rgb(34, 34, 34);
}
#tb #dh #dhq #dh-list li:nth-of-type(2) a:hover {
display: block;
color: #cf9;
}
#tb #dh #dhq #dh-list li:nth-of-type(2) a:hover {
color: #cf9;
}
/* #tb #dh #dhq #dh-list li:nth-of-type(2) {
opacity: 0;
height: 0;
}
#tb #dh #dhq #dh-list li:hover:nth-of-type(2) {
opacity: 1;
} */
#tb #dh #dhq #dh-list li:nth-of-type(7) {
width: 100px;
}
/* mv-xsj:MV旁的小三角 */
#tb #dh #dhq #dh-list li:nth-of-type(2) a #mv-xsj {
width: 8px;
height: 8px;
background-image: url(./images/topbar_sprite2.png);
background-position: -223px -15px;
margin-top: -30px;
margin-left: 55px;
z-index: 20;
/* border: 1px solid red; */
}
/* mv1-xsj:MV旁的小三角 */
#tb #dh #dhq #dh-list li:nth-of-type(2) a #mv1-xsj {
width: 8px;
height: 8px;
background-image: url(./images/topbar_sprite2.png);
background-position: -230px -15px;
margin-top: -30px;
margin-left: 55px;
z-index: 20;
/* border: 1px solid red; */
}
/* #tb #dh #dhq #dh-list li:nth-of-type(2){
height: 400px;
width: 100px;
z-index: 10;
} */
/* xf-list:悬浮列表 */
#tb #dh #dhq #dh-list li:nth-of-type(2) #xf-list {
position: absolute;
top: 0px;
z-index: 10;
/* border: 1px solid red; */
/* width: 100px; */
height: 0px;
opacity: 0;
transition: height .25s ease .1s;
}
#tb #dh #dhq #dh-list li:nth-of-type(2) #xf-list li:hover{
background-color: green;
}
#tb #dh #dhq #dh-list li:nth-of-type(2) #xf-list li:hover a{
color: white;
}
#tb #dh #dhq #dh-list li:nth-of-type(2) #xf-list li:hover:nth-of-type(1){
background-color: rgb(34, 34, 34);
}
#tb #dh #dhq #dh-list li:nth-of-type(2) #xf-list:hover {
opacity: 1;
height: auto;
}
#tb #dh #dhq #dh-list li:nth-of-type(2) #xf-list li {
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: rgb(34, 34, 34);
}
#tb #dh #dhq #dh-list li:nth-of-type(2) #xf-list li:nth-of-type(1) {
opacity: 1;
/* border: 1px solid blue; */
width: 80px;
height: 50px;
}
#tb #dh #dhq #dh-list li:nth-of-type(2) #xf-list li:nth-of-type(1) a {
color: #cf9;
}
#tb #dh #dhq #dh-list li:nth-of-type(2) #xf-list #mv {
opacity: 1;
width: 80px;
height: 50px;
line-height: 50px;
text-align: center;
/* border: 1px solid red; */
}
#tb #dh #dhq #dh-list li:nth-of-type(2) #xf-list #mv a {
color: #cf9;
display: block;
}
/* #tb #dh #dhq #dh-list li:nth-of-type(2) #xf-list li:nth-of-type(5){
background-color: rgb(34, 34, 34);
} */
#tb #dh #dhq #dh-list li:nth-of-type(2) #xf-list li:nth-of-type(1) a {
color: white;
display: block;
opacity: 0;
}
#tb #dh #dhq #dh-list li:nth-of-type(2) #xf-list li:nth-of-type(1) a:hover {
color: #cf9;
opacity: 0;
}
#tb #dh #dhq #dh-list li a {
color: white;
/* padding-left: 40px; */
text-align: center;
text-decoration: none;
font-size: 13px;
display: block;
}
#tb #dh #dhq #dh-list li a:hover {
color: #cf9;
}
#tb #dh #dhq #dh-list li:nth-of-type(1) a {
color: #cf9;
}
/* dt:动图 */
#tb #dh #dhq #dh-list #dt {
background-image: url(./images/shop2.gif);
}
/* dhz:导航中间搜索框 */
#tb #dh #dhz {
float: left;
width: 220px;
height: 50px;
line-height: 45px;
/* border: 1px solid red; */
position: relative;
}
/* ssk:搜索框 */
#tb #dh #dhz #ssk {
width: 220px;
height: 25px;
border-radius: 13px;
margin-left: 10px;
border: none;
background-image: url(./images/topbar_sprite2.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#tb #dh #dhz #ssk:hover {
border: none;
background-image: url(./images/topbar_sprite2.png);
background-repeat: no-repeat;
background-position: 0px 25px;
}
/* sst:搜索图标 */
#tb #dh #dhz #sst {
width: 16px;
height: 18px;
background-image: url(./images/topbar_sprite2.png);
background-repeat: no-repeat;
background-position: -223px 0px;
position: absolute;
top: 15px;
left: 200px;
/* border: 1px solid red; */
}
/* dhh:导航后部分 */
#tb #dh #dhh {
float: right;
width: 200px;
height: 50px;
/* line-height: 50px; */
/* border: 1px solid red; */
}
/* dhh-list:导航后部分列表 */
#tb #dh #dhh #dhh-list{
width: 150px;
/* float: right; */
/* border: yellow solid 1px; */
height: 50px;
position: relative;
}
#tb #dh #dhh #dhh-list li{
float: left;
width: 50px;
height: 50px;
line-height: 50px;
/* border: red solid 1px; */
text-align: center;
position: relative;
}
#tb #dh #dhh #dhh-list li:hover{
background-color: rgb(34, 34, 34);
}
/* #tb #dh #dhh #dhh-list li:nth-of-type(3){
background-image: url(./images/topbar_sprite2.png);
background-position: -223px -15px;
background-repeat: no-repeat;
} */
#tb #dh #dhh #dhh-list li:nth-of-type(3) #dh-xsj{
width: 20px;
height: 20px;
background-image: url(./images/topbar_sprite2.png);
background-position: -223px -15px;
margin-left: 23px;
margin-top: 12px;
border: red 1px solid;
z-index: 30;
position: absolute;
}
#tb #dh #dhh #dhh-list li:hover:nth-of-type(3) #xsj{
width: 20;
height: 20px;
background-image: url(./images/topbar_sprite2.png);
background-position: -230px -15px;
background-repeat: no-repeat;
/* background-position: 15px 17px; */
position: absolute;
/* top: 17px; */
left: 100px;
}
/* dnxf-list:电脑悬浮列表 */
#tb #dh #dhh #dhh-list li:hover:nth-of-type(3) #dnxf-list{
width: 80px;
height: 90px;
z-index: 20;
position: absolute;
top: 50px;
background-color: rgb(34, 34, 34);
}
#tb #dh #dhh #dhh-list li:hover:nth-of-type(3) #dnxf-list li{
width: 80px;
height: 30px;
background-color: rgb(34, 34, 34);
text-align: center;
line-height: 30px;
}
#tb #dh #dhh #dhh-list li:hover:nth-of-type(3) #dnxf-list li:hover{
background-color: green;
}
/* #tb #dh #dhh #dhh-list li:hover:nth-of-type(3) #dnxf-list li:nth-of-type(1){
background-color: none;
} */
#tb #dh #dhh #dhh-list li:hover:nth-of-type(3) #dnxf-list li a{
text-decoration: none;
color: white;
font-size: 13px;
}
/* vip:vip图标 */
#tb #dh #dhh #dhh-list li #vip {
/* float: left; */
width: 22px;
height: 12px;
/* line-height: 50px; */
background-image: url(./images/topbar_icon.png);
background-position: -40px -40px;
margin-top: 19px;
margin-left: 14px;
display: block;
}
#tb #dh #dhh #dhh-list li #vip:hover {
background-image: url(./images/vip_hover.png);
background-position: 0 -12px;
}
/* sc:上传图标 */
#tb #dh #dhh #dhh-list li #sc {
/* float: left; */
width: 16px;
height: 16px;
background-image: url(./images/topbar_icon.png);
background-position: -7px -40px;
margin-top: 17px;
margin-left: 17px;
/* border: 1px solid red; */
}
#tb #dh #dhh #dhh-list li #sc:hover {
background-image: url(./images/upload_hover.png);
background-position: 0px 0;
}
/* dn:电脑图标 */
#tb #dh #dhh #dhh-list li #dn {
/* float: left; */
width: 21px;
height: 16px;
background-image: url(./images/app.png);
background-repeat: no-repeat;
margin-top: 17px;
margin-left: 15px;
}
#tb #dh #dhh #dhh-list li #dn:hover {
background-image: url(./images/app_hover.png);
}
#tb #dh #dhh #dhh-list li #dn:hover #dn-xsj{
width: 8px;
height: 8px;
background-image: url(./images/topbar_sprite2.png);
background-position: -230px -15px;
margin-left: 23px;
margin-top: 12px;
}
/* dn-xsj:电脑旁的小三角 */
#tb #dh #dhh #dhh-list li #dn #dn-xsj {
width: 8px;
height: 8px;
background-image: url(./images/topbar_sprite2.png);
background-position: -223px -15px;
margin-left: 23px;
margin-top: 12px;
}
/* qk:清除浮动 */
#tb .qk {
clear: both;
}
/* -----------------------------------顶部内容-------------------------------------------- */
/* dbbj:顶部背景 */
#tb #dbbj {
width: 100%;
height: 480px;
background-image: url(./images/banner01.jpg);
/* margin-top: -20px; */
position: relative;
}
/* dbbj-list:顶部背景的列表 */
#tb #dbbj #dbbj-list {
width: 280px;
height: 400px;
background-color: rgba(0, 0, 0, .5);
padding: 10px;
position: absolute;
top: 20px;
left: 1100px;
}
#tb #dbbj #dbbj-list li {
height: 40px;
line-height: 40px;
text-align: right;
margin-right: 10px;
}
#tb #dbbj #dbbj-list li a {
color: white;
text-decoration: none;
}
#tb #dbbj #dbbj-list li:nth-of-type(1) a {
color: #52e2c0;
}
#tb #dbbj #dbbj-list li a:hover {
color: #52e2c0;
}
/* ---------------------------------------中间内容----------------------------------------------- */
/* ----------------------------------首播&娱乐模块------------------------------------------- */
/* zjnr:中间内容 */
#zjnr {
/* width: 1200px;
margin: 0 auto; */
}
/* sbmk:首播&娱乐模块 */
#zjnr #sbmk {
width: 1200px;
height: 410px;
margin: 0 auto;
/* border: 1px solid red; */
}
/* sbmk-sm:首播&娱乐模块上面 */
#zjnr #sbmk #sbmk-sm {
width: 1200px;
height: 50px;
margin-top: 10px;
margin-bottom: 10px;
}
/* sb:首播&娱乐标题 */
#zjnr #sbmk #sbmk-sm #sb {
width: 80px;
height: 50px;
text-align: left;
line-height: 50px;
float: left;
}
/* sbdh-list:首播&娱乐导航列表 */
#zjnr #sbmk #sbmk-sm #sbdh-list {
float: right;
margin-right: 10px;
}
#zjnr #sbmk #sbmk-sm #sbdh-list li {
float: left;
width: 60px;
height: 50px;
line-height: 50px;
/* border: 1px solid rebeccapurple; */
text-align: center;
}
#zjnr #sbmk #sbmk-sm #sbdh-list li a {
text-decoration: none;
color: black;
display: inline-block;
height: 50px;
width: 40px;
text-align: center;
}
#zjnr #sbmk #sbmk-sm #sbdh-list li:nth-of-type(1) a {
color: #52e2c0;
border-bottom: #52e2c0 2px solid;
}
#zjnr #sbmk #sbmk-sm #sbdh-list li a:hover {
color: #52e2c0;
border-bottom: #52e2c0 2px solid;
}
/* sbmk-nr:首播&娱乐模块内容 */
#zjnr #sbmk #sbmk-nr {}
/* sbmk-nrz:首播&娱乐模块内容左边 */
#zjnr #sbmk #sbmk-nr #sbmk-nrz {
width: 510px;
float: left;
}
#zjnr #sbmk #sbmk-nr #sbmk-nrz>img {
width: 510px;
height: 273px;
}
/* sbmk-nrz:首播&娱乐模块内容右边边 */
#zjnr #sbmk #sbmk-nr #sbmk-nry {}
/* #sbmk-nry-slist:首播&娱乐模块内容右边上列表 */
#zjnr #sbmk #sbmk-nr #sbmk-nry #sbmk-nry-slist li,
#zjnr #sbmk #sbmk-nr #sbmk-nry #sbmk-nry-xlist li {
float: left;
width: 200px;
height: 160px;
margin-left: 30px;
}
/* sbmk-nry-xlist:首播&娱乐模块内容右边下列表 */
#zjnr #sbmk #sbmk-nr #sbmk-nry #sbmk-nry-slist li img,
#zjnr #sbmk #sbmk-nr #sbmk-nry #sbmk-nry-xlist li img {
width: 200px;
height: 113px;
}
/* dy:第一行 */
#zjnr #sbmk #sbmk-nr .dy {
text-decoration: none;
font-size: 12px;
color: black;
margin-left: 10px;
}
#zjnr #sbmk #sbmk-nr .dy:hover {
color: #52e2c0;
}
/* de:第二行 */
#zjnr #sbmk #sbmk-nr .de {
text-decoration: none;
font-size: 11px;
color: black;
margin-left: 10px;
}
#zjnr #sbmk #sbmk-nr .de:hover {
color: #52e2c0;
}
/* ----------------------------------热播推荐模块------------------------------------------- */
/* rbtj:热播推荐模块 */
#rbtj {
width: 1200px;
height: 270px;
margin: 0 auto;
/* border: red 1px solid; */
}
/* rbtj-sm:热播推荐上面 */
#rbtj #rbtj-sm {
width: 1200px;
margin: 0 auto;
height: 50px;
/* border: blue 1px solid; */
margin-top: 10px;
margin-bottom: 10px;
}
/* rbtj-bt:热播推荐模块标题 */
#rbtj #rbtj-sm #rbtj-bt {
height: 50px;
width: 150px;
text-align: left;
line-height: 50px;
float: left;
}
#rbtj #rbtj-sm p {
width: 70px;
height: 50px;
text-align: right;
line-height: 50px;
float: right;
}
#rbtj #rbtj-sm p a {
text-decoration: none;
color: black;
display: block;
}
#rbtj #rbtj-sm p a:hover {
color: #52e2c0;
}
/* rbtj-xm:热播推荐下面 */
#rbtj #rbtj-xm {
width: 1200px;
margin: 0 auto;
}
/* rbtj-list:热播推荐内容 */
#rbtj #rbtj-xm #rbtj-list {
width: 1200px;
margin: 0 auto;
}
#rbtj #rbtj-xm #rbtj-list li {
float: left;
width: 220px;
margin-right: 25px;
}
#rbtj #rbtj-xm #rbtj-list li>img {
width: 220px;
}
#rbtj #rbtj-xm #rbtj-list li:nth-of-type(5) {
margin-right: 0px;
}
/* rbtj-dy:第一行 */
#rbtj #rbtj-xm #rbtj-list li .rbtj-dy {
text-decoration: none;
color: black;
font-size: 14px;
margin-left: 10px;
}
#rbtj #rbtj-xm #rbtj-list li .rbtj-dy:hover {
color: #52e2c0
}
/* rbtj-de:第二行 */
#rbtj #rbtj-xm #rbtj-list li .rbtj-de {
text-decoration: none;
color: black;
font-size: 13px;
margin-left: 10px;
}
#rbtj #rbtj-xm #rbtj-list li .rbtj-de:hover {
color: #52e2c0
}
/* --------------------------------------音乐V榜模块------------------------------------------- */
/* yyvb:音乐V榜模块 */
#yyvb {
width: 1200px;
height: 480px;
margin: 0 auto;
/* border: 1px solid red; */
}
/* yyvb-sm:音乐V榜模块上面标题导航 */
#yyvb #yyvb-sm {
width: 1200px;
height: 50px;
/* border: 1px solid blue; */
margin-top: 10px;
margin-bottom: 10px;
}
/* yyvb-bt:音乐V榜标题 */
#yyvb #yyvb-sm #yyvb-bt {
width: 85px;
height: 50px;
text-align: left;
line-height: 50px;
/* border: 1px solid green; */
float: left;
}
/* yyvb-list:音乐V榜导航列表 */
#yyvb #yyvb-sm #yyvb-list {
height: 20px;
/* line-height: 50px; */
}
#yyvb #yyvb-sm #yyvb-list li {
width: 70px;
height: 50px;
line-height: 50px;
float: left;
text-align: left;
/* margin-top: 20px; */
}
#yyvb #yyvb-sm #yyvb-list li a {
text-decoration: none;
color: black;
font-size: 13px;
/* width: 70px; */
/* height: 20px; */
border-left: 1px solid #ccc;
/* display: block; */
/* padding-top: 20px; */
/* margin-left: 20px; */
text-indent: 2em;
}
#yyvb #yyvb-sm #yyvb-list li a:hover {
color: #52e2c0;
}
/* yyvb-nr:音乐V榜模块内容 */
#yyvb #yyvb-nr {
width: 1200px;
}
/* yyvb-nrz:音乐V榜模块内容左边 */
#yyvb #yyvb-nr #yyvb-nrz {
float: left;
width: 480px;
}
#yyvb #yyvb-nr #yyvb-nrz img {
width: 480px;
}
/* yyvb-nrz-dy:音乐V榜模块内容左边第一行 */
#yyvb #yyvb-nr #yyvb-nrz .yyvb-nrz-dy {
text-decoration: none;
color: black;
margin-left: 10px;
}
#yyvb #yyvb-nr #yyvb-nrz .yyvb-nrz-dy:hover {
color: #52e2c0;
}
/* yyvb-nrz-de:音乐V榜模块内容左边第二行 */
#yyvb #yyvb-nr #yyvb-nrz .yyvb-nrz-de {
text-decoration: none;
color: black;
margin-top: 5px;
margin-left: 10px;
font-size: 13px;
}
#yyvb #yyvb-nr #yyvb-nrz .yyvb-nrz-de:hover {
color: #52e2c0;
}
/* yyvb-nry:音乐V榜模块内容右边 */
#yyvb #yyvb-nr #yyvb-nry {
float: left;
}
/* yyvb-nry-list:音乐V榜模块右边内容列表 */
#yyvb #yyvb-nr #yyvb-nry #yyvb-nry-list {
width: 720px;
}
#yyvb #yyvb-nr #yyvb-nry #yyvb-nry-list li {
float: left;
width: 210px;
margin-left: 30px;
}
#yyvb #yyvb-nr #yyvb-nry #yyvb-nry-list li img {
width: 210px;
margin-bottom: 10px;
}
/* yyvb-nry-dy:音乐V榜模块右边内容列表第一行 */
#yyvb #yyvb-nr #yyvb-nry #yyvb-nry-list li .yyvb-nry-dy {
text-decoration: none;
color: black;
font-size: 14px;
font-weight: 900;
}
/* yyvb-nry-de:音乐V榜模块右边内容列表第二行 */
#yyvb #yyvb-nr #yyvb-nry #yyvb-nry-list li .yyvb-nry-de {
text-decoration: none;
color: black;
font-size: 12px;
margin-bottom: 15px;
display: block;
}
/* yyvb-nry-nr:音乐V榜模块右边列表内容 */
#yyvb #yyvb-nr #yyvb-nry #yyvb-nry-list li .yyvb-nry-nr {
text-decoration: none;
color: black;
font-size: 14px;
margin-left: 10px;
}
#yyvb #yyvb-nr #yyvb-nry #yyvb-nry-list li .yyvb-nry-nr:hover {
color: #52e2c0;
}
/* yyvb-nry-nr-p:音乐V榜模块右边列表内容p标签 */
#yyvb #yyvb-nr #yyvb-nry #yyvb-nry-list li .yyvb-nry-nr-p {
width: 210px;
height: 80px;
}
/* -----------------------------------自制节目模块------------------------------------------- */
/* zzjm:自制节目模块 */
#zzjm {
width: 1200px;
height: 480px;
margin: 0 auto;
/* border: 1px solid red; */
}
/* zzjm-sm:自制节目模块上面标题导航 */
#zzjm #zzjm-sm {
width: 1200px;
height: 50px;
/* border: 1px solid blue; */
margin-top: 10px;
margin-bottom: 10px;
}
/* zzjm-bt:自制节目标题 */
#zzjm #zzjm-sm #zzjm-bt {
width: 85px;
height: 50px;
text-align: left;
line-height: 50px;
/* border: 1px solid green; */
float: left;
}
/* zzjm-ck:自制节目里的查看更多 */
#zzjm #zzjm-sm #zzjm-ck {
text-decoration: none;
color:darkgray;
font-size: 14px;
}
#zzjm #zzjm-sm #zzjm-ck:hover {
color: #52e2c0;
}
/* zzjm-ck-p:自制节目里的查看更多p标签 */
#zzjm #zzjm-sm #zzjm-ck-p {
width: 100px;
height: 50px;
line-height: 50px;
text-align: right;
float: right;
}
/* zzjm-nr:自制节目模块内容 */
#zzjm #zzjm-nr {
width: 1200px;
}
/* yyvb-nrz:自制节目模块内容左边 */
#zzjm #zzjm-nr #zzjm-nrz {
float: left;
width: 480px;
}
#zzjm #zzjm-nr #zzjm-nrz img {
width: 480px;
}
/* zzjm-nrz-dy:自制节目模块内容左边第一行 */
#zzjm #zzjm-nr #zzjm-nrz .zzjm-nrz-dy {
text-decoration: none;
color: black;
margin-left: 10px;
}
#zzjm #zzjm-nr #zzjm-nrz .zzjm-nrz-dy:hover {
color: #52e2c0;
}
/* zzjm-nrz-de:自制节目模块内容左边第二行 */
#zzjm #zzjm-nr #zzjm-nrz .zzjm-nrz-de {
text-decoration: none;
color: black;
margin-top: 5px;
margin-left: 10px;
font-size: 13px;
}
#zzjm #zzjm-nr #zzjm-nrz .zzjm-nrz-de:hover {
color: #52e2c0;
}
/* zzjm-nry:自制节目模块内容右边 */
#zzjm #zzjm-nr #zzjm-nry {
float: left;
}
/* zzjm-nry-list:自制节目模块右边内容列表 */
#zzjm #zzjm-nr #zzjm-nry #zzjm-nry-list {
width: 720px;
}
#zzjm #zzjm-nr #zzjm-nry #zzjm-nry-list li {
float: left;
width: 210px;
margin-left: 30px;
}
#zzjm #zzjm-nr #zzjm-nry #zzjm-nry-list li img {
width: 210px;
margin-bottom: 10px;
}
/* zzjm-nry-dy:自制节目模块右边内容列表第一行 */
#zzjm #zzjm-nr #zzjm-nry #zzjm-nry-list li .zzjm-nry-dy {
text-decoration: none;
color: black;
font-size: 14px;
font-weight: 900;
}
/* zzjm-nry-de:自制节目模块右边内容列表第二行 */
#zzjm #zzjm-nr #zzjm-nry #zzjm-nry-list li .zzjm-nry-de {
text-decoration: none;
color: black;
font-size: 12px;
margin-bottom: 15px;
display: block;
}
/* zzjm-nry-nr:自制节目模块右边列表内容 */
#zzjm #zzjm-nr #zzjm-nry #zzjm-nry-list li .zzjm-nry-nr {
text-decoration: none;
color: black;
font-size: 14px;
margin-left: 10px;
}
#zzjm #zzjm-nr #zzjm-nry #zzjm-nry-list li .zzjm-nry-nr:hover {
color: #52e2c0;
}
/* zzjm-nry-nr-p:自制节目模块右边列表内容p标签 */
#zzjm #zzjm-nr #zzjm-nry #zzjm-nry-list li .zzjm-nry-nr-p {
width: 210px;
height: 80px;
}
/* ----------------------------------猜你喜欢模块--------------------------------------------- */
/* cnxh:猜你喜欢模块 */
#cnxh {
width: 1200px;
height: 380px;
margin: 0 auto;
/* border: red 1px solid; */
}
/* cnxh-sm:猜你喜欢上面 */
#cnxh #cnxh-sm {
width: 1200px;
margin: 0 auto;
height: 50px;
/* border: blue 1px solid; */
margin-top: 10px;
margin-bottom: 10px;
}
/* rbtj-bt:猜你喜欢模块标题 */
#cnxh #cnxh-sm #cnxh-bt {
height: 50px;
width: 150px;
text-align: left;
line-height: 50px;
float: left;
}
#cnxh #cnxh-sm p {
width: 70px;
height: 50px;
text-align: right;
line-height: 50px;
float: right;
}
#cnxh #cnxh-sm p a {
text-decoration: none;
color: black;
display: block;
}
#cnxh #cnxh-sm p a:hover {
color: #52e2c0;
}
/* cnxh-xm:猜你喜欢下面 */
#cnxh #cnxh-xm {
width: 1200px;
margin: 0 auto;
}
/* cnxh-list:猜你喜欢内容 */
#cnxh #cnxh-xm #cnxh-list {
width: 1200px;
margin: 0 auto;
}
#cnxh #cnxh-xm #cnxh-list li {
float: left;
width: 220px;
margin-right: 25px;
}
/* cnxh-list-t:猜你喜欢内容图片 */
#cnxh #cnxh-xm #cnxh-list li .cnxh-list-t{
width: 220px;
/* border: blue 1px solid; */
height: 124px;
overflow: hidden;
}
#cnxh #cnxh-xm #cnxh-list li .cnxh-list-t>img {
width: 220px;
}
#cnxh #cnxh-xm #cnxh-list li .cnxh-list-t>img:hover {
width: 220px;
transform: scale(1.5);
}
#cnxh #cnxh-xm #cnxh-list li:nth-of-type(5) {
margin-right: 0px;
}
/* cnxh-dy:第一行 */
#cnxh #cnxh-xm #cnxh-list li .cnxh-dy {
text-decoration: none;
color: black;
font-size: 14px;
margin-left: 10px;
display: block;
height: 17px;
width: 220px;
overflow: hidden;
margin-top: 10px;
}
#cnxh #cnxh-xm #cnxh-list li .cnxh-dy:hover {
color: #52e2c0
}
/* cnxh-de:第二行 */
#cnxh #cnxh-xm #cnxh-list li .cnxh-de {
text-decoration: none;
color: black;
font-size: 13px;
margin-left: 10px;
margin-bottom: 20px;
display: block;
margin-top: 10px;
}
#cnxh #cnxh-xm #cnxh-list li .cnxh-de:hover {
color: #52e2c0
}
/* cnxh-xm-t:猜你喜欢模块下面图片 */
#cnxh #cnxh-xm-t{
width: 1002px;
height: 84px;
margin: 0 auto;
}
/* -----------------------------------------低部---------------------------------------------- */
/* db:底部 */
#db{
}
/* dbnr:底部内容 */
#db #dbnr{
width: 100%;
height: 200px;
background-color: black;
}
/* dbnr-list:底部内容上面列表 */
#db #dbnr #dbnr-list{
width: 600px;
height: 100px;
line-height: 100px;
/* border: red 1px solid; */
margin: 0 auto;
}
#db #dbnr #dbnr-list li{
float: left;
width: 100px;
height: 100px;
/* border: yellow 1px solid; */
text-align: center;
line-height: 100px;
}
#db #dbnr #dbnr-list li a{
text-decoration: none;
color: #575555;
font-size: 17px;
}
#db #dbnr #dbnr-list li a:hover{
color: #52e2c0;
}
/* dbnr-dy:底部内容第一行 */
#db #dbnr #dbnr-dy{
width: 1030px;
height: 30px;
line-height: 30px;
/* border: green 1px solid; */
margin: 0 auto;
}
#db #dbnr #dbnr-dy a{
text-decoration: none;
color: #575555;
font-size: 17px;
}
#db #dbnr #dbnr-dy a:hover{
color: #52e2c0;
}
/* dbnr-de:底部内容第二行 */
#db #dbnr #dbnr-de{
width: 1280px;
height: 30px;
line-height: 30px;
/* border: green 1px solid; */
margin: 0 auto;
}
#db #dbnr #dbnr-de a{
text-decoration: none;
color: #575555;
font-size: 17px;
}
#db #dbnr #dbnr-de a:hover{
color: #52e2c0;
}