练习（仿网易云）

最新推荐文章于 2024-07-12 14:38:32 发布
最新推荐文章于 2024-07-12 14:38:32 发布
阅读量200 收藏
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54195672/article/details/121693297
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./css/recent.css"> -->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/1.css">
    <link rel="stylesheet" href="./css/css2.css">
    <link rel="stylesheet" href="./css/head.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/2.css">
    <link rel="stylesheet" href="./css/3.css">
</head>

<body>
    <!-- 头部 -->
    <div class="m-top">
        <div class="top-dir">
           <div class="top-logo"><a href=""></a></div>
           <div class="top-dock">
               <ul>
                   <li><a href="">发现音乐<span class="cor">&nbsp;</span></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="">下载客户端 <span class="lb-down">&nbsp</span> </a></li>
               </ul>
           </div>
    
           <div class="top-user">
               <div class="top-userfangda">
                   <img src="./img/fangda.png" alt="">
               </div>
               <div class="top-srch">
                   <input type="text">
               </div>
           </div>
    
           <div class="top-au">
               <a href="" class="topvd">创作者中心</a>
               <a href="" class="login">登录</a>
           </div>
    
        </div>
    </div>
    
    <div class="m-topr">
        <div class="topr-dock">
            <ul>
                <li>推荐</li>
                <li>排行榜</li>
                <li>歌单</li>
                <li>主播电台</li>
                <li>歌手</li>
                <li>新碟上架</li>
            </ul>
    
        </div>
    </div>
    
    <div></div>
    <div class="lunbo-fa">
        <div class="swiper-container" id="swiper-container1" style="z-index: 1; ">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./img/banner01.png" alt=""></div>
                <div class="swiper-slide"><img src="./img/banner02.png" alt=""></div>
                <div class="swiper-slide"><img src="./img/banner03.png" alt=""></div>
                <div class="swiper-slide"><img src="./img/banner04.png" alt=""></div>
                <div class="swiper-slide"><img src="./img/banner05.png" alt=""></div>
                <div class="swiper-slide"><img src="./img/banner06.png" alt=""></div>
                <div class="swiper-slide"><img src="./img/banner07.png" alt=""></div>
                <div class="swiper-slide"><img src="./img/banner08.png" alt=""></div>
            </div>
            <!-- 分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 导航按钮 -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <!-- 导航条 -->
            <div class="swiper-scrollbar"></div>
        </div>
    
        <div class="swiper-container" id="swiper-container2" style="z-index: 0; ">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./img/bannerg1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/bannerg1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/bannerg3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/bannerg4.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/bannerg5.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/bannerg6.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/bannerg7.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/bannerg8.jpg" alt=""></div>
            </div>
        </div>
        <div class="swiper-container" id="swiper-container2" style="z-index: 0; ">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./img/bannerg1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/bannerg1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/bannerg3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/bannerg4.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/bannerg5.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/bannerg6.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/bannerg7.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/bannerg8.jpg" alt=""></div>
            </div>
        </div>
    
    </div>
    
    
    
    <script src="js/swiper.min.js"></script>
     <script>
     var swiper = new Swiper('.swiper-container',{
             loop:true,
             autoplay:true,
             navigation: {
             nextEl: '.swiper-button-next',
             prevEl: '.swiper-button-prev',
             },
             pagination: {
             el: '.swiper-pagination',
             clickable: true,
     },
     });
    
     var mySwiper1 = new Swiper('#swiper-container1', {
      prevButton:'.swiper-button-prev',
      nextButton:'.swiper-button-next',
    })
    var mySwiper2 = new Swiper('#swiper-container2', {
    })
    mySwiper1.params.control = mySwiper2; //需要在Swiper2初始化后，Swiper1控制Swiper2
    mySwiper2.params.control = mySwiper1; //需要在Swiper1初始化后，Swiper2控制Swiper1
    
     </script>
    
    <div class="all">
        <!-- 左侧 -->
        <div class="first-hd clear">
            <!-- 左侧 第一层 -->
            <div class="se-hd">
                <div class="hd clear">
                    <a href="" class="hd-a">热门推荐</a>
                    <div class="hd-div class">
                        <a href="">华语</a>
                        <a href="">流行</a>
                        <a href="">摇滚</a>
                        <a href="">民谣</a>
                        <a href="">电子</a>
                    </div>
                    <a href=""><span class="hd-span">更多 →</span> </a>
                </div>
                <ul class="clear">
                    <li>
                        <div>
                            <a href="" title="私人雷达 | 根据听歌记录为你打造"><img src="./img/music1.jpg"></a>
                            <div class="bottom">
                                <a href=""><img class="player" src="./img/play.png" alt=""></a>
                            </div>
                        </div>
                        <p>
                            <a href="">私人雷达 | 根据听歌记录为你打造</a>
                        </p>
                    </li>
                    <li>
                        <div>
                            <a href="" title="Trap Rap R&B"><img src="./img/music2.jpg"></a>
                            <div class="bottom">
                                <a href=""><img class="player" src="./img/play.png" alt=""></a>
                            </div>
                        </div>
                        <p>
                            <a href="">Trap Rap R&B</a>
                        </p>
                    </li>
                    <li>
                        <div>
                            <a href="" title="辣妹平时都在听什么？"><img src="./img/music3.jpg"></a>
                            <div class="bottom">
                                <a href=""><img class="player" src="./img/play.png" alt=""></a>
                            </div>
                        </div>
                        <p>
                            <a href="">辣妹平时都在听什么？</a>
                        </p>
                    </li>
                    <li>
                        <div>
                            <a href="" title="薛之谦精选"><img src="./img/music4.jpg"></a>
                            <div class="bottom">
                                <a href=""><img class="player" src="./img/play.png" alt=""></a>
                            </div>
                        </div>
                        <p>
                            <a href="">薛之谦精选</a>
                        </p>
                    </li>
                    <li>
                        <div>
                            <a href="" title="浪漫宿醉深蓝海底"><img src="./img/music5.jpg"></a>
                            <div class="bottom">
                                <a href=""><img class="player" src="./img/play.png" alt=""></a>
                            </div>
                        </div>
                        <p>
                            <a href="">浪漫宿醉深蓝海底</a>
                        </p>
                    </li>
                    <li>
                        <div>
                            <a href="" title="那些评论过万的粤语歌曲"><img src="./img/music6.jpg"></a>
                            <div class="bottom">
                                <a href=""><img class="player" src="./img/play.png" alt=""></a>
                            </div>
                        </div>
                        <p>
                            <a href="">那些评论过万的粤语歌曲</a>
                        </p>
                    </li>
                    <li>
                        <div>
                            <a href="" title="Beyond金曲"><img src="./img/music7.jpg"></a>
                            <div class="bottom">
                                <a href=""><img class="player" src="./img/play.png" alt=""></a>
                            </div>
                        </div>
                        <p>
                            <a href="">Beyond金曲</a>
                        </p>
                    </li>
                    <li>
                        <div>
                            <a href="" title="永远年轻永远热泪盈眶"><img src="./img/music8.jpg"></a>
                            <div class="bottom">
                                <a href=""><img class="player" src="./img/play.png" alt=""></a>
                            </div>
                        </div>
                        <p>
                            <a href="">永远年轻永远热泪盈眶</a>
                        </p>
                    </li>
                </ul>
            </div>
            <!-- 左侧 第二层 -->
            <div class="sefloor clear">
                <div class="hd clear">
                    <a href="" class="hd-a">个性化推荐</a>
                </div>
                <ul class="clear">
                    <li>
                        <div>
                            <a href="" title="私人雷达 | 根据听歌记录为你打造"><img src="./img/music1.jpg"></a>
                            <div class="bottom">
                                <a href=""><img class="player" src="./img/play.png" alt=""></a>
                            </div>
                        </div>
                        <p>
                            <a href="">私人雷达 | 根据听歌记录为你打造</a>
                        </p>
                    </li>
                    <li>
                        <div>
                            <a href="" title="不知名选手au"><img src="./img/s1.jpg"></a>
                            <div class="bottom">
                                <a href=""><img class="player" src="./img/play.png" alt=""></a>
                            </div>
                        </div>
                        <p>
                            <a href="">不知名选手au</a>
                        </p>
                    </li>
                    <li>
                        <div>
                            <a href="" title="辣妹平时都在听什么？"><img src="./img/music3.jpg"></a>
                            <div class="bottom">
                                <a href=""><img class="player" src="./img/play.png" alt=""></a>
                            </div>
                        </div>
                        <p>
                            <a href="">辣妹平时都在听什么？</a>
                        </p>
                    </li>
                    <li>
                        <div>
                            <a href="" title="一个双子座的听歌列表"><img src="./img/s2.jpg"></a>
                            <div class="bottom">
                                <a href=""><img class="player" src="./img/play.png" alt=""></a>
                            </div>
                        </div>
                        <p>
                            <a href="">一个双子座的听歌列表</a>
                        </p>
                    </li>
                </ul>
            </div>
            <!-- 左侧第三层 -->
            <div class="n-bill clear">
                <div class="hd clear">
                    <a href="" class="hd-a">榜单</a>
                    
                    <a href=""><span class="hd-span">更多 </span> </a>
                </div>
                <div class="n-bilst" id="top-flag">
                    <dl class="blk">
                        <dt class="top">
                            <div class="cver u-cover u-cover-4">
                                <img src="./img/（1）.jpg" alt="">
                                <a href="" class="msk" title="飙升榜"></a>
                            </div>
                            <div class="tit">
                                <a href="" title="飙升榜">
                                    <h3 class="f-fs1 f-thide">飙升榜</h3>
                                </a>
                                <div class="btn">
                                    <a href="" class="s-bg s-bg-9 f-tdn">播放</a>
                                    <a href="" class="s-bg s-bg-10 f-tdn subscribe-flag" title="收藏">收藏</a>
                                </div>
                            </div>
                        </dt>
                        <dd>
                            <ol>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no no-top">1</span> -->
                                    <a href="/song?id=1899079967" class="nm s-fc0 f-thide" title="问心">问心</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1899079967" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1899079967" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1899079967"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no no-top">2</span> -->
                                    <a href="/song?id=1873049720" class="nm s-fc0 f-thide" title="初恋">初恋</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1873049720" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1873049720" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1873049720"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no no-top">3</span> -->
                                    <a href="/song?id=1868874994" class="nm s-fc0 f-thide" title="心动">心动</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1868874994" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1868874994" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1868874994"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no">4</span> -->
                                    <a href="/song?id=1886371886" class="nm s-fc0 f-thide" title="百年孤寂">百年孤寂</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1886371886" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1886371886" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1886371886"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no">5</span> -->
                                    <a href="/song?id=1890494798" class="nm s-fc0 f-thide"
                                        title="Enemy (from the series Arcane League of Legends)">Enemy (from the series
                                        Arcane
                                        League of Legends)</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1890494798" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1890494798" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1890494798"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no">6</span> -->
                                    <a href="/song?id=1895330088" class="nm s-fc0 f-thide" title="予你">予你</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1895330088" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1895330088" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1895330088"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no">7</span> -->
                                    <a href="/song?id=1814636483" class="nm s-fc0 f-thide" title="艺术家">艺术家</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1814636483" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1814636483" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1814636483"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no">8</span> -->
                                    <a href="/song?id=1899473139" class="nm s-fc0 f-thide"
                                        title="CartierMafia">CartierMafia</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1899473139" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1899473139" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1899473139"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no">9</span> -->
                                    <a href="/song?id=1893592988" class="nm s-fc0 f-thide"
                                        title="もしも命が描けたら">もしも命が描けたら</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1893592988" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1893592988" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1893592988"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no">10</span> -->
                                    <a href="/song?id=1896102097" class="nm s-fc0 f-thide" title="神魂颠倒">神魂颠倒</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1896102097" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1896102097" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1896102097"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                            </ol>
                            <div class="more">
                                <a href="" class="s-fc0">查看全部&gt;</a>
                            </div>
                        </dd>
                    </dl>
                    <dl class="blk">
                        <dt class="top">
                            <div class="cver u-cover u-cover-4">
                                <img src="./img/飙歌.jpg" alt="" class="j-img">
                                <a href="" class="msk" title="新歌榜"></a>
                            </div>
                            <div class="tit">
                                <a href="" title="新歌榜">
                                    <h3 class="f-fs1 f-thide">新歌榜</h3>
                                </a>
                                <div class="btn">
                                    <a href="" class="s-bg s-bg-9 f-tdn" title="播放">播放</a>
                                    <a href="" class="s-bg s-bg-10 f-tdn subscribe-flag" title="收藏">收藏</a>
                                </div>
                            </div>
                        </dt>
                        <dd>
                            <ol>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no no-top">1</span> -->
                                    <a href="/song?id=1899079967" class="nm s-fc0 f-thide" title="删了吧">删了吧</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1899079967" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1899079967" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1899079967"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no no-top">2</span> -->
                                    <a href="/song?id=1873049720" class="nm s-fc0 f-thide" title="漠河舞厅">漠河舞厅</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1873049720" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1873049720" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1873049720"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no no-top">3</span> -->
                                    <a href="/song?id=1868874994" class="nm s-fc0 f-thide" title="予你">予你</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1868874994" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1868874994" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1868874994"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no">4</span> -->
                                    <a href="/song?id=1886371886" class="nm s-fc0 f-thide" title="指纹">指纹</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1886371886" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1886371886" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1886371886"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no">5</span> -->
                                    <a href="/song?id=1890494798" class="nm s-fc0 f-thide" title="靠近">靠近</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1890494798" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1890494798" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1890494798"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no">6</span> -->
                                    <a href="/song?id=1895330088" class="nm s-fc0 f-thide" title="问心">问心</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1895330088" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1895330088" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1895330088"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no">7</span> -->
                                    <a href="/song?id=1814636483" class="nm s-fc0 f-thide" title="两个你">两个你</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1814636483" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1814636483" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1814636483"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no">8</span> -->
                                    <a href="/song?id=1899473139" class="nm s-fc0 f-thide" title="秒针">秒针</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1899473139" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1899473139" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1899473139"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no">9</span> -->
                                    <a href="/song?id=1893592988" class="nm s-fc0 f-thide" title="两个自己">两个自己</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1893592988" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1893592988" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1893592988"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no">10</span> -->
                                    <a href="/song?id=1896102097" class="nm s-fc0 f-thide" title="哭泣站台">哭泣站台</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1896102097" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1896102097" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1896102097"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                            </ol>
                            <div class="more">
                                <a href="" class="s-fc0">查看全部&gt;</a>
                            </div>
                        </dd>
                    </dl>
                    <dl class="blk blk-1">
                        <dt class="top">
                            <div class="cver u-cover u-cover-4">
                                <img src="./img/原创.jpg" alt="">
                                <a href="" class="msk" title="原创榜"></a>

                            </div>
                            <div class="tit">
                                <a href="" title="原创榜">
                                    <h3 class="f-fs1 f-thide">原创榜</h3>
                                </a>
                                <div class="btn">
                                    <a href="" class="s-bg s-bg-9 f-tdn" title="播放">播放</a>
                                    <a href="" class="s-bg s-bg-10 f-tdn subscribe-flag " title="收藏">收藏</a>
                                </div>
                            </div>
                        </dt>
                        <dd>
                            <ol>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no no-top">1</span> -->
                                    <a href="/song?id=1899079967" class="nm s-fc0 f-thide" title="我的样子">我的样子</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1899079967" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1899079967" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1899079967"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no no-top">2</span> -->
                                    <a href="/song?id=1873049720" class="nm s-fc0 f-thide" title="将进酒·见千山">将进酒·见千山</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1873049720" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1873049720" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1873049720"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no no-top">3</span> -->
                                    <a href="/song?id=1868874994" class="nm s-fc0 f-thide" title="忘了吧">忘了吧</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1868874994" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1868874994" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1868874994"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no">4</span> -->
                                    <a href="/song?id=1886371886" class="nm s-fc0 f-thide" title="渔">渔</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1886371886" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1886371886" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1886371886"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no">5</span> -->
                                    <a href="/song?id=1890494798" class="nm s-fc0 f-thide" title="小酒馆">小酒馆</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1890494798" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1890494798" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1890494798"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no">6</span> -->
                                    <a href="/song?id=1895330088" class="nm s-fc0 f-thide" title="是谁">是谁</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1895330088" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1895330088" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1895330088"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no">7</span> -->
                                    <a href="/song?id=1814636483" class="nm s-fc0 f-thide" title="十万个为什么">十万个为什么</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1814636483" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1814636483" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1814636483"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no">8</span> -->
                                    <a href="/song?id=1899473139" class="nm s-fc0 f-thide" title="You don't love me">You
                                        don't love me</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1899473139" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1899473139" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1899473139"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no">9</span> -->
                                    <a href="/song?id=1893592988" class="nm s-fc0 f-thide" title="说几遍">说几遍</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1893592988" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1893592988" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1893592988"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                                <li onmouseover="this.className='z-hvr'" onmouseout="this.className=''">
                                    <!-- <span class="no">10</span> -->
                                    <a href="/song?id=1896102097" class="nm s-fc0 f-thide" title="又到了星期天">又到了星期天</a>
                                    <div class="oper">
                                        <a href="#" class="s-bg s-bg-11" title="播放" hidefocus="true" data-res-type="18"
                                            data-res-id="1896102097" data-res-action="play" data-res-from="31"
                                            data-res-data="19723756"></a>
                                        <a href="#" class="u-icn u-icn-81" title="添加到播放列表" hidefocus="true"
                                            data-res-type="18" data-res-id="1896102097" data-res-action="addto"
                                            data-res-from="31" data-res-data="19723756"></a>
                                        <a href="#" class="s-bg s-bg-12" title="收藏" hidefocus="true" data-res-level="0"
                                            data-res-fee="8" data-res-type="18" data-res-id="1896102097"
                                            data-res-action="subscribe"></a>
                                    </div>
                                </li>
                            </ol>
                            <div class="more">
                                <a href="" class="s-fc0">查看全部&gt;</a>
                            </div>
                        </dd>
                    </dl>
                </div>

            </div>
        </div>
        <!-- 右侧  -->
        <div class="right-floor clear">
            <!-- 右1 -->
            <div>
                <div class="right-div">
                    <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                    <a href="" class="right-a">用户登录</a>
                </div>
            </div>
            <!-- 右2  -->
            <div class="right-div2 clear">
                <h3>
                    <span>入驻歌手</span>
                    <a href="">查看全部></a>
                </h3>
                <ul>
                    <li>
                        <a href="" class="right-a2 clear">
                            <div>
                                <img src="./img/p1.png">
                            </div>
                            <div>
                                <h4 class="right-h4">张惠妹aMEI</h4>
                                <span>台湾歌手张惠妹</span>
                            </div>
                        </a></li>
                    <li>
                        <a href="" class="right-a2">
                            <div>
                                <img src="./img/p2.jpg">
                            </div>
                            <div>
                                <h4 class="right-h4">Fine乐团</h4>
                                <span>独立音乐人</span>
                            </div>
                        </a></li>
                    <li>
                        <a href="" class="right-a2">
                            <div>
                                <img src="./img/p3.jpg">
                            </div>
                            <div>
                                <h4 class="right-h4">萬曉利</h4>
                                <span>民谣歌手</span>
                            </div>
                        </a></li>
                    <li>
                        <a href="" class="right-a2">
                            <div>
                                <img src="./img/p4.jpg">
                            </div>
                            <div>
                                <h4 class="right-h4">音乐人赵雷</h4>
                                <span>民谣歌手</span>
                            </div>
                        </a></li>
                    <li>
                        <a href="" class="right-a2">
                            <div>
                                <img src="./img/p5.jpg">
                            </div>
                            <div>
                                <h4 class="right-h4">王三溥</h4>
                                <span>音乐人</span>
                            </div>
                        </a></li>
                </ul>
            </div>
            <!-- 右3  -->
            <div class="n-dj n-dj-1 clear"></div>
            <h3 class="v-hd3">热门主播</h3>
            <ul class="n-hotdj f-cb" id="hotdj-list">
                <li>
                    <a href="/user/home?id=278438485" class="cver"><img class="j-img" src="./img/a.jpg"
                            data-src="http://p1.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40"></a>
                    <div class="info">
                        <p><a href="/user/home?id=278438485" class="nm-icn f-thide s-fc0">陈立</a> </p>
                        <p class="f-thide s-fc3">心理学家、美食家陈立教授</p>
                    </div>
                </li>
                <li>
                    <a href="/user/home?id=559210341" class="cver"><img class="j-img" src="./img/b.jpg"
                            data-src="http://p1.music.126.net/GgXkjCzeH4rqPCsrkBV1kg==/109951164843970584.jpg?param=40y40"></a>
                    <div class="info">
                        <p><a href="/user/home?id=559210341" class="nm-icn f-thide s-fc0">刘维-Julius</a> </p>
                        <p class="f-thide s-fc3">歌手、播客节目《维维道来》主理人</p>
                    </div>
                </li>
                <li>
                    <a href="/user/home?id=259292486" class="cver"><img class="j-img" src="./img/c.jpg"
                            data-src="http://p1.music.126.net/C8jFbOTjUOnTKEHX6uuzOg==/109951166239584597.jpg?param=40y40"></a>
                    <div class="info">
                        <p><a href="/user/home?id=259292486" class="nm-icn f-thide s-fc0">莫非定律MoreFeel</a> </p>
                        <p class="f-thide s-fc3">男女双人全创作独立乐团</p>
                    </div>
                </li>
                <li>
                    <a href="/user/home?id=1450418799" class="cver"><img class="j-img" src="./img/d.jpg"
                            data-src="http://p1.music.126.net/NHjNoFpLDEZ-3OR9h35z1w==/109951165825466770.jpg?param=40y40"></a>
                    <div class="info">
                        <p><a href="/user/home?id=1450418799" class="nm-icn f-thide s-fc0">碎嘴许美达</a> </p>
                        <p class="f-thide s-fc3">脱口秀网络红人</p>
                    </div>
                </li>
                <li>
                    <a href="/user/home?id=2688170" class="cver"><img class="j-img" src="./img/e.jpg"
                            data-src="http://p1.music.126.net/CpUdHPNvBvN7kebvL21TTA==/109951163676573083.jpg?param=40y40"></a>
                    <div class="info">
                        <p><a href="/user/home?id=2688170" class="nm-icn f-thide s-fc0">银临Rachel</a> </p>
                        <p class="f-thide s-fc3">古风音乐人</p>
                    </div>
                </li>
            </ul>

        </div>
    </div>
<!-- 尾巴 -->
<div class="g-ft">
    <div class="m-ft">
        <div class="wrap f-cb">
            <div class="copy">
                <p class="link" id="music-link">
                    <a href="" target="_blank" class="item s-fc4 ">服务条款</a>
                    <span class="line">|</span>
                    <a href="" target="_blank" class="item s-fc4 ">隐私政策</a>
                    <span class="line">|</span>
                    <a href="" trget="_blank" class="item s-fc4 ">儿童隐私政策</a>
                    <span class="aline">|</span>
                    <a href="" target="_blank" class="item s-fc4 ">版权控诉指引</a>
                    <span class="line">|</span>
                    <a href="" target="_blank" class="item s-fc4 ">意见反馈</a>
                    <span class="line">|</span>
                    <a href="" target="_blank" class="item s-fc4 ">广告合作</a>
                </p>
                <p class="right s-fc3">
                    <span class="sep span">网易公司版权所有©1997-2021</span>
                    <span class="span">杭州乐读科技有限公司运营：</span>
                    <a href="">浙网文[2021] 1186-054号</a>
                </p>
                <p class="contact s-fc3">
                    <span class="sep span">违法和不良信息举报电话：0571-89853516</span>
                    <span class="span">举报邮箱：</span>
                    <a href="">ncm5990@163.com</a>
                </p>
                <p class="right s-fc3">
                    <a href="">粤B2-20090191-18&nbsp;&nbsp;工业和信息化部备案管理系统网站</a>
                    <span class="police-logo"></span>
                    <span class="police-text">浙公网安备 33010902002564</span>
                </p>
            </div>
            <ul class="enter f-fr">
                <li class="unit">
                    <a class="logo logonew logo-amped d-tid" href="" target="_blank"></a>
                    <span class="tt tt-amped"></span>
                </li>
                <li class="unit">
                    <a class="logo logonew logo-auth d-tid" href="" target="_blank"></a>
                    <span class="tt tt-auth"></span>
                </li>
                <li class="unit">
                    <a class="logo logonew logo-musician d-tid" href="" target="_blank"></a>
                    <span class="tt tt-musician"></span>
                </li>
                <li class="unit">
                    <a class="logo logonew logo-reward d-tid" href="" target="_blank"></a>
                    <span class="tt tt-reward"></span>
                </li>
                <li class="unit">
                    <a class="logo logonew logo-cash d-tid" href="" target="_blank"></a>
                    <span class="tt tt-cash"></span>
                </li>
            </ul>
        </div>
    </div>
</div>




</body>

</html>

杜兰特小迷弟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用HTML+CSS仿网易云音乐网站(6个页面)_实训素材
qq_524614081的博客
11-17 1502
HTML+CSS大作业 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
尚硅谷微信小程序开发 仿网易云音乐App 小程序 后端接口服务器搭建
LlanyW的专栏
06-15 4891
配置好之后最后返回值是，然后你看看你对应的手机上应该就收到网易云登录的验证码，就oK,可以执行下一步，手机号加验证码登录了。启动postman，我们单独创建一个项目列表给网易云，做完一个操作记得点一个：Save，把配置保存下来。老师的服务器 接口有些用不了，可以使用了Git上最新比较start多公开的项目，也是nodejs服务。配置完成之后，要在对应的项目右侧下拉选择刚刚配置全局变量列表，不选的话，配置url用不了的。接口文档说明有好几种，我用我觉得最方便的方式登录，2个步骤。
高仿网易云音乐(vue实战项目)
热门推荐
qq_39839903的博客
10-29 1万+
高仿网易云音乐(Vue实战项目) ???? 仅供学习使用开发的高仿网易云音乐的完整项目~! 仅供个人学习~! 群号:970804317 下面也会有二维码 请务必将文档看完, 很多问题都可以在文档中找到解决,也可以加入群一起交流, B站预览 图片预览在楼下 Github地址 API地址 技术栈 VueCli ElementUi Vue 主要功能 网易云音乐官方热门榜单的banner轮播图 个性推荐模块, 歌单推荐模块, 歌单排行榜 歌手推荐信息, 独家放送模块 ,最新音乐模块 登录模块(网易账
仿网易云音乐项目总结 (vue全家桶)
whoami138的博客
08-09 4970
仿网易云音乐项目总结 1、前言 这个项目是我5月份做的项目了，之前一直没心也没空总结，趁现在暑期比较闲，写篇博客记录一下！ 本项目基于vue全家桶+elementui开发的前端项目。主要实现了页面基本样式，播放，歌词，歌单，专辑，歌手，视频，搜索，登录，注册，收藏，评论，下载，分类等功能，基本把我平时用到的功能都实现了。之前学习vue都是一直跟着视频敲的，所以出于学习和练手的目的，做了这个项目，这也是我真正意义上的第一个独立的项目哈哈哈。欢迎大家一起讨论学习！ 2、项目效果展示 图片展示
Flutter 仿网易云音乐App
ljq5945的博客
10-08 1049
图 首页 歌曲播放和卡片切换 如正版一样，歌曲播放进度在播放/暂停 按钮的边框显示（页面下方，由黑变红） 没登录的话，一般只能听12秒 目前只做了 模块（‘超带感的说唱精选’）的点播功能， 其他地方可以直接套用（1、2行代码即可），控制台已经写好 卡片（音乐日历）切换动画也是仿照正版来 个人中心和抽屉（未登录） 云村 视频（未登录） 视频模块需要登录才能看到 波纹动画依然是仿照正版的 登录 视频（已登录） 登录前后页面变化 我们看一下，我的、抽屉页面的前后差异 再退出一下 ‘切
【笔记】React Native实战练习(仿网易云游戏网页移动端)
JackyCheung
02-02 746
准备工作：直接在前面两篇笔记的项目基础上，然后随便找了个网易云游戏网页（在Google浏览器上打开调试模式，选择手机模式，网易云游戏网页正好有适配移动端）。在组件里直接拿不到navigation，当前做法是用React props组件传数据，将Home.tsx里的navigation向组件往下传。# 那如果组件里的组件，嵌套N层呢，这个需要如何处理呢？首先先看下四个模块目标原效果，当前项目本打算依赖Ant Design Mobile，看看不借助其他UI框架能碰到哪些问题。
谈谈微信小程序仿网易云音乐有关播放的那些事儿
yu850110183的博客
09-09 3052
前言 笔者前端小兵一枚，在学习了一段时间的小程序后，决定亲自动手做一款模仿一款手机软件来练手，自己平常也热爱音乐，并且发现各家的音乐平台的小程序都比较简单，于是就选择了这个方向来进行模仿学习，在这个过程中也遇到了很多问题，在解决这些问题后，也有了一些收获，今天就来和大家分享在这个小程序中，最难的音乐播放这一部分的种种问题和解决。 首先，先感谢本项目的api提供者binaryify 选择这个项目，也是因为后端api有大佬提供了，需要数据的时候只用发起一些接口请求就可以了，比较适合像我这样的初学者入门，只用写一
视频教程-Android仿网易云音乐播放器-Android
weixin_33367235的博客
05-28 1021
Android仿网易云音乐播放器 从事多年Android软件开发及智能家居方...
移动应用开发——仿网易云音乐学习心得（uni-app框架）
2301_78079775的博客
05-25 381
uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。uni-app官网是uni-app开发者的官方信息来源和技术支持中心，对于学习和使用uni-app的开发者来说，是必不可少的资源。提供uni-app的官方文档，包括开发指南、API文档等，方便开发者学习和使用uni-app。
html+css纯静态页面练习：仿网易云
08-24
包含网易云首页和网易云商城两个页面
HTML作业-仿网易云音乐项目
04-29
在这个“HTML作业-仿网易云音乐项目”中，我们可以深入探讨HTML在构建交互式音乐应用中的运用。 首先，HTML是网页的基础，用于定义页面结构。在这个项目中，HTML元素被用来创建各种组件，如播放器界面、音乐列表、...
Flutter实现的仿网易云音乐项目
08-10
【Flutter实现的仿网易云音乐项目】是一个使用Google的Flutter框架构建的移动应用程序示例，旨在重现网易云音乐的用户界面和功能。Flutter是Google推出的一款用于开发原生Android和iOS应用的开源UI工具包，它以其...
webmusic:React+react-router-dom+react-redux+antd高仿网易云web端
05-05
本项目使用react+react-router-dom + react-redux + antd模仿网易云音乐web端 antd 使用了 Icon图标 Message提示 以及分页组件， 大量动画均为自己所写。 首页轮播滚动等也都是自己完成。 音频播放兄弟组件传参使用...
Vue-NeteaseCloud-WebMusicApp:Vue高仿网易云音乐，基本实现网易云所有音乐，MV相关功能，转变更新到第二版，仅用于学习，下面有详细教程
03-18
Vue-NeteaseCloud-WebMusicApp-高仿网易云音乐推荐项目：本人新写了一个Vue组件库，目前已写20+组件，每个组件都有详细的API文档，。觉得不错的可以去仓库查看。前言肝代码不易，本项目还是比较能拿的出手的，若是在...
scss概念及使用
m0_74293254的博客
07-10 1136
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1242
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
css 自定义变量 var()
Z_Wonderful的博客
07-10 206
css的一个函数：`var()`，此函数在有些场景下能优化不少代码量。
css画半圆&&画圆弧
最新发布
M1512415的博客
07-12 192
【代码】css画半圆&&画圆弧。
html仿网易云音乐
12-03
通过HTML、CSS和JavaScript的组合，我们可以实现一个简单的仿网易云音乐的网页。当然，要实现完整的功能，还需要后端服务器和数据库来存储音乐文件和用户信息。但通过HTML仿制网易云音乐的界面是一个有趣的练习，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值