第一次独立完成的静态页面

已于 2023-12-25 21:20:17 修改
阅读量68 收藏
点赞数
分类专栏： 网页制作 前端大项目 文章标签： html5 css
于 2023-11-20 19:49:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57484023/article/details/134517031
版权

 先看看部分页面效果吧

 这个项目我个人觉得还是很简单的大部分都是重复的代码

只用到了前端的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="&nbsp;&nbsp;&nbsp;&nbsp;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="#">&nbsp;&nbsp;&nbsp;&nbsp;TOP10</a></li>
                    <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;看音乐</a></li>
                    <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;密谈室</a></li>
                    <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;有话说</a></li>
                    <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;特别企划</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榜有话 &nbsp;&nbsp;说</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的艺能时光机 花絮特辑 &nbsp;&nbsp;未公开片段大放送</a></p>
                            <p class="zzjm-nry-nr-p"><a href="#" class="zzjm-nry-nr">Eva的艺能时光机人生首次迷你 &nbsp;&nbsp;粉丝见面会</a></p>
                            <p class="zzjm-nry-nr-p"><a href="#" class="zzjm-nry-nr">Eva的艺能时光机工作人员身份 &nbsp;&nbsp;体验</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 &copy; 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;
}

努力的小陈^O^
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值