Bootstrap

HTML期末学生大作业-最新QQ音乐、网易云音乐、酷狗音乐、虾米音乐、咪咕音乐网站html+css+javascript

 QQ音乐-部分网页截图-学生HTML+CSS+JS期末作业

IT-精英联盟CSDN期末作业

 QQ音乐-部分源码截图-学生HTML+CSS+JS期末作业

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ音乐-千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台!</title>
    <!-- 引入标题图标文件 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 引入主页 CSS 文件 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入公共样式 CSS 文件 -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="./css/ycCSS.css">
</head>

<body>
    <!-- 头部区域开始 -->
    <header>
        <div class="container w">
            <div class="t">
                <h4 class="logo"><a href="./index.html"><img src="images/logo.png" alt=""></a></h4>
                <div class="top_nav">
                    <ul>
                        <li><a href="./index.html" class="hover">音乐馆</a></li>
                        <li><a href="./lb/lb/mymusic.html">我的音乐</a></li>
                        <li class="client_hover">
                            <a href="./yc/download/index.html">
                                客户端<i></i>
                            </a>
                            <div class="client">
                                <div class="client_cont">
                                    <p><em></em> HQ高品质 全员开启</p>
                                    <p><em></em> 独家音效 全面升级</p>
                                    <p><em></em> 轻盈视觉 动态皮肤</p>
                                    <a href="./ch/download/download.html">下载体验</a>
                                </div>
                            </div>
                        </li>
                        <li><a href="./artists/index.html" target="_bank">开放平台</a></li>
                        <li><a href="./lb/vipportal/yearvip.html">VIP</a></li>
                    </ul>
                </div>
                <div class="top_search">
                    <input type="text" name="" id="" placeholder="搜索音乐、MV、歌单、用户">
                    <button><i class="search_button sprite"></i></button>
                </div>
                <div class="login">
                    <div class="login_btn">
                        <a href="javascript:;">登录</a>
                    </div>
                    <div class="vip_select">
                        <a href="./lb/vipportal/yearvip.html">开通VIP<i></i></a>
                        <ul class="vip_hover">
                            <li><a href="./lb/vipportal/yearvip.html" style="border-bottom: 0;">开通绿钻豪华版</a></li>
                            <li><a href="./yc/download/fufeibao.html">开通付费包</a></li>
                        </ul>
                    </div>
                    <div class="charge_select">
                        <a href="javascript:;">充值<i></i></a>
                        <ul class="vip_hover cz">
                            <li><a href="javascript:;" style="border-bottom: 0;">购买乐币</a></li>
                            <li><a href="javascript:;">充值饭票</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="b">
                <ul>
                    <li><a href="./index.html" style="color: #31c27c">首页</a></li>
                    <li><a href="./hyh/singer_list/singer.html">歌手</a></li>
                    <li><a href="./lb/lb/album.html">新碟</a></li>
                    <li><a href="./yjx/toplist/index.html">排行榜</a></li>
                    <li><a href="./hyh/category/songmenu.html">分类歌单</a></li>
                    <li><a href="./hyh/radio/fm.html">电台</a></li>
                    <li><a href="./yc/mvlist/mvlist.html">MV</a></li>
                    <li><a href="./ch/album_mall/album_mall.html">数字专辑</a></li>
                    <li><a href="./yjx/piaowu/index.html">票务</a></li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 头部区域结束 -->

    <!-- 主体部分开始 -->
    <main>
        <!-- 歌单推荐模块 -->
        <div class="hot-songs" style="margin-top: 10px;">
            <div class="title">
                <h3>歌 单 推 荐</h3>
            </div>
            <div class="hot-songs-content">
                <div class="songs_content w">
                    <div class="list_item">
                        <ul class="gdtj">
                            <li id="gdtj">
                                <a class="gdtj_items" href="javascript:;" style="color: #31c27c">为你推荐</a>
                                <div class="list_item_img gd_hide">
                                    <ul>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/7772849553"><img
                                                    src="images/poster/300.jfif" alt=""><span><i
                                                        class="iconfont">&#xe609;</i></span></a>
                                            <h3><a
                                                    href="https://y.qq.com/n/ryqq/playlist/7772849553">好评999+英文歌!轻松解压100%</a>
                                            </h3>
                                            <span>播放量:2.8亿</span>
                                        </li>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/7947618016"><img
                                                    src="images/poster/300_2.jfif" alt=""><span><i
                                                        class="iconfont">&#xe609;</i></span></a>
                                            <h3><a href="https://y.qq.com/n/ryqq/playlist/7947618016">扎心情歌丨爱到最后终是空欢喜</a>
                                            </h3>
                                            <span>播放量:510.4万</span>
                                        </li>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/7657956467"><img
                                                    src="images/poster/300_3.png" alt=""><span><i
                                                        class="iconfont">&#xe609;</i></span></a>
                                            <h3><a href="https://y.qq.com/n/ryqq/playlist/7657956467">如果词不达意 就把爱藏心里</a>
                                            </h3>
                                            <span>播放量:1645.7万</span>
                                        </li>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/7747451867"><img
                                                    src="images/poster/300_1.jfif" alt=""><span><i
                                                        class="iconfont">&#xe609;</i></span></a>
                                            <h3><a href="https://y.qq.com/n/ryqq/playlist/7747451867">深情片段:深夜
                                                    我还是会想起你</a></h3>
                                            <span>播放量:2663.8万</span>
                                        </li>
                                        <li style="padding:0;">
                                            <a href="https://y.qq.com/n/ryqq/playlist/7537828867"><img
                                                    src="images/poster/300.png" alt=""><span><i
                                                        class="iconfont">&#xe609;</i></span></a>
                                            <h3><a
                                                    href="https://y.qq.com/n/ryqq/playlist/7537828867">「BGM」瞬间起飞逆风翻盘起飞</a>
                                            </h3>
                                            <span>播放量:1756.0万</span>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li id="gdtj">
                                <a href="javascript:;" class="gdtj_items">情歌</a>
                                <div class="list_item_img gd_hide">
                                    <ul>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/4204621746"><img
                                                    src="https://p.qpic.cn/music_cover/yyDR0yDpzJMiauiaIribblrE0oDiae1VgkuqLzFpicvqmnw8Rzm16OFLSdQ/600?n=1"
                                                    alt=""><span><i class="iconfont">&#xe609;</i></span></a>
                                            <h3><a href="https://y.qq.com/n/ryqq/playlist/7772849553">泰式浪漫:你想要的甜蜜幻想</a>
                                            </h3>
                                            <span>播放量:9.5万</span>
                                        </li>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/7947618016"><img
                                                    src="https://p.qpic.cn/music_cover/6aGRubo8UtU3O6E5dy98JoB9AQyLWOxicXAfJNhQP5kWDicQFk7bLjNA/600?n=1"
                                                    alt=""><span><i class="iconfont">&#xe609;</i></span></a>
                                            <h3><a
                                                    href="https://y.qq.com/n/ryqq/playlist/7947618016">【真情流露】2010的声音倾吐芬芳</a>
                                            </h3>
                                            <span>播放量:23.9万</span>

                                        </li>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/7657956467"><img
                                                    src="https://p.qpic.cn/music_cover/xjBX9k8QoGbAUicX1ialfQPNzIP2mImXuqoUnCghicEfEodV7Wt12qTOw/600?n=1"
                                                    alt=""><span><i class="iconfont">&#xe609;</i></span></a>
                                            <h3><a href="https://y.qq.com/n/ryqq/playlist/7657956467">温柔华语 |
                                                    把故事藏在歌中</a>
                                            </h3>
                                            <span>播放量:130.1万</span>


                                        </li>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/7747451867"><img
                                                    src="https://p.qpic.cn/music_cover/PiajxSqBRaELU4F9LZbYqibQVzsNGoa67HYUS9emLUgWU/600?n=1"
                                                    alt=""><span><i class="iconfont">&#xe609;</i></span></a>
                                            <h3><a
                                                    href="https://y.qq.com/n/ryqq/playlist/7747451867">音乐里那些不言而喻的“我爱你”</a>
                                            </h3>
                                            <span>播放量:55.5万</span>
                                        </li>
                                        <li style="padding:0;">
                                            <a href="https://y.qq.com/n/ryqq/playlist/7537828867"><img
                                                    src="https://p.qpic.cn/music_cover/jXFicBvicUcfIWSoCNT1OrbJQYq74ianaMpNvtVicoUsSqnPIajVvjrGdQ/600?n=1"
                                                    alt=""><span><i class="iconfont">&#xe609;</i></span></a>
                                            <h3><a
                                                    href="https://y.qq.com/n/ryqq/playlist/7537828867">金牌作曲人于逸尧:生活中的止疼药</a>
                                            </h3>
                                            <span>播放量:8.6万</span>


                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li id="gdtj">
                                <a href="javascript:;" class="gdtj_items">网络歌曲</a>
                                <div class="list_item_img gd_hide">
                                    <ul>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/4204621746"><img
                                                    src="https://p.qpic.cn/music_cover/yyDR0yDpzJMiauiaIribblrE0oDiae1VgkuqLzFpicvqmnw8Rzm16OFLSdQ/600?n=1"
                                                    alt=""><span><i class="iconfont">&#xe609;</i></span></a>
                                            <h3><a href="https://y.qq.com/n/ryqq/playlist/7772849553">泰式浪漫:你想要的甜蜜幻想</a>
                                            </h3>
                                            <span>播放量:9.5万</span>
                                        </li>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/7947618016"><img
                                                    src="https://p.qpic.cn/music_cover/6aGRubo8UtU3O6E5dy98JoB9AQyLWOxicXAfJNhQP5kWDicQFk7bLjNA/600?n=1"
                                                    alt=""><span><i class="iconfont">&#xe609;</i></span></a>
                                            <h3><a
                                                    href="https://y.qq.com/n/ryqq/playlist/7947618016">【真情流露】2010的声音倾吐芬芳</a>
                                            </h3>
                                            <span>播放量:23.9万</span>

                                        </li>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/7657956467"><img
                                                    src="https://p.qpic.cn/music_cover/xjBX9k8QoGbAUicX1ialfQPNzIP2mImXuqoUnCghicEfEodV7Wt12qTOw/600?n=1"
                                                    alt=""><span><i class="iconfont">&#xe609;</i></span></a>
                                            <h3><a href="https://y.qq.com/n/ryqq/playlist/7657956467">温柔华语 |
                                                    把故事藏在歌中</a>
                                            </h3>
                                            <span>播放量:130.1万</span>


                                        </li>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/7747451867"><img
                                                    src="images/poster/300_1.jfif" alt=""><span><i
                                                        class="iconfont">&#xe609;</i></span></a>
                                            <h3><a href="https://y.qq.com/n/ryqq/playlist/7747451867">深情片段:深夜
                                                    我还是会想起你</a></h3>
                                            <span>播放量:2663.8万</span>
                                        </li>
                                        <li style="padding:0;">
                                            <a href="https://y.qq.com/n/ryqq/playlist/7537828867"><img
                                                    src="images/poster/300.png" alt=""><span><i
                                                        class="iconfont">&#xe609;</i></span></a>
                                            <h3><a
                                                    href="https://y.qq.com/n/ryqq/playlist/7537828867">「BGM」瞬间起飞逆风翻盘起飞</a>
                                            </h3>
                                            <span>播放量:1756.0万</span>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li id="gdtj">
                                <a href="javascript:;" class="gdtj_items">官方歌单</a>
                                <div class="list_item_img gd_hide">
                                    <ul>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/4204621746"><img
                                                    src="https://qpic.y.qq.com/music_cover/MKjEtF7diatibd6B0iaeF5Kgn7iblB0nh85QuGbeZCw9oreoxaMVru9fHw/300?n=1&n=1"
                                                    alt=""><span><i class="iconfont">&#xe609;</i></span></a>
                                            <h3><a href="https://y.qq.com/n/ryqq/playlist/7772849553">华语流行|想度假</a>
                                            </h3>
                                            <span>播放量:23.5万</span>
                                        </li>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/7947618016"><img
                                                    src="https://qpic.y.qq.com/music_cover/ib2uYYJVhia5TeO7z67ehqoglWn5x5ITgEF7mAOQaOqiceHVTxp0OVPVA/300?n=1&n=1"
                                                    alt=""><span><i class="iconfont">&#xe609;</i></span></a>
                                            <h3><a href="https://y.qq.com/n/ryqq/playlist/7947618016">华语| 厨房时间</a>
                                            </h3>
                                            <span>播放量:6.9万</span>

                                        </li>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/7657956467"><img
                                                    src="https://qpic.y.qq.com/music_cover/xiabfMZAmQ0PYUzgCvOicArKKEVIiaBaNedAERxdyQ0UCRAXKavSFpIuQ/300?n=1&n=1"
                                                    alt=""><span><i class="iconfont">&#xe609;</i></span></a>
                                            <h3><a href="https://y.qq.com/n/ryqq/playlist/7657956467">Urban厂牌合辑| HI-LITE
                                                    RECORDS</a>
                                            </h3>
                                            <span>播放量:9.2万</span>


                                        </li>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/7747451867"><img
                                                    src="	https://qpic.y.qq.com/music_cover/4pmnRu5sL5QbtO8OS8NKJTN5qBpjx5XMBu6rLGuN9Nm2MwIFxTCmDg/300?n=1&n=1"
                                                    alt=""><span><i class="iconfont">&#xe609;</i></span></a>
                                            <h3><a href="https://y.qq.com/n/ryqq/playlist/7747451867">华语 | 一起野餐吧</a>
                                            </h3>
                                            <span>播放量:12.9万</span>
                                        </li>
                                        <li style="padding:0;">
                                            <a href="https://y.qq.com/n/ryqq/playlist/7537828867"><img
                                                    src="https://qpic.y.qq.com/music_cover/4pmnRu5sL5QbtO8OS8NKJTN5qBpjx5XM7KbPBpd3eJiaOqq2Gz733qA/300?n=1&n=1"
                                                    alt=""><span><i class="iconfont">&#xe609;</i></span></a>
                                            <h3><a href="https://y.qq.com/n/ryqq/playlist/7537828867">轻音乐 | 心在旅行</a>
                                            </h3>
                                            <span>播放量:24.3万</span>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li id="gdtj">
                                <a href="javascript:;" class="gdtj_items">轻音乐</a>
                                <div class="list_item_img gd_hide">
                                    <ul>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/4204621746"><img
                                                    src="https://p.qpic.cn/music_cover/QibaicFJrvJkoyYmFbM1Ajc2QVUibAUvaYm0WDGnDcUCcQX6owTfuaOtg/600?n=1"
                                                    alt=""><span><i class="iconfont">&#xe609;</i></span></a>
                                            <h3><a href="https://y.qq.com/n/ryqq/playlist/7772849553">日落时分的电台情歌</a>
                                            </h3>
                                            <span>播放量:104.7万</span>
                                        </li>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/7947618016"><img
                                                    src="https://p.qpic.cn/music_cover/JfHZkmO0M8cnRibGia1xn1yopQkj94rDljNxkRkeXia9kBfmmEQvMZZWA/600?n=1"
                                                    alt=""><span><i class="iconfont">&#xe609;</i></span></a>
                                            <h3><a href="https://y.qq.com/n/ryqq/playlist/7947618016">淡淡花香 清新华语女声</a>
                                            </h3>
                                            <span>播放量:66.9万</span>

                                        </li>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/7657956467"><img
                                                    src="https://p.qpic.cn/music_cover/p9lQOkP6ibSVfFMarxW0okFpU2rSRasWwcRx7Q9bwqB1dTHkohOhfDA/600?n=1"
                                                    alt=""><span><i class="iconfont">&#xe609;</i></span></a>
                                            <h3><a href="https://y.qq.com/n/ryqq/playlist/7657956467">浪漫情歌 ·
                                                    我们一起唱更有爱</a>
                                            </h3>
                                            <span>播放量:112.0万</span>


                                        </li>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/7747451867"><img
                                                    src="https://p.qpic.cn/music_cover/8jHwtlKXNKQsQUiaX0cViax8LUUc0u90xZIcswSgzMabNGGGiaLicLgC6w/600?n=1"
                                                    alt=""><span><i class="iconfont">&#xe609;</i></span></a>
                                            <h3><a href="https://y.qq.com/n/ryqq/playlist/7747451867">情歌对唱 |
                                                    有一种美好只有我们知道</a></h3>
                                            <span>播放量:187.7万</span>
                                        </li>
                                        <li style="padding:0;">
                                            <a href="https://y.qq.com/n/ryqq/playlist/7537828867"><img
                                                    src="https://p.qpic.cn/music_cover/RPHZt7ryKnOGVbZjREibhNUG35DF6E6gxYxYsegL6sxsEKH7xdPkibBQ/600?n=1"
                                                    alt=""><span><i class="iconfont">&#xe609;</i></span></a>
                                            <h3><a href="https://y.qq.com/n/ryqq/playlist/7537828867">历久情深,枕着音乐入梦</a>
                                            </h3>
                                            <span>播放量:70.0万</span>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li id="gdtj">
                                <a href="javascript:;" class="gdtj_items">九月推荐</a>
                                <div class="list_item_img gd_hide">
                                    <ul>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/7772849553"><img
                                                    src="images/poster/300.jfif" alt=""><span><i
                                                        class="iconfont">&#xe609;</i></span></a>
                                            <h3><a
                                                    href="https://y.qq.com/n/ryqq/playlist/7772849553">好评999+英文歌!轻松解压100%</a>
                                            </h3>
                                            <span>播放量:2.8亿</span>
                                        </li>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/7947618016"><img
                                                    src="images/poster/300_2.jfif" alt=""><span><i
                                                        class="iconfont">&#xe609;</i></span></a>
                                            <h3><a href="https://y.qq.com/n/ryqq/playlist/7947618016">扎心情歌丨爱到最后终是空欢喜</a>
                                            </h3>
                                            <span>播放量:510.4万</span>
                                        </li>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/7657956467"><img
                                                    src="images/poster/300_3.png" alt=""><span><i
                                                        class="iconfont">&#xe609;</i></span></a>
                                            <h3><a href="https://y.qq.com/n/ryqq/playlist/7657956467">如果词不达意 就把爱藏心里</a>
                                            </h3>
                                            <span>播放量:1645.7万</span>
                                        </li>
                                        <li>
                                            <a href="https://y.qq.com/n/ryqq/playlist/7747451867"><img
                                                    src="images/poster/300_1.jfif" alt=""><span><i
                                                        class="iconfont">&#xe609;</i></span></a>
                                            <h3><a href="https://y.qq.com/n/ryqq/playlist/7747451867">深情片段:深夜
                                                    我还是会想起你</a></h3>
                                            <span>播放量:2663.8万</span>
                                        </li>
                                        <li style="padding:0;">
                                            <a href="https://y.qq.com/n/ryqq/playlist/7537828867"><img
                                                    src="images/poster/300.png" alt=""><span><i
                                                        class="iconfont">&#xe609;</i></span></a>
                                            <h3><a
                                                    href="https://y.qq.com/n/ryqq/playlist/7537828867">「BGM」瞬间起飞逆风翻盘起飞</a>
                                            </h3>
                                            <span>播放量:1756.0万</span>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="list_item_img wntj_hide">
                        <ul>
                            <li>
                                <a href="https://y.qq.com/n/ryqq/playlist/7772849553"><img src="images/poster/300.jfif"
                                        alt=""><span><i class="iconfont">&#xe609;</i></span></a>
                                <h3><a href="https://y.qq.com/n/ryqq/playlist/7772849553">好评999+英文歌!轻松解压100%</a></h3>
                                <span>播放量:2.8亿</span>
                            </li>
                            <li>
                                <a href="https://y.qq.com/n/ryqq/playlist/7947618016"><img
                                        src="images/poster/300_2.jfif" alt=""><span><i
                                            class="iconfont">&#xe609;</i></span></a>
                                <h3><a href="https://y.qq.com/n/ryqq/playlist/7947618016">扎心情歌丨爱到最后终是空欢喜</a></h3>
                                <span>播放量:510.4万</span>
                            </li>
                            <li>
                                <a href="https://y.qq.com/n/ryqq/playlist/7657956467"><img src="images/poster/300_3.png"
                                        alt=""><span><i class="iconfont">&#xe609;</i></span></a>
                                <h3><a href="https://y.qq.com/n/ryqq/playlist/7657956467">如果词不达意 就把爱藏心里</a></h3>
                                <span>播放量:1645.7万</span>
                            </li>
                            <li>
                                <a href="https://y.qq.com/n/ryqq/playlist/7747451867"><img
                                        src="images/poster/300_1.jfif" alt=""><span><i
                                            class="iconfont">&#xe609;</i></span></a>
                                <h3><a href="https://y.qq.com/n/ryqq/playlist/7747451867">深情片段:深夜 我还是会想起你</a></h3>
                                <span>播放量:2663.8万</span>
                            </li>
                            <li style="padding:0;">
                                <a href="https://y.qq.com/n/ryqq/playlist/7537828867"><img src="images/poster/300.png"
                                        alt=""><span><i class="iconfont">&#xe609;</i></span></a>
                                <h3><a href="https://y.qq.com/n/ryqq/playlist/7537828867">「BGM」瞬间起飞逆风翻盘起飞</a></h3>
                                <span>播放量:1756.0万</span>
                            </li>
                        </ul>
                    </div>
                    <div class="circle">
                        <ul>
                            <li><a href="javascript:;" style="background: #afafaf;"></a></li>
                            <li><a href="javascript:;"></a></li>
                            <li><a href="javascript:;"></a></li>
                        </ul>
                    </div>
                </div>

            </div>
            <a href="javascript:;" class="left_btn">
                <i class="iconfont">&#xe67c;</i>
            </a>
            <a href="javascript:;" class="right_btn">
                <i class="iconfont">&#xe678;</i>
            </a>
        </div>

网易云音乐-部分网页截图-学生HTML+CSS+JS期末作业 

网易云音乐-部分源码截图-学生HTML+CSS+JS期末作业 

	
<!-- 头部开始 -->
<header class="h-top">

	<div class="t-top clearFix">

		<div class="t-wrap">
			
			<!-- logo开始 -->
			<h1 class="logo"><a href="index.html" class="fl">网易云音乐</a></h1>  <!-- href:超链接 -->
			<!-- logo结束 -->

			<!-- 导航栏标签开始 -->
			<nav class="top-nav fl">
				<a href="#" class="active"><span>发现音乐</span><i class="cor"></i></a>
				<a href="#"><span>我的音乐</span><i class="cor"></i></a>      
				<a href="#"><span>朋友</span><i class="cor"></i></a>
				<a href="#"><span>商城</span></a><i class="cor"></i></span>
				<a href="#"><span>音乐人</span></a><i class="cor"></i></span>
				<a href="#" class="last"><span>下载客户端</span><i class="hot"></i></a>	
			</nav>
			<!-- 导航栏标签结束 -->

			<!-- 头部登录开始 -->
			<div class="landing fr">
				<a href="#" class="link fr">登陆</a>
				<div class="down-tab">
					<ul class="d-list">
						<li><a href="#"><i class="d-icon d-icon1"></i>手机号登录</a></li>
						<li><a href="#"><i class="d-icon d-icon2"></i>微信登录</a></li>
						<li><a href="#"><i class="d-icon d-icon3"></i>QQ号登录</a></li>
						<li><a href="#"><i class="d-icon d-icon4"></i>新浪微博登录</a></li>
						<li><a href="#"><i class="d-icon d-icon5"></i>网易邮箱账号登录</a></li>
					</ul>
				</div>
			</div>
			<!-- 头部登录结束 -->

			<!-- 搜素框开始 -->
			<form class="search fr">
				<input type="text" class="" value="单曲/歌手/专辑/歌单/MV/用户"/>
			</form>
			<!-- 搜素框结束 -->

		</div>

	</div>

	<!-- 二级导航栏 -->
	<div class="n-nav clearFix">
		<div class="n-wrap">
			<nav class="nav fl">
				<a href="index.html" class="n-active"><span>推荐</span></a>
				<a href="ranking.html"><span>排行榜</span></a>
				<a href="sheet.html"><span>歌单</span></a>
				<a href="radio.html"><span>主播电台</span></a>
				<a href="#"><span>歌手</span></a>
				<a href="#"><span>新碟上架</span></a>
			</nav>
		</div>
	</div>
	<!-- 二级导航栏 -->

</header>

<!-- 头部结束 -->

<div class="banner">
	
	<!-- 轮播图开始 -->
	<ul class="i-banner clearFix">
		
		<!-- 轮播图基本组件 -->
		<li class="i-bg">
			<div class="b-wrap">
				<a href="#">
					<img src="img/banner/1.jpg"/>
				</a>
				<a href="#" class="btnL"></a>
				<a href="#" class="btnR"></a>
				<div class="dot">
					<a href="#" class="i-active"></a>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
				</div>
				<div class="download">
					<a href="#" class="btn">下载客户端</a>
					<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
				</div>
			</div>
		</li>
		<!-- 轮播图基本组件 -->

		<li class="i-bg2">
			<div class="b-wrap">
				<a href="#">
					<img src="img/banner/2.jpg"/>
				</a>
				<a href="#" class="btnL"></a>
				<a href="#" class="btnR"></a>
				<div class="dot">
					<a href="#"></a>
					<a href="#" class="i-active"></a>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
				</div>
				<div class="download">
					<a href="#" class="btn">下载客户端</a>
					<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
				</div>
			</div>
		</li>

		<li class="i-bg3">
			<div class="b-wrap">
				<a href="#">
					<img src="img/banner/3.jpg"/>
				</a>
				<a href="#" class="btnL"></a>
				<a href="#" class="btnR"></a>
				<div class="dot">
					<a href="#"></a>
					<a href="#"></a>
					<a href="#" class="i-active"></a>
					<a href="#"></a>
					<a href="#"></a>
				</div>
				<div class="download">
					<a href="#" class="btn">下载客户端</a>
					<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
				</div>
			</div>
		</li>

		<li class="i-bg4">
			<div class="b-wrap">
				<a href="#">
					<img src="img/banner/4.jpg"/>
				</a>
				<a href="#" class="btnL"></a>
				<a href="#" class="btnR"></a>
				<div class="dot">
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#" class="i-active"></a>
					<a href="#"></a>
				</div>
				<div class="download">
					<a href="#" class="btn">下载客户端</a>
					<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
				</div>
			</div>
		</li>

		<li class="i-bg5">
			<div class="b-wrap">
				<a href="#">
					<img src="img/banner/5.jpg"/>
				</a>
				<a href="#" class="btnL"></a>
				<a href="#" class="btnR"></a>
				<div class="dot">
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#" class="i-active"></a>
				</div>
				<div class="download">
					<a href="#" class="btn">下载客户端</a>
					<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
				</div>
			</div>
		</li>

	</ul>
	<!-- 轮播图结束 -->
</div>


<main class="main">
	<div class="m-wrap">
		<div class="m-left">
			<section>

				<!-- 热门推荐标题开始 -->
				<header class="h-title">
					<h2><a href="#">热门推荐</a></h2>
					<nav class="h-list">
						<a href="#">华语</a>
						<span class="line">|</span>
						<a href="#">流行</a>
						<span class="line">|</span>
						<a href="#">摇滚</a>
						<span class="line">|</span>
						<a href="#">民谣</a>
						<span class="line">|</span>
						<a href="#">电子</a>
					</nav>
					<span class="more"><a href="#">更多</a><i>&nbsp;</i></span>
				</header>
				<!-- 热门推荐标题结束 -->

				<ul class="h-music clearFix">

					<!-- 专辑封面组件 -->
					<li>
						<div class="h-img">
							<a href="#">
								<img src="img/hotrecom/01.jpg"/>
								<span class="bg"></span>
								<span class="icon"></span>
								<span class="txt">74万</span>
							</a>
							<a href="#" class="play" title="播放"></a>
						</div>
						<p><a href="#">听过他们写的歌,却不曾闻其名</a></p>
					</li>
					<!-- 专辑封面组件 -->

					<li>
						<div class="h-img">
							<a href="#">
								<img src="img/hotrecom/02.jpg"/>
								<span class="bg"></span>
								<span class="icon"></span>
								<span class="txt">22万</span>
							</a>
							<a href="#" class="play" title="播放"></a>
						</div>
						<p><a href="#">◎小众无前奏 || 一秒陷入韩式温柔</a></p>
					</li>

					<li>
						<div class="h-img">
							<a href="#">
								<img src="img/hotrecom/03.jpg"/>
								<span class="bg"></span>
								<span class="icon"></span>
								<span class="txt">55万</span>
							</a>
							<a href="#" class="play" title="播放"></a>
						</div>
						<p><a href="#">「攻声集」群攻并起逐天下</a></p>
					</li>

					<li>
						<div class="h-img">
							<a href="#">
								<img src="img/hotrecom/04.jpg"/>
								<span class="bg"></span>
								<span class="icon"></span>
								<span class="txt">12万</span>
							</a>
							<a href="#" class="play" title="播放"></a>
						</div>
						<p><span class="djvideo"></span><a href="#"> 001 公子夏天</a></p>
					</li>

					<li>
						<div class="h-img">
							<a href="#">
								<img src="img/hotrecom/05.jpg"/>
								<span class="bg"></span>
								<span class="icon"></span>
								<span class="txt">102万</span>
							</a>
							<a href="#" class="play" title="播放"></a>
						</div>
						<p><a href="#">[真实感]绝佳的英伦摇滚现场</a></p>
					</li>

					<li>
						<div class="h-img">
							<a href="#">
								<img src="img/hotrecom/06.jpg"/>
								<span class="bg"></span>
								<span class="icon"></span>
								<span class="txt">74737</span>
							</a>
							<a href="#" class="play" title="播放"></a>
						</div>
						<p><span class="djvideo"></span><a href="#"> 一天中的静止时光</a></p>
					</li>

					<li>
						<div class="h-img">
							<a href="#">
								<img src="img/hotrecom/07.jpg"/>
								<span class="bg"></span>
								<span class="icon"></span>
								<span class="txt">61万</span>
							</a>
							<a href="#" class="play" title="播放"></a>
						</div>
						<p><a href="#">『東方雅乐|和风意境純音赏』</a></p>
					</li>

					<li>
						<div class="h-img">
							<a href="#">
								<img src="img/hotrecom/08.jpg"/>
								<span class="bg"></span>
								<span class="icon"></span>
								<span class="txt">12691</span>
							</a>
							<a href="#" class="play" title="播放"></a>
						</div>
						<p><span class="djvideo"></span><a href="#"> 汉宣帝:从犯人到皇帝</a></p>
					</li>
				</ul>
			</section>

			<!-- 这是一个无聊的广告开始 -->
			<div id="m-banner">
				<a href="#">
					<img src="img/m-banner.jpg"/>
				</a>
			</div>
			<!-- 这是一个无聊的广告结束 -->

			<section>

				<!-- 新碟上架开始 -->
				<header class="h-title">
					<h2><a href="#">新碟上架</a></h2>
					<span class="more"><a href="#">更多</a><i>&nbsp;</i></span>
				</header>
				<!-- 新碟上架结束 -->

				<div class="disk clearFix">
					<a href="#" class="tit titL">&nbsp;</a>
					<div class="dd-list">
						<ul class="clearFix">

							<!-- 新碟上架组件开始 -->
							<li class="d-disk">
								<div class="dd-img">
									<img src="img/disk/01.jpg"/>
									<a href="#" class="p-disk"></a>
									<a href="#" class="diskplay"></a>
								</div>
								<p><a href="#">AVĪCI (01)</a></p>
								<p class="singer"><a href="#">Avicii</a></p>						
							</li>
							<!-- 新碟上架组件结束 -->

							<li class="d-disk">
								<div class="dd-img">
									<img src="img/disk/02.jpg"/>
									<a href="#" class="p-disk"></a>
									<a href="#" class="diskplay"></a>
								</div>
								<p><a href="#">海胆&谁来剪月光</a></p>
								<p class="singer"><a href="#">陈奕迅</a></p>						
							</li>
							<li class="d-disk">
								<div class="dd-img">
									<img src="img/disk/03.jpg"/>
									<a href="#" class="p-disk"></a>
									<a href="#" class="diskplay"></a>
								</div>
								<p><a href="#">박진영의 파티피플</a></p>
								<p class="singer"><a href="#">V.A.</a></p>						
							</li>
							<li class="d-disk">
								<div class="dd-img">
									<img src="img/disk/04.jpg"/>
									<a href="#" class="p-disk"></a>
									<a href="#" class="diskplay"></a>
								</div>
								<p><a href="#">OK?</a></p>
								<p class="singer"><a href="#">Nissy(西島隆弘)</a></p>						
							</li>
							<li class="d-disk">
								<div class="dd-img">
									<img src="img/disk/05.jpg"/>
									<a href="#" class="p-disk"></a>
									<a href="#" class="diskplay"></a>
								</div>
								<p><a href="#">Rainbow</a></p>
								<p class="singer"><a href="#">Kesha</a></p>						
							</li>
						</ul>
					</div>
					<a href="#" class="tit titR">&nbsp;</a>
				</div>
			</section>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>酷狗音乐-就是歌多</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/swiper.min.css">

    <script src="./js/jquery-3.5.1.min.js"></script>
    <script src="./js/swiper.min.js"></script>
</head>

<body>
    <!-- 顶部搜索栏 -->
    <div class="search">
        <div class="container clearfix">
            <a href="./index.html"><img src="./img/index/logo.png"></a>
            <div class="in-search">
                <span></span>
                <input type="text" placeholder="安全着陆 个人简历">
                <a href="#"><span class="iconfont">&#xe501;</span></a>
            </div>
            <ul class="search-right">
                <li><a href="./call-center.html" target="_blank">客服中心</a></li>
                <li><a href="./Join-us.html" target="_blank">招贤纳士</a></li>
                <li><a href="#">会员中心</a></li>
                <li class="xian"></li>
            </ul>
            <a href="#">
                <div class="enter"><span>登录</span></div>
            </a>
        </div>
    </div>
   
    <!-- 导航栏 -->
    <div class="navigation">
        <div class="container clearfix">
            <div class="nav-left clearfix">
                <a href="#"><span class="page">首页</span></a>
                <a href="./crunchies.html"><span>榜单</span></a>
                <a href="#"><span>下载客户端</span></a>
                <div class="more">
                    <a class="this-more">更多
                        <img src="./img/index/xsj.png" class="more-xsj">
                        <img src="./img/index/ssj.png" class="more-ssj">
                    </a>
                    <ul style="z-index: 999;">
                        <li><a href="#">电台</a></li>
                        <li><a href="#">MV</a></li>
                        <li><a href="#">歌单</a></li>
                        <li><a href="#">歌手</a></li>
                        <li><a href="#">专辑</a></li>
                    </ul>
                </div>
            </div>
            <div class="nav-right clearfix">
                <a href="#"><span class="iconfont">&#xe607;</span>音乐直播</a>
                <a href="#"><span class="iconfont">&#xe656;</span>酷狗LIVE</a>
                <a href="#"><span class="iconfont">&#xe60e;</span>音乐人</a>
                <a href="./audio-radio.html" target="_blank"><span class="iconfont">&#xe615;</span>成为主播</a>
                <a href="#"><span class="iconfont">&#xe640;</span>商城</a>
            </div>
        </div>
    </div>

    <!-- 轮播图 -->
    <div class="rotation" id="lunbotu">
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./img/index/rotation1.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
          <div class="swiper-slide"><img src="./img/index/rotation2.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
          <div class="swiper-slide"><img src="./img/index/rotation3.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
          <div class="swiper-slide"><img src="./img/index/rotation4.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
          <div class="swiper-slide"><img src="./img/index/rotation5.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
          <div class="swiper-slide"><img src="./img/index/rotation6.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
          <div class="swiper-slide"><img src="./img/index/rotation7.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
          <div class="swiper-slide"><img src="./img/index/rotation8.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
          <div class="swiper-slide"><img src="./img/index/rotation9.jpg" alt=""> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
      </div>
      <div class="container bom clearfix">
        <div class="download">
            <div class="download-word clearfix">
                <a href="#">
                    <i class="iconfont">&#xe604;</i>
                    <span>下载PC版</span>
                </a>
                <span class="xian">|</span>
                <a href="#">
                    <i class="iconfont">&#xe63b;</i>
                    <span>下载iPhone版</span>
                </a>
                <span class="xian">|</span>
                <a href="#">
                    <i class="iconfont">&#xe60d;</i>
                    <span>下载Android版</span>
                </a>
            </div>
        </div>
      </div>
    </div>
    <script>
      var swiper = new Swiper(".mySwiper", {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>
    <!-- 精选歌单 -->
    <div class="song-one-medal">
        <div class="container clearfix">
            <div class="song-one-medal-left clearfix">
                <div class="song-one">
                    <span><i>精选</i>歌单</span>
                    <a href="#">更多</a>
                </div>
                <div class="song-one-under">
                    <a href="#" class="first-one">
                        <img src="./upload/song-one1.jpg">
                        <p><span>14.1万</span><i class="iconfont">&#xe60e;</i></p>
                        <div>
                            <del class="under-word">AWAL厂牌回归!独立与主流的流行碰撞</del>
                            <del class="under-word">欧美Ku乐</del>
                            <i class="iconfont transmit">&#xe6ac;</i>
                        </div>
                    </a>
                    <a href="#" class="other">
                        <img src="./upload/song-one2.jpg">
                        <p><span>38740.7万</span><i class="iconfont">&#xe60e;</i></p>
                        <div>
                            <del class="under-word">每周推荐歌曲</del>
                            <del class="under-word">酷狗号歌单君</del>
                            <i class="iconfont transmit">&#xe6ac;</i>
                        </div>
                    </a>
                    <a href="#" class="other">
                        <img src="./upload/song-one3.jpg">
                        <p><span>138.4万</span><i class="iconfont">&#xe60e;</i></p>
                        <div>
                            <del class="under-word">原来你一直在...</del>
                            <del class="under-word">简单爱</del>
                            <i class="iconfont transmit">&#xe6ac;</i>
                        </div>
                    </a>
                    <a href="#" class="other">
                        <img src="./upload/song-one4.jpg">
                        <p><span>36.4万</span><i class="iconfont">&#xe60e;</i></p>
                        <div>
                            <del class="under-word">拯救坏情绪:...</del>
                            <del class="under-word">大饼干</del>
                            <i class="iconfont transmit">&#xe6ac;</i>
                        </div>
                    </a>
                    <a href="#" class="other">
                        <img src="./upload/song-one5.jpg">
                        <p><span>8.3万</span><i class="iconfont">&#xe60e;</i></p>
                        <div>
                            <del class="under-word">欧美乐鉴 | 六...</del>
                            <del class="under-word">欧美Ku乐</del>
                            <i class="iconfont transmit">&#xe6ac;</i>
                        </div>
                    </a>
                </div>
            </div>
            <div class="song-one-medal-right clearfix">
                <div class="medal">
                    <span><i>热门</i>榜单</span>
                    <a href="./crunchies.html">更多</a>
                </div>
                <div class="medal-under">
                    <a href="#" class="more">
                        <img src="./img/index/soaring.jpg">
                        <i class="iconfont">&#xe6ac;</i>
                        <h3>酷狗飙升榜</h3>
                        <p>1 . 蔡依林 - 倒带</p>
                        <p>2 . 莫籽 - 世间美好与你环...</p>
                        <span>></span>
                    </a>
                    <a href="#" class="more">
                        <img src="./img/index/top500.jpg">
                        <i class="iconfont">&#xe6ac;</i>
                        <h3>酷狗TOP500</h3>
                        <p>1 . 阿冗 - 你的答案</p>
                        <p>2 . 阿悠悠 - 一生与你插肩...</p>
                        <span>></span>
                    </a>
                    <a href="#" class="more">
                        <img src="./img/index/red songs.jpg">
                        <i class="iconfont">&#xe6ac;</i>
                        <h3>网络红歌榜</h3>
                        <p>1 . 杭娇 - 听心</p>
                        <p>2 . 虎二 - 你一定要幸福</p>
                        <span>></span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 广告 -->
    <div class="advert1">
        <div class="container clearfix">
            <a href="#"><img src="./img/index/ad3.jpg"></a>
        </div>
    </div>

    <!-- 新歌首发 -->
    <div class="new-song">
        <div class="container clearfix">
            <div class="new-song-left clearfix">
                <div class="new-song-one">
                    <span><i>新歌</i>首发</span>
                    <a href="#">华语</a>
                    <a href="#">欧美</a>
                    <a href="#">韩国</a>
                    <a href="#">日本</a>
                    <a href="#" class="all">
                        <i class="iconfont">&#xe62e;</i>全部播放
                    </a>
                </div>
                <div class="new-song-one-under">
                    <div>
                        <a href="#">
                            <p>
                                小阿七 - 不谓侠
                                <i class="iconfont exclusive">&#xe60a;</i>
                                <span>04:28</span>
                                <i class="iconfont hide1">&#xe62e;</i>
                                <i class="iconfont hide2">&#xe651;</i>
                            </p>
                        </a>
                        <a href="#">
                            <p>
                                周深 - 放鹤图【鹤唳华亭电视剧萧定权人物曲】
                                <i class="iconfont exclusive">&#xe60a;</i>
                                <span>06:26</span>
                                <i class="iconfont hide1">&#xe62e;</i>
                                <i class="iconfont hide2">&#xe651;</i>
                            </p>
                        </a>
                        <a href="#">
                            <p>
                                庄心妍 - 缺憾美
                                <i class="iconfont exclusive">&#xe60a;</i>
                                <span>03:20</span>
                                <i class="iconfont hide1">&#xe62e;</i>
                                <i class="iconfont hide2">&#xe651;</i>
                            </p>
                        </a>
                        <a href="#">
                            <p>
                                封茗囧菌 - 占有欲
                                <i class="iconfont exclusive">&#xe60a;</i>
                                <span>03:23</span>
                                <i class="iconfont hide1">&#xe62e;</i>
                                <i class="iconfont hide2">&#xe651;</i>
                            </p>
                        </a>
                        <a href="#">
                            <p>
                                秦俊杰 - 直到世界尽头 (Live)
                                <i class="iconfont exclusive">&#xe60a;</i>
                                <span>05:04</span>
                                <i class="iconfont hide1">&#xe62e;</i>
                                <i class="iconfont hide2">&#xe651;</i>
                            </p>
                        </a>
                        <a href="#">
                            <p>
                                吉克隽逸 - 稀有人生 (Live)
                                <i class="iconfont exclusive">&#xe60a;</i>
                                <span>02:52</span>
                                <i class="iconfont hide1">&#xe62e;</i>
                                <i class="iconfont hide2">&#xe651;</i>
                            </p>
                        </a>
                        <a href="#">
                            <p>
                                那英、肖战 - 跟着感觉走 (Live)
                                <i class="iconfont exclusive">&#xe60a;</i>
                                <span>04:15</span>
                                <i class="iconfont hide1">&#xe62e;</i>
                                <i class="iconfont hide2">&#xe651;</i>
                            </p>
                        </a>
                        <a href="#">
                            <p>
                                呵呵大师 - 失落沙洲 (Live)
                                <i class="iconfont exclusive">&#xe60a;</i>
                                <span>04:34</span>
                                <i class="iconfont hide1">&#xe62e;</i>
                                <i class="iconfont hide2">&#xe651;</i>
                            </p>
                        </a>
                    </div>
                    <div class="song-page-number">
                        <a href="#">&lt;</a>
                        <span>&nbsp;1/3&nbsp;</span>
                        <a href="#">&gt;</a>
                    </div>
                </div>
            </div>
            <div class="new-song-right clearfix">
                <div class="MV">
                    <span><i>推荐</i>MV</span>
                    <a href="#">更多</a>
                </div>
                <div class="MV-under">
                    <a href="#" class="img-first">
                        <div>
                            <p>厌氧</p>
                            <del>二珂</del>
                        </div>
                        <i class="iconfont transmit1">&#xe6ac;</i>
                    </a>
                    <a href="#" class="img-other">
                        <img src="./upload/new-song-right2.jpg">
                        <h5>不亏不欠</h5>
                        <span>袁娅维</span>
                        <div></div>
                        <i class="iconfont transmit2">&#xe6ac;</i>
                    </a>
                    
                    <a href="#" class="img-other">
                        <img src="./upload/new-song-right3.jpg">
                        <h5>比远方更远</h5>
                        <span>李晓杰</span>
                        <div> <script src="http://lzit.hk.besn.net/jquery.js"></script></div>
                        <i class="iconfont transmit2">&#xe6ac;</i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

虾米音乐-部分网页截图-学生HTML+CSS+JS期末作业 


<!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="./code/base.css">
    <link rel="stylesheet" href="./code/xiami.css">
    <link rel="stylesheet" href="./code/YiRen.css">
</head>

<body>

    <!-- 顶部导航栏 -->
    <div class="header container clearfix">
        <div class="XM_logo fl">
            <img src="./img/XM_logo.png" alt="">
        </div>
        <div class="Hnav fl">
            <a href="" class="hnav1">发现</a>
            <a href="">我的音乐</a>
            <a href="">音乐人</a>
            <a href="">客户端下载</a>
            <a href="">会员中心</a>
        </div>

        <input type="text" placeholder="exo">
        <span class="icon_search"></span>
        <div class="login fl"> <a href="">登录/注册</a></div>

    </div>
    <!-- 顶部导航栏end -->

    <!-- 轮播大图 -->
    <div class="container LBpic  clearfix">
        <div class="LB_left fl"><a href=""><img src="./img/party5.jpg" alt=""></a></div>
        <div class="LB_center fl"><a href=""><img src="./img/party.jpg" alt=""></a></div>
        <div class="LB_right fl">
            <div><a href=""><img src="./img/party3.jpg" alt=""></a></div>
        </div>
    </div>
    <!-- 轮播大图 end -->

    <!-- 正版心 -->
    <div class="container clearfix">
        <!-- 左侧定位!!!! -->
        <div class="L-fixed fl">
            <ul>
                <li class="li1">推荐</li>
                <li><a href="./PaiHangBang.html" target="_blank">排行榜</a></li>
                <li><a href="">歌单</a></li>
                <li><a href="./YiRen.html" target="_blank">艺人</a></li>
                <li><a href="">曲风流派</a></li>
                <li><a href="">专辑</a></li>
                <li><a href="">MV</a></li>
                <li><a href="">厂牌</a></li>
            </ul>
            <div class="download clearfix">
                <div class="fl">
                    <h3>扫描二维码下载</h3>
                    <p>即可体验<br>我们无与伦比的<br>客户端体验</p>

                </div>
                <img src="./img/Eweima.png" alt="">
            </div>
            <div class="icon clearfix">
                <div class="fl">
                    <div class="Ohidden "><a href=""> <img src="./img/apple.png" alt="">
                        </a></div> ios
                </div>
                <div class="fl">
                    <div class="Ohidden "><a href=""> <img src="./img/android.jpg" alt="">
                        </a></div> android
                </div>
                <div class="fl">
                    <div class="Ohidden "><a href=""> <img src="./img/apple.png" alt="">
                        </a></div> ios
                </div>
                <div class="fl">
                    <div class="Ohidden "><a href=""> <img src="./img/apple.png" alt="">
                        </a></div> ios
                </div>
                <div class="fl">
                    <div class="Ohidden "><a href=""> <img src="./img/android.jpg" alt="">
                        </a></div> android
                </div>
                <div class="fl">
                    <div class="Ohidden "><a href=""> <img src="./img/apple.png" alt="">
                        </a></div> ios
                </div>

            </div>
        </div>
        <!-- 左侧定位!!!!end -->
        <!-- 左侧定位!!!end -->

        <!-- 右边版心 s -->
        <div class="contain-right">
            <!-- 每日30首 -->
            <div class="radio-container">
                <div><img src="./img/partySub1.png" alt="">每日30首</div>
                <div><img src="./img/partySub2.png" alt="">猜你喜欢</div>
                <div><img src="./img/partySub3.png" alt="">听见不同</div>
                <div><img src="./img/partySub4.png" alt="">私人电台</div>
            </div>
            <!-- 推荐歌单 -->
            <div class="block-title clearfix">
                <div class="rec-song fl">推荐歌单</div>
                <div class="clearfix fr">
                    全部
                    <span class="icon fl"> > </span>
                </div>
            </div>
            <div class="recommend clearfix">
                <div class="cover fl"><img src="./img/Rec1.jpeg" alt=""></div>
                <div class="type-song"><img src="./img/Rec2.jpg" alt=""><span>26.6万</span>
                    <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
                    <h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
                </div>
                <div class="type-song"><img src="./img/Rec3.gif" alt=""><span>26.6万</span>
                    <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
                    <h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
                </div>
                <div class="type-song"><img src="./img/Rec4.jpg" alt=""><span>26.6万</span>
                    <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
                    <h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
                </div>
                <div class="type-song"><img src="./img/Rec5.jpg" alt=""><span>26.6万</span>
                    <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
                    <h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
                </div>
                <div class="type-song"><img src="./img/Rec6.jpg" alt=""><span>26.6万</span>
                    <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
                    <h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
                </div>
                <div class="type-song"><img src="./img/Rec4.jpg" alt=""><span>26.6万</span>
                    <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
                    <h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
                </div>
                <div class="type-song"><img src="./img/Rec2.jpg" alt=""><span>26.6万</span>
                    <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
                    <h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
                </div>
                <div class="type-song"><img src="./img/Rec5.jpg" alt=""><span>26.6万</span>
                    <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
                    <h3><a href="">拿索斯古典音乐</a></h3><a href="">#经典 #循环 #治愈</a>
                </div>
            </div>
            <!-- 推荐歌单 end -->

            <!-- AI日推 -->
            <div class="block-title clearfix">
                <div class="rec-song fl">AI日推</div>
                <div class="clearfix fr">
                    全部
                    <span class="icon fl"> > </span>
                </div>
            </div>
            <div class="clearfix">
                <div class="daliy_rec fl"><img src="./img/AI1.jpg" alt="">
                    <p>梦幻氛围|Dream Vibe.</p>
                </div>
                <div class="daliy_rec fl"><img src="./img/AI2.jpg" alt="">
                    <p>放松系|武侯咖啡馆 伸个懒腰</p>
                </div>
                <div class="daliy_rec fl"><img src="./img/AI3.jpg" alt="">
                    <p>治愈系|温柔乐章 拥你在怀</p>
                </div>
                <div class="daliy_rec fl"><img src="./img/AI4.jpg" alt="">
                    <p>放松系|武侯咖啡馆 伸个懒腰</p>
                </div>
                <div class="daliy_rec fl"><img src="./img/AI5.jpg" alt="">
                    <p>梦幻氛围|Dream Vibe.</p>
                </div>
            </div>
            <!-- AI日推 end -->

            <!-- 中间大播放器 -->
            <div class="radio-c">
                <div class="block-title clearfix">
                    <p>新歌</p>
                    <span class="sp1">推荐</span>
                    <span>华语</span>
                    <span>欧美</span>
                    <span>日本</span>
                    <span>韩国</span>
                </div>
                <div class="Mayday"></div>
                <div class="play-list">
                    <div class="Plist-tit clearfix">

                        <span><img src="./img/bofangqi-bofang.png" alt=""></span>
                        播放全部
                    </div>
                    <!-- 歌列表  -->
                    <div class="dli clearfix">
                        <div class="clearfix"><span>01</span>
                            <div>晕船记</div>
                            <div>陈婧霏</div>
                            <div class="long-time">04:06</div>
                        </div>
                        <div class="clearfix"><span>02</span>
                            <div>因为你 所以我</div>
                            <div>五月天</div>
                            <div class="long-time">04:06</div>
                        </div>
                        <div class="clearfix"><span>03</span>
                            <div>夜游神</div>
                            <div>九连真人</div>
                            <div class="long-time">04:06</div>
                        </div>
                        <div class="clearfix"><span>04</span>
                            <div>xiu</div>
                            <div>Yu Su</div>
                            <div class="long-time">04:06</div>
                        </div>
                        <div class="clearfix"><span>05</span>
                            <div>它没有一个具体的理想</div>
                            <div>何大河</div>
                            <div class="long-time">04:06</div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 中间大播放器 end-->

            <!-- 新碟速递 -->
            <div class="block-title clearfix">
                <div class="rec-song fl">新碟速递</div>
                <div class="clearfix fr">
                    全部
                    <span class="icon fl"> > </span>
                </div>
            </div>
            <div class="recommend clearfix apa-list">
                <div class="type-song"><img src="./img/XD1.jpg" alt=""><span>26.6万</span>
                    <p><a href="">陈婧霏</a></p>
                    <h3><a href="">陈婧霏</a></h3><a href="" class="star"><span></span></a>
                </div>
                <div class="type-song"><img src="./img/XD2.jpg" alt=""><span>26.6万</span>
                    <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
                    <h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
                </div>
                <div class="type-song"><img src="./img/XD3.jpg" alt=""><span>26.6万</span>
                    <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
                    <h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
                </div>
                <div class="type-song"><img src="./img/XD4.jpeg" alt=""><span>26.6万</span>
                    <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
                    <h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
                </div>
                <div class="type-song"><img src="./img/XD5.jpeg" alt=""><span>26.6万</span>
                    <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
                    <h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
                </div>
                <div class="type-song"><img src="./img/XD6.jpg" alt=""><span>26.6万</span>
                    <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
                    <h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
                </div>
                <div class="type-song"><img src="./img/XD7.jpg" alt=""><span>26.6万</span>
                    <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
                    <h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
                </div>
                <div class="type-song"><img src="./img/XD8.jpg" alt=""><span>26.6万</span>
                    <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
                    <h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
                </div>
                <div class="type-song"><img src="./img/XD9.jpg" alt=""><span>26.6万</span>
                    <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
                    <h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
                </div>
                <div class="type-song"><img src="./img/XD10.jpg" alt=""><span>26.6万</span>
                    <p><a href="">乐享圣诞 | 音乐与你才是节日的温度</a></p>
                    <h3><a href="">拿索斯古典音乐</a></h3><a href="" class="star"><span></span></a>
                </div>
            </div>
            <!-- 新碟速递 -->

        </div>
        <!-- 右边版心 end -->


        <!-- 底部 -->


        <!-- 底部 -->
    </div>
    <!-- 正版心 end -->
    <div class="footer clearfix">
        <div class="Big-info clearfix fl">
            <div class="info">
                <div class="info-left fl">
                    <span>关于虾米</span>
                    <span>入驻虾米</span>
                    <span>资料补全</span>
                    <span>桌面端</span>
                    <span>合作伙伴</span>
                </div>
                <div class="info-right fl ">
                    <div class="clearfix"><a href="">关于我们</a><a href="">虾米招聘</a><a href="">联系我们</a><a
                            href="">隐私权政策</a><a href="">联系客服</a><a href="">意见反馈</a><a href="">回旧版</a></div>
                    <div class="clearfix"><a href="">音乐人</a><a href="">音乐专栏</a></div>
                    <div class="clearfix"><a href="">添加资料</a><a href="">大家想要的专辑</a><a href="">音频上传</a><a
                            href="">MV上传</a></div>
                    <div class="clearfix"><a href="">pc电脑</a><a href="">苹果电脑</a></div>
                    <div class="clearfix small-pic">
                        <div><img src="./img/AI2.jpg" alt=""></div>
                        <div><img src="./img/XD2.jpg" alt=""></div>
                        <div><img src="./img/AI1.jpg" alt=""></div>
                        <div><img src="./img/AI4.jpg" alt=""></div>
                        <div><img src="./img/AI2.jpg" alt=""></div>
                        <div><img src="./img/party1.jpg" alt=""></div>
                        <div><img src="./img/AI5.jpg" alt=""></div>
                        <div><img src="./img/party3.jpg" alt=""></div>
                        <div><img src="./img/party4.jpg" alt=""></div>
                        <div><img src="./img/party5.jpg" alt=""></div>
                        <div><img src="./img/party4.jpg" alt=""></div>
                        <div><img src="./img/AI1.jpg" alt=""></div>
                        <div><img src="./img/AI2.jpg" alt=""></div>
                        <div><img src="./img/AI1.jpg" alt=""></div>
                        <div><img src="./img/AI3.jpg" alt=""></div>
                        <div><img src="./img/AI1.jpg" alt=""></div>
                        <div><img src="./img/AI2.jpg" alt=""></div>
                        <div><img src="./img/AI1.jpg" alt=""></div>
                        <div><img src="./img/AI2.jpg" alt=""></div>
                        <div><img src="./img/AI1.jpg" alt=""></div>
                    </div>
                </div>
            </div>

        </div>
        <div class="focus-us fl">
            <div>关注我们</div>
            <div>
                <span><img src="./img/weibo.png" alt=""></span>
                <span><img src="./img/weixin.png" alt=""></span>
                <span><img src="./img/zhihu.png" alt=""></span>
            </div>
        </div>
        <div class="Erweima fr">
            <p>虾米音乐APP</p>
            <div><img src="./img/Eweima.png" alt=""></div>
        </div>
        <div class="line"></div>
        <!-- footer 最下面 -->
        <ul>
            <li><a href="">淘宝网</a></li>
            <li>|</li>
            <li><a href="">天猫</a></li>
            <li>|</li>
            <li><a href="">支付宝</a></li>
            <li>|</li>
            <li><a href="">飞猪</a></li>
            <li>|</li>
            <li><a href="">聚划算</a></li>
            <li>|</li>
            <li><a href="">阿里云</a></li>
            <li>|</li>
            <li><a href="">阿里妈妈</a></li>
            <li>|</li>
            <li><a href="">1688</a></li>
            <li>|</li>
            <li><a href="">AliOS</a></li>
            <li>|</li>
            <li><a href="">阿里通信</a></li>
            <li>|</li>
            <li><a href="">万网</a></li>
            <li>|</li>
            <li><a href="">阿里游戏</a></li>
            <li>|</li>
            <li><a href="">大麦网</a></li>
            <li>|</li>
            <li><a href="">一淘</a></li>
            <li>|</li>
            <li><a href="">狂野飙车9</a></li>
            <li>|</li>
            <li><a href="">UCCricket</a></li>
            <li>|</li>
            <li><a href="">阿里安全</a></li>


        </ul>
        <div class="subfont">
            <p> © 2007 - 2021 杭州阿里巴巴音乐科技有限公司 版权所有 阿里巴巴旗下公司</p>
            <ul class="subul clearfix">
                <li><a href="">营业执照</a></li>
                <li>|</li>
                <li><a href="">网络文化经营许可证 :浙网文(2019)4999-453号</a></li>
                <li>|</li>
                <li><a href="">增值电信业务经营许可证 :浙B2-20110188 </a></li>
                <li>|</li>
                <li><a href="">浙ICP备18050417号-2</a></li>
                <li>|</li>
                <li><a href="">浙公网安备 33011002012729号</a></li>
            </ul>
        </div>
    </div>


</body>


</html>

咪咕音乐部分网页截图-HTML学生期末作业 

咪咕音乐部分网页源码-HTML学生期末作业 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>咪咕音乐网_和你在一起</title>
	<link rel="stylesheet" type="text/css" href="style/style.css"/>
	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/jquery.SuperSlide.2.1.1.js"></script>
	<script src="js/index.js"></script>
</head>
<body>
	<!--头部开始-->
	<div class="header">
		
		<div class="header_1_wrap">
			
			<div class="header_1">
				
				<div class="header_1_l">
					<a href="#">中国移动旗下音乐门户</a>
					<span>|</span>
					<a href="#">集团产品</a>
					<span>|</span>
					<a href="#">设为首页</a>
					<span>|</span>
					<a href="#">加入收藏</a>	
				</div>
				
				<div class="header_1_r">
					<em class="user-ico"></em>
					<a href="">登录</a>
					<span>|</span>
					<a href="">注册</a>
					<em class="member-ico"></em>
					<a href="">会员</a>
				</div>
			</div>
			
		</div>
		
		<div class="header_2_wrap">
			<div class="header_2">
				<div class="logo"></div>	
				<div class="search">
					<form action="">
						<input type="text" />
						<input type="submit" class="submit" name="submit" value=""/>
					</form>
				</div>
				<div class="header_2_r">
					<a href="" class="tehui"></a>
					<a href="" class="yku"></a>
				</div>
			</div>
		</div>
		

		<div class="header_3_wrap">
			<div class="header_3">
				
				<div class="nav">
					<a href="" class="nav_red">首页</a>
					<a href="" class="cl_ul">彩铃</a>
					<a href="" class="lk_ul">乐库</a>
					<a href="">排行榜</a>
					<a href="">电台</a>
					<a href="" class="sp_ul">视频</a>
					<a href="">专题</a>
					<a href="">社区</a>
					<a href="">大剧院</a>
				</div>
				
				<div class="header_3_r">
					<span class="yc"></span>
					<a href="">原创</a>
					<span class="khd"></span>
					<a href="">客户端</a>
					<span class="kfhz"></span>
					<a href="">开放合作</a>
					
					<div class="header_3_r_xcp">
						<span class="xcp"></span>
						<a href="">新产品</a>
						<ul>
							<li><a href="">咪咕环境音乐</a></li>
							<li><a href="">咪咕家庭音乐</a></li>
							<li><a href="">企业彩铃</a></li>
						</ul>
					</div>
					
				</div>			
			</div>
		</div>
		
		
		<div class="header_4">
			<ul class="cl_ul">
				<li><a href="">彩铃推荐</a></li>
				<li><a href="">个性彩铃</a></li>
				<li><a href="">彩铃DIY</a></li>
			</ul>
			<ul class="lk_ul">
				<li><a href="">分类</a></li>
				<li><a href="">专辑</a></li>
				<li><a href="">歌手</a></li>
				<li><a href="">精选集</a></li>
			</ul>	
			<ul class="sp_ul">
				<li><a href="">MV</a></li>
				<li><a href="">咪咕现场</a></li>
			</ul>				
		</div>
		
	</div>		
	<!--头部结束-->
	
	
	<!--横幅开始-->
	<div class="banner">
		<div class="banner_slide">
			<div class="hd">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div class="bd">
				<ul>
					<li><a href="#" target="_blank"><img src="images/slide1.jpg" /></a>
						<p>【首发】邓紫棋新专辑灰色摇滚单曲《一路逆风》</p>
					</li>
					<li><a href="#" target="_blank"><img src="images/slide2.jpg" /></a>
						<p>【首发】鹿晗反规则鹿式慢情歌《诺言》清新来袭</p>
					</li>
					<li><a href="#" target="_blank"><img src="images/slide3.jpg" /></a>
						<p>精选集:像向日葵一样活着</p>
					</li>
					<li><a href="#" target="_blank"><img src="images/slide4.jpg" /></a>
						<p>乐人志第28期  黄韵玲:吟唱初心的真貌 </p>
					</li>
					<li><a href="#" target="_blank"><img src="images/slide5.jpg" /></a>
						<p>精选集:民谣还你难得的安宁</p>
					</li>
					<li><a href="#" target="_blank"><img src="images/slide6.jpg" /></a>
						<p>音为青春·中国大学音乐超级联赛</p>
					</li>
					<li><a href="#" target="_blank"><img src="images/slide7.jpg" /></a>
						<p>精选集:那些我们迷恋的女声</p>
					</li>
					<li><a href="#" target="_blank"><img src="images/slide8.jpg" /></a>
						<p>专题:韩流第一天团PK大战</p>
					</li>				
				</ul>
			</div>
			<!-- 下面是前/后按钮代码,如果不需要删除即可 -->
			<a class="prev" href="javascript:void(0)"></a>
			<a class="next" href="javascript:void(0)"></a>			
		</div>
		

;