Bootstrap

jq实现网易云首页

<!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="../css/public.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../utils/code.jquery.com_jquery-3.7.0.js"></script>
    <script src="../js/index.js"></script>
</head>

<body>
    <div class="container">
        <!-- 头部 -->
        <div class="head-container">
            <div class="head">
                <div class="head-left">
                    <a href="" class="head-logo"></a>
                    <ul class="head-tip">
                        <li>
                            <a class="head-tip-target" href="">发现音乐</a>
                        </li>
                        <li>
                            <a href="">我的音乐</a>
                        </li>
                        <li>
                            <a href="">关注</a>
                        </li>
                        <li>
                            <a href="">商城</a>
                        </li>
                        <li>
                            <a href="">音乐人</a>
                        </li>
                        <li>
                            <a href="">云推歌</a>
                        </li>
                        <li>
                            <a href="">下载客户端</a>
                        </li>
                    </ul>
                </div>
                <div class="head-right">
                    <div class="head-input">
                        <input type="text" placeholder="音乐/视频/电台/用户">
                    </div>
                    <div class="head-right-center">
                        创作者中心
                    </div>
                    <div class="head-login">
                        登录
                    </div>
                </div>

            </div>
        </div>
        <!-- 分类 -->
        <div class="sort-container">
            <ul class="sort">
                <li class="sort-target">推荐</li>
                <li>排行榜</li>
                <li>歌单</li>
                <li>主播电台</li>
                <li>歌手</li>
                <li>新碟上架</li>
            </ul>
        </div>
        <!-- 轮播图 -->
        <div class="banner-container">
            <div class="banner">
                <div class="banner-main">
                    <div class="banner-img">
                        <ul class="banner-circle">
                            <!-- <li class="banner-circle-target"></li>
                            <li></li>
                            <li></li> -->
                        </ul>
                    </div>
                    <div class="fixed-img">

                    </div>
                </div>
                <div class="banner-left">

                </div>
                <div class="banner-right">

                </div>

            </div>
        </div>
        <!-- 主要部分 -->
        <div class="main-container">
            <div class="main">
                <div class="main-left">
                    <!-- 热门推荐 -->、
                    <div class="main-hot">
                        <div class="main-hot-title">
                            <a href="" class="main-hot-title-word">热门推荐</a>
                            <div class="main-hot-title-tip">
                                <a href="">华语</a>
                                <span>|</span>
                                <a href="">流行</a>
                                <span>|</span>
                                <a href="">摇滚</a>
                                <span>|</span>
                                <a href="">民谣</a>
                                <span>|</span>
                                <a href="">电子</a>
                            </div>
                            <div class="main-hot-title-more">
                                <a href="">更多</a>
                                <span class="more-arrow">

                                </span>
                            </div>
                        </div>
                        <div class="main-hot-songs">
                            <li>
                                <img src="../img/main-hot1.jpg" alt="">
                                <div class="song-msg">
                                    <div class="song-headset"></div>
                                    <span>7175万</span>
                                    <div class="song-play"></div>
                                </div>
                                <div class="hotsong"></div>
                                <p>
                                    <span class="song-tab"></span>
                                    这些充满『强烈画面感』的音乐
                                </p>
                            </li>
                            <li>
                                <img src="../img/main-hot1.jpg" alt="">
                                <div class="song-msg">
                                    <div class="song-headset"></div>
                                    <span>7175万</span>
                                    <div class="song-play"></div>
                                </div>
                                <p>这些充满『强烈画面感』的音乐</p>
                            </li>
                            <li>
                                <img src="../img/main-hot1.jpg" alt="">
                                <div class="song-msg">
                                    <div class="song-headset"></div>
                                    <span>7175万</span>
                                    <div class="song-play"></div>
                                </div>
                                <p>
                                    <span class="song-tab"></span>
                                    这些充满『强烈画面感』的音乐
                                </p>

                            </li>
                            <li>
                                <img src="../img/main-hot1.jpg" alt="">
                                <div class="song-msg">
                                    <div class="song-headset"></div>
                                    <span>7175万</span>
                                    <div class="song-play"></div>
                                </div>
                                <div class="hotsong"></div>
                                <p>这些充满『强烈画面感』的音乐</p>
                            </li>
                            <li>
                                <img src="../img/main-hot1.jpg" alt="">
                                <div class="song-msg">
                                    <div class="song-headset"></div>
                                    <span>7175万</span>
                                    <div class="song-play"></div>
                                </div>
                                <p>这些充满『强烈画面感』的音乐</p>
                            </li>
                            <li>
                                <img src="../img/main-hot1.jpg" alt="">
                                <div class="song-msg">
                                    <div class="song-headset"></div>
                                    <span>7175万</span>
                                    <div class="song-play"></div>
                                </div>
                                <p>这些充满『强烈画面感』的音乐</p>
                            </li>
                            <li>
                                <img src="../img/main-hot1.jpg" alt="">
                                <div class="song-msg">
                                    <div class="song-headset"></div>
                                    <span>7175万</span>
                                    <div class="song-play"></div>
                                </div>
                                <p>这些充满『强烈画面感』的音乐</p>
                            </li>
                            <li>
                                <img src="../img/main-hot1.jpg" alt="">
                                <div class="song-msg">
                                    <div class="song-headset"></div>
                                    <span>7175万</span>
                                    <div class="song-play"></div>
                                </div>
                                <p>这些充满『强烈画面感』的音乐</p>
                            </li>
                        </div>

                    </div>

                    <!-- 新碟上架 -->
                    <div class="main-new">
                        <div class="main-new-title">
                            <div class="main-new-title-word">
                                新碟上架
                            </div>
                            <div class="main-hot-title-more">
                                <a href="">更多</a>
                                <span class="more-arrow">

                                </span>
                            </div>
                        </div>
                        <div class="main-new-disk">
                            <div class="new-dis-container">
                                <ul class="main-new-disk-list">
                                    <!-- <li class="new-disk-list">
                                        <ul>
                                            <li>
                                                <div class="new-disk-img">
                                                    <img src="../img/newdisk1.jpg" alt="">
                                                    <div class="new-disk-play"></div>
                                                </div>
                                                <p class="new-disk-name">
                                                    <span>共同的土地</span>
                                                </p>
                                                <p class="new-disk-author">
                                                    <span>缺省</span>
                                                </p>
                                            </li>
                                            <li>
                                                <div class="new-disk-img">
                                                    <img src="../img/newdisk1.jpg" alt="">
                                                    <div class="new-disk-play"></div>
                                                </div>
                                                <p class="new-disk-name">
                                                    <span>共同的土地</span>
                                                </p>
                                                <p class="new-disk-author">
                                                    <span>缺省</span>
                                                </p>
                                            </li>
                                            <li>
                                                <div class="new-disk-img">
                                                    <img src="../img/newdisk1.jpg" alt="">
                                                    <div class="new-disk-play"></div>
                                                </div>
                                                <p class="new-disk-name">
                                                    <span>共同的土地</span>
                                                </p>
                                                <p class="new-disk-author">
                                                    <span>缺省</span>
                                                </p>
                                            </li>
                                            <li>
                                                <div class="new-disk-img">
                                                    <img src="../img/newdisk1.jpg" alt="">
                                                    <div class="new-disk-play"></div>
                                                </div>
                                                <p class="new-disk-name">
                                                    <span>共同的土地</span>
                                                </p>
                                                <p class="new-disk-author">
                                                    <span>缺省</span>
                                                </p>
                                            </li>
                                            <li>
                                                <div class="new-disk-img">
                                                    <img src="../img/newdisk1.jpg" alt="">
                                                    <div class="new-disk-play"></div>
                                                </div>
                                                <p class="new-disk-name">
                                                    <span>共同的土地</span>
                                                </p>
                                                <p class="new-disk-author">
                                                    <span>缺省</span>
                                                </p>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="new-disk-list">
                                        <ul>
                                            <li>
                                                <div class="new-disk-img">
                                                    <img src="../img/newdisk2.jpg" alt="">
                                                    <div class="new-disk-play"></div>
                                                </div>
                                                <p class="new-disk-name">
                                                    <span>GUTS</span>
                                                </p>
                                                <p class="new-disk-author">
                                                    <span>Olivia Rodrigo</span>
                                                </p>
                                            </li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                        </ul>
                                    </li>
                                    <li class="new-disk-list">
                                        <ul>
                                            <li>
                                                <div class="new-disk-img">
                                                    <img src="../img/newdisk1.jpg" alt="">
                                                    <div class="new-disk-play"></div>
                                                </div>
                                                <p class="new-disk-name">
                                                    <span>共同的土地</span>
                                                </p>
                                                <p class="new-disk-author">
                                                    <span>缺省</span>
                                                </p>
                                            </li>
                                        </ul>
                                    </li> -->
                                </ul>
                            </div>

                            <!-- 前后切换 -->
                            <div class="new-disk-pre">

                            </div>
                            <div class="new-disk-next">

                            </div>
                        </div>
                    </div>

                    <!-- 榜单 -->
                    <div class="main-bill">
                        <div class="main-bill-title">
                            <div class="main-bill-title-word">
                                榜单
                            </div>
                            <div class="main-bill-title-more">
                                <a href="">更多</a>
                                <span class="more-arrow">

                                </span>
                            </div>
                        </div>
                        <ul class="main-bill-list">
                            <li class="main-bill-list-li">
                                <div class="bill-list-top">
                                    <div class="bill-list-top-left">
                                        <img src="../img/bill1.jpg" alt="">
                                    </div>

                                    <div class="bill-list-top-right">
                                        <p>飙升榜</p>
                                        <div class="bill-top-right-logo">
                                            <a href="" class="bill-top-right-play"></a>
                                            <a href="" class="bill-top-right-add"></a>
                                        </div>
                                    </div>
                                </div>
                                <ul class="bill-list-song">
                                    <li>
                                        <span style="color: #c10d0c;">1</span>
                                        <a href="" >公路商店(issue)</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span style="color: #c10d0c;">2</span>
                                        <a href="">鲜花(live)</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span style="color: #c10d0c;">3</span>
                                        <a href="">WTF Freestyle</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span>4</span>
                                        <a href="">鲜花</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span>5</span>
                                        <a href="">活着</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span>6</span>
                                        <a href="">I'M A VINGIN</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span>7</span>
                                        <a href="">野草</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span>8</span>
                                        <a href="">阴转晴</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span>9</span>
                                        <a href="">我们会走在哪里</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span>10</span>
                                        <a href="">姑娘别哭泣</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="" class="bill-list-song-more">查看更多></a>
                                    </li>
                                </ul>
                            </li>
                            <li class="main-bill-list-li">
                                <div class="bill-list-top">
                                    <div class="bill-list-top-left">
                                        <img src="../img/bill2.jpg" alt="">
                                    </div>

                                    <div class="bill-list-top-right">
                                        <p>新歌榜</p>
                                        <div class="bill-top-right-logo">
                                            <a href="" class="bill-top-right-play"></a>
                                            <a href="" class="bill-top-right-add"></a>
                                        </div>
                                    </div>
                                </div>
                                <ul class="bill-list-song">
                                    <li>
                                        <span style="color: #c10d0c;">1</span>
                                        <a href="">公路商店(issue)</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span style="color: #c10d0c;">2</span>
                                        <a href="">唯一</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span style="color: #c10d0c;">3</span>
                                        <a href="">NUNA3.0</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span>4</span>
                                        <a href="">风之海</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span>5</span>
                                        <a href="">失落盛行</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span>6</span>
                                        <a href="">圣山</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span>7</span>
                                        <a href="">何必</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span>8</span>
                                        <a href="">太聪明 Beat</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span>9</span>
                                        <a href="">情人</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span>10</span>
                                        <a href="">Qollarimdan tut</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="" class="bill-list-song-more">查看更多></a>
                                    </li>
                                </ul>
                            </li>
                            <li class="main-bill-list-li">
                                <div class="bill-list-top">
                                    <div class="bill-list-top-left">
                                        <img src="../img/bill3.jpg" alt="">
                                    </div>

                                    <div class="bill-list-top-right">
                                        <p>原创榜</p>
                                        <div class="bill-top-right-logo">
                                            <a href="" class="bill-top-right-play"></a>
                                            <a href="" class="bill-top-right-add"></a>
                                        </div>
                                    </div>
                                </div>
                                <ul class="bill-list-song">
                                    <li>
                                        <span style="color: #c10d0c;">1</span>
                                        <a href="">失落盛行</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span style="color: #c10d0c;">2</span>
                                        <a href="">遥遥望你</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span style="color: #c10d0c;">3</span>
                                        <a href="">凌晨三点半</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span>4</span>
                                        <a href="">公路商店(issue)</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span>5</span>
                                        <a href="">Forget-Me-Not</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span>6</span>
                                        <a href="">败贝</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span>7</span>
                                        <a href="">如履薄冰</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span>8</span>
                                        <a href="">破唱片 Broken Record</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span>9</span>
                                        <a href="">江湖爱</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span>10</span>
                                        <a href="">流浪水母</a>
                                        <div class="bill-list-song-oper">
                                            <div class="bill-list-song-oper-play">

                                            </div>
                                            <div class="bill-list-song-oper-add">

                                            </div>
                                            <div class="bill-list-song-oper-collect">

                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="" class="bill-list-song-more">查看更多></a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- main-right -->
                <div class="main-right">
                    <!-- 未登录状态 -->
                    <div class="main-user">
                        <p class="main-user-word">
                            登录网易云音乐,可以享受无限收藏的乐趣,并且无限同步到手机
                        </p>
                        <div class="main-user-btn">
                            用户登录
                        </div>
                    </div>

                    <!-- 入驻歌手 -->
                    <div class="main-singer">
                        <div class="main-singer-title">
                            <span>入驻歌手</span>
                            <a href="">查看更多></a>
                        </div>
                        <ul class="main-singer-card">
                            <li>
                                <div class="main-singer-head">
                                    <img src="../img/singer1.jpg" alt="">
                                </div>
                                <div class="main-singer-info">
                                    <h4>张惠妹aMEI</h4>
                                    <p>台湾歌手张惠妹</p>
                                </div>
                            </li>
                            <li>
                                <div class="main-singer-head">
                                    <img src="../img/singer1.jpg" alt="">
                                </div>
                                <div class="main-singer-info">
                                    <h4>张惠妹aMEI</h4>
                                    <p>台湾歌手张惠妹</p>
                                </div>
                            </li>
                            <li>
                                <div class="main-singer-head">
                                    <img src="../img/singer1.jpg" alt="">
                                </div>
                                <div class="main-singer-info">
                                    <h4>张惠妹aMEI</h4>
                                    <p>台湾歌手张惠妹</p>
                                </div>
                            </li>
                            <li>
                                <div class="main-singer-head">
                                    <img src="../img/singer1.jpg" alt="">
                                </div>
                                <div class="main-singer-info">
                                    <h4>张惠妹aMEI</h4>
                                    <p>台湾歌手张惠妹</p>
                                </div>
                            </li>
                            <li>
                                <div class="main-singer-head">
                                    <img src="../img/singer1.jpg" alt="">
                                </div>
                                <div class="main-singer-info">
                                    <h4>张惠妹aMEI</h4>
                                    <p>台湾歌手张惠妹</p>
                                </div>
                            </li>

                        </ul>
                        <div class="main-singer-btn">
                            申请成为网易音乐人
                        </div>
                        <div class="main-anchor">
                            <div class="main-anchor-title">
                                热门主播
                            </div>
                            <ul class="main-anchor-card">
                                <li>
                                    <div class="main-anchor-head">
                                        <img src="../img/anchor1.jpg" alt="">
                                    </div>
                                    <div class="main-anchor-info">
                                        <div>陈立</div>
                                        <p>心理学家、美食家陈立教授</p>
                                    </div>
                                </li>
                                <li>
                                    <div class="main-anchor-head">
                                        <img src="../img/anchor1.jpg" alt="">
                                    </div>
                                    <div class="main-anchor-info">
                                        <div>陈立</div>
                                        <p>心理学家、美食家陈立教授</p>
                                    </div>
                                </li>
                                <li>
                                    <div class="main-anchor-head">
                                        <img src="../img/anchor1.jpg" alt="">
                                    </div>
                                    <div class="main-anchor-info">
                                        <div>陈立</div>
                                        <p>心理学家、美食家陈立教授</p>
                                    </div>
                                </li>
                                <li>
                                    <div class="main-anchor-head">
                                        <img src="../img/anchor1.jpg" alt="">
                                    </div>
                                    <div class="main-anchor-info">
                                        <div>陈立</div>
                                        <p>心理学家、美食家陈立教授</p>
                                    </div>
                                </li>
                                <li>
                                    <div class="main-anchor-head">
                                        <img src="../img/anchor1.jpg" alt="">
                                    </div>
                                    <div class="main-anchor-info">
                                        <div>陈立</div>
                                        <p>心理学家、美食家陈立教授</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- 底部 -->
        <div class="foot-container">
            <div class="foot">
                <!-- enter -->
                <ul class="foot-enter">
                    <li>
                        <a href="" class="foot-enter-logo logo-openplatform">

                        </a>
                        <p>音乐开放平台</p>
                    </li>
                    <li>
                        <a href="" class="foot-enter-logo logo-trade">

                        </a>
                        <p>云村交易所</p>
                    </li>
                    <li>
                        <a href="" class="foot-enter-logo logo-amped">

                        </a>
                        <p>Amped Studio</p>
                    </li>
                    <li>
                        <a href="" class="foot-enter-logo logo-xstudio">

                        </a>
                        <p>X Studio虚拟歌手</p>
                    </li>
                    <li>
                        <a href="" class="foot-enter-logo logo-auth">

                        </a>
                        <p>用户认证</p>
                    </li>
                    <li>
                        <a href="" class="foot-enter-logo logo-musician">

                        </a>
                        <p>音乐交易平台</p>
                    </li>
                    <li>
                        <a href="" class="foot-enter-logo logo-cloudsong">

                        </a>
                        <p>云推歌</p>
                    </li>
                    <li>
                        <a href="" class="foot-enter-logo logo-reward">

                        </a>
                        <p>赞赏</p>
                    </li>
                </ul>
                <!-- msg -->
                <div class="msg">
                    <p class="msg-link">
                        <a href="">服务条款</a>
                        <span>|</span>
                        <a href="">隐私政策</a>
                        <span>|</span>
                        <a href="">儿童隐私政策</a>
                        <span>|</span>
                        <a href="">版权投诉</a>
                        <span>|</span>
                        <a href="">投资者关系</a>
                        <span>|</span>
                        <a href="">广告合作</a>
                        <span>|</span>
                        <a href="">联系我们</a>
                    </p>
                    <p class="msg-word">
                        <a href="" style="margin-right: 14px;">廉正举报</a>
                        <span style="margin-right: 14px;">
                            不良信息举报邮箱: [email protected]
                        </span>
                        <span style="margin: 0;">客服热线:95163298</span>
                    </p>
                    <p class="msg-word">
                        <span>
                            互联网宗教信息服务许可证:浙(2022)0000120
                        </span>
                        <span>
                            增值电信业务经营许可证:浙B2-20150198
                        </span>
                        <a href="">粤B2-20090191-18 工业和信息化部备案管理系统网站</a>
                    </p>
                    <p class="msg-word">
                        <span style="margin-right: 14px;">
                            网易公司版权所有©1997-2023
                        </span>
                        <span>
                            杭州乐读科技有限公司运营:
                        </span>
                        <a href="">浙网文[2021] 1186-054号</a>
                        <a href="" class="police-a">
                            <span class="police-logo"></span>
                            <span class="police">浙公网安备 33010902002564号</span>
                        </a>

                    </p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

css

index.css
/* 分类 */
.sort-container {
    width: 100%;
    min-width: 1200px;
    height: 35px;
    box-sizing: border-box;
    background-color: #C20C0C;
    border-bottom: 1px solid #a40011;
    position: relative;
}

.sort {
    width: 1200px;
    height: 34px;
    /* background-color: antiquewhite; */
    margin: auto;
    box-sizing: border-box;
    padding-left: 180px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #fff;
}

.sort li {
    height: 20px;
    line-height: 20px;
    padding: 0 13px;
    margin: 0 17px;
    border-radius: 20px;
}

.sort-target {
    background-color: #9B0909;
}

.sort :hover {
    background-color: #9B0909;
    cursor: pointer;
}

/* 轮播图 */
.banner-container {
    width: 100%;
    min-width: 1200px;
    height: 285px;
    background-image: url('http://p1.music.126.net/aDxcTn-0a6hLo0rpClb9ZA==/109951168963535337.jpg?imageView&blur=40x20');
    background-size: 100% 285px;
    position: relative;
}

.banner {
    width: 1200px;
    height: 285px;
    margin: auto;
    position: relative;
}

.banner-main {
    width: 984px;
    height: 100%;
    margin: auto;
    display: flex;
}

.banner-img {
    width: 730px;
    height: 285px;
    background-image: url('https://p1.music.126.net/aDxcTn-0a6hLo0rpClb9ZA==/109951168963535337.jpg?imageView&quality=89');
    background-size: 100% 285px;
    position: relative;
}

.banner-circle {
    height: 20px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
}

.banner-circle li {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
    margin-right: 8px;
    cursor: pointer;
}

.banner-circle-target {
    background-color: red !important;
}

.banner-circle :hover {
    background-color: red;
}

.fixed-img {
    width: 254px;
    height: 285px;
    background-image: url('../img/download.png');
    background-size: cover;
}

.banner-left {
    width: 37px;
    height: 63px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 50px;
    background-image: url('../img/banner.png');
    background-position: 0 -360px;
}

.banner-left:hover {
    background-position: 0 -430px;
}

.banner-right {
    width: 37px;
    height: 63px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 50px;
    background-image: url('../img/banner.png');
    background-position: 0 -508px;
}

.banner-right:hover {
    background-position: 0 -578px;
}

/* 主要部分 */
.main-container {
    width: 100%;
    min-width: 1200px;
    height: 1425px;
    background-color: rgb(245, 245, 245);
    position: relative;
}

.main {
    width: 980px;
    height: 1425px;
    margin: auto;
    display: flex;
    border-left:1px solid #d3d3d3 ;
    border-right:1px solid #d3d3d3 ;
}

.main-left {
    width: 729px;
    height: 100%;
    padding: 20px 20px 40px 20px;
    box-sizing: border-box;
    background-color: #fff;
    border-right:1px solid #d3d3d3 ;
}

/* 热门推荐 */
.main-hot {
    width: 689px;
    height: 523px;
    /* background-color: antiquewhite; */
}

.main-hot-title {
    width: 645px;
    height: 33px;
    padding: 0 10px 0 34px;
    background-image: url('../img/index.png');
    background-repeat: no-repeat;
    background-position: -225px -156px;
    border-bottom: 2px solid #C10D0C;
    display: flex;
    /* align-items: center; */
    font-size: 12px;
    color: #666;
    position: relative;
}

.main-hot-title-word {
    display: block;
    width: 80px;
    height: 28px;
    line-height: 28px;
    font-size: 20px;
    color: #333;
}

.main-hot-title-tip {
    height: 16px;
    line-height: 16px;
    margin: 7px 0 0 20px;
}

.main-hot-title-tip a {
    font-size: 12px;
    color: #666;
}

.main-hot-title-tip a:hover {
    text-decoration: underline;
}

.main-hot-title-tip span {
    color: #ccc;
    margin: 0 14px;
}

.main-hot-title-more {
    position: absolute;
    top: 9px;
    right: 0;
}

.main-hot-title-more a {
    font-size: 12px;
    color: #666;
}

.main-hot-title-more a:hover {
    text-decoration: underline;
}

.more-arrow {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    vertical-align: middle;
    background-image: url('../img/index.png');
    background-position: 0 -240px;
}

.main-hot-songs {
    width: 100%;
    height: 468px;
    margin-top: 20px;
    /* background-color: red; */
    display: grid;
    grid-template-columns: repeat(4, 140px);
    grid-template-rows: repeat(2, 204px);
    gap: 30px 42px;
}

.main-hot-songs li {
    width: 140px;
    height: 204px;
    position: relative;
}

.main-hot-songs li img {
    width: 140px;
    height: 140px;
}

.song-msg {
    position: absolute;
    bottom: 64px;
    left: 0;
    width: 100%;
    height: 27px;
    background-image: url('../img/coverall.png');
    background-position: 0 -537px;
    color: #ccc;
    display: flex;
}

.song-headset {
    width: 14px;
    height: 11px;
    background-image: url('../img/iconall.png');
    background-position: 0 -24px;
    margin: 9px 5px 9px 10px;
}

.song-msg span {
    display: inline-block;
    margin-top: 7px;
    height: 16.8px;
    line-height: 16.8px;
    font-size: 12px;
    color: #ccc;
}

.song-play {
    position: absolute;
    right: 10px;
    bottom: 5px;
    width: 16px;
    height: 17px;
    background-image: url('../img/iconall.png');
    background-position: 0 0;
    cursor: pointer;
}

.hotsong {
    width: 40px;
    height: 40px;
    background-image: url('../img/icon2.png');
    background-position: -135px -220px;
    position: absolute;
    top: 0;
    left: 0;
}

.main-hot-songs li p {
    cursor: pointer;
    font-size: 14px;
    display: inline-block;
}

.song-tab {
    display: inline-block;
    margin-right: 4px;
    position: relative;
    top: 2px;
    width: 35px;
    height: 15px;
    background-image: url('../img/icon.png');
    background-position: -31px -658px;
}

.main-hot-songs li p:hover {
    text-decoration: underline;
}

/* 新碟上架 */
.main-new {
    width: 689px;
    height: 243px;
    position: relative;
    margin-top: 35px;
}

.main-new-title {
    width: 645px;
    height: 33px;
    padding: 0 10px 0 34px;
    background-image: url('../img/index.png');
    background-repeat: no-repeat;
    background-position: -225px -156px;
    border-bottom: 2px solid #C10D0C;
    display: flex;
    /* align-items: center; */
    font-size: 12px;
    color: #666;
    position: relative;
}

.main-new-title-word {
    display: block;
    width: 80px;
    height: 28px;
    line-height: 28px;
    font-size: 20px;
    color: #333;
    cursor: pointer;
}

.main-new-title-more {
    position: absolute;
    top: 9px;
    right: 0;
}

.main-new-title-more a {
    font-size: 12px;
    color: #666;
}

.main-new-title-more a:hover {
    text-decoration: underline;
}

.main-new-disk {
    width: 645px;
    height: 180px;
    margin: 20px 0 37px;
    padding-left: 16px;
    padding-right: 24px;
    border: 1px solid #d3d3d3;
    background-color: rgb(245, 245, 245);
    position: relative;
}

.new-dis-container {
    width: 645px;
    height: 180px;
    position: relative;
    overflow: hidden;
}

.main-new-disk-list {
    width: 1935px;
    height: 100%;
    position: relative;
    left: 0;
    transition: 0.3s;
    display: flex;
}

.new-disk-list {
    width: 645px;
    height: 180px;
    position: absolute;
    /* background-color: blue; */
}

.new-disk-list ul {
    width: 645px;
    height: 150px;
    margin-top: 28px;
    display: flex;
}

.new-disk-list li {
    width: 118px;
    height: 150px;
    margin-left: 11px;
    font-size: 12px;
}


.new-disk-img {
    width: 118px;
    height: 100px;
    background-image: url('../img/coverall.png');
    background-position: 0 -570px;
    position: relative;
    cursor: pointer;
}

.new-disk-img img {
    width: 100px;
    height: 100px;
}


.new-disk-play {
    display: none;
    width: 22px;
    height: 22px;
    background-image: url('../img/iconall.png');
    background-position: 0 -85px;
    position: absolute;
    left: 72px;
    bottom: 5px;
    cursor: pointer;
}

.new-disk-img img:hover~.new-disk-play {
    display: block;
}

.new-disk-play:hover {
    display: block;
    background-position: 0 -110px;
}

.new-disk-name span {
    line-height: 18px;
    color: #000;
    cursor: pointer;
}

.new-disk-author span {
    line-height: 18px;
    color: #666;
    cursor: pointer;
}

.new-disk-list li p span:hover {
    text-decoration: underline;
}

/* 前后切换 */
.new-disk-pre {
    width: 17px;
    height: 17px;
    position: absolute;
    top: 71px;
    background-image: url('../img/index.png');
    background-position: -260px -75px;
    left: 12px;
    cursor: pointer;
}

.new-disk-pre:hover {
    background-position: -280px -75px;
}

.new-disk-next {
    width: 17px;
    height: 17px;
    position: absolute;
    top: 71px;
    background-image: url('../img/index.png');
    background-position: -300px -75px;
    right: 6px;
    cursor: pointer;
}

.new-disk-next:hover {
    background-position: -320px -75px;
}

/* 榜单 */
.main-bill {
    width: 689px;
    height: 527px;
    position: relative;
    margin-top: 37px;
}

.main-bill-title {
    width: 645px;
    height: 33px;
    padding: 0 10px 0 34px;
    background-image: url('../img/index.png');
    background-repeat: no-repeat;
    background-position: -225px -156px;
    border-bottom: 2px solid #C10D0C;
    display: flex;
    /* align-items: center; */
    font-size: 12px;
    color: #666;
    position: relative;
}

.main-bill-title-word {
    display: block;
    width: 80px;
    height: 28px;
    line-height: 28px;
    font-size: 20px;
    color: #333;
    cursor: pointer;
}

.main-bill-title-more {
    position: absolute;
    top: 9px;
    right: 0;
}

.main-bill-title-more a {
    font-size: 12px;
    color: #666;
}

.main-bill-title-more a:hover {
    text-decoration: underline;
}

.main-bill-list {
    width: 689px;
    height: 472px;
    position: relative;
    margin-top: 20px;
    background-image: url('../img/index_bill.png');
    display: flex;
}

.main-bill-list-li{
    width: 230px;
    height: 100%;
    position: relative;
}

.bill-list-top{
    width: 211px;
    height: 100px;
    padding: 20px 0 0 19px;
    display: flex;
}

.bill-list-top-left,
.bill-list-top-left img{
    width: 80px;
    height: 80px;
}

.bill-list-top-right{
    width: calc(100% - 80px);
    height: 51px;
    padding-left: 10px;
    padding-top: 6px;
    box-sizing: border-box;
}

.bill-list-top-right p{
    width: 100%;
    height: 19px;
    line-height: 19px;
    font-size: 14px;
    font-weight: bold;
}

.bill-top-right-logo{
    width: 100%;
    height: 22px;
    margin-top: 10px;
}

.bill-top-right-logo a{
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    background-image: url('../img/index.png');
}

.bill-top-right-play{
    background-position: -267px -205px;
}

.bill-top-right-play:hover{
    background-position: -267px -235px;
}

.bill-top-right-add{
    background-position: -300px -205px;
}

.bill-top-right-add:hover{
    background-position: -300px -235px;
}

.bill-list-song{
    width: 100%;
    height: 352px;
    padding-left: 15px;
    box-sizing: border-box;
}

.bill-list-song li{
    width: 215px;
    height: 32px;
    display: flex;
    position: relative;
}

.bill-list-song li span{
    display: block;
    width: 35px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 16px;
    color: #666;
}

.bill-list-song li a{
    display: block;
    width: calc(100% - 35px);
    height: 32px;
    line-height: 32px;
    font-size: 12px;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bill-list-song li a:hover{
    text-decoration: underline;
}

.bill-list-song-oper{
    position: absolute;
    width: 82px;
    height: 19px;
    top: 7px;
    right: 0;
    /* background-color: yellow; */
    display:none;
}

.bill-list-song-oper div{
    width: 17px;
    height: 17px;
    cursor: pointer;
    margin-right: 10px;
}

.bill-list-song-oper-play{
    background-image: url('../img/index.png');
    background-position: -267px -268px;
}

.bill-list-song-oper-play:hover{
    background-position: -267px -288px;
}

.bill-list-song-oper-add{
    margin-top: 2px;
    background-image: url('../img/icon.png');
    background-position: 0 -700px;
}
.bill-list-song-oper-add:hover{
    background-position: -22px -700px;
}

.bill-list-song-oper-collect{
    background-image: url('../img/index.png');
    background-position: -297px -268px;
}

.bill-list-song-oper-collect:hover{
    background-position: -297px -288px;
}



.bill-list-song-more{
    width: 100% !important;
    padding-right: 32px;
    box-sizing: border-box;
    text-align: right;
}




























/* main-right */
.main-right {
    width: 250px;
    height: 100%;
    position: relative;
    background-color: #fff;
}

/* 未登录状态 */
.main-user {
    width: 250px;
    height: 126px;
    background-image: url('../img/index.png');
    background-position: 0 0;
    padding: 0 22.5px;
    box-sizing: border-box;
}

.main-user-word {
    width: 205px;
    line-height: 22px;
    padding: 16px 0;
    font-size: 12px;
}

.main-user-btn {
    display: block;
    width: 100px;
    height: 31px;
    line-height: 31px;
    font-size: 12px;
    text-align: center;
    margin: auto;
    color: #fff;
    text-shadow: 0 1px 0 #8a060b;
    background-image: url('../img/index.png');
    background-position: 0 -195px;
    cursor: pointer;
}

.main-user-btn:hover {
    background-position: -110px -195px;
}

/* 入驻歌手 */
.main-singer {
    width: 250px;
    height: 455px;
    position: relative;
    background-color: #fff;
    margin-top: 15px;
}

.main-singer-title {
    width: 210px;
    height: 23px;
    border-bottom: 2px solid #d13030;
    margin: auto;
    font-size: 12px;
    color: #333;
}

.main-singer-title span {
    font-weight: 700;
}

.main-singer-title a {
    float: right;
    font-size: 12px;
    color: #666;
}

.main-singer-title a:hover {
    text-decoration: underline;
}

.main-singer-card {
    width: 230px;
    height: 380px;
    margin: 6px 0 0 20px;
}

.main-singer-card li {
    width: 210px;
    height: 62px;
    margin-top: 14px;
    background-color: #fafafa;
    display: flex;
    cursor: pointer;
}

.main-singer-head,
.main-singer-head img {
    width: 62px;
    height: 62px;
}

.main-singer-info{
    width: 133px;
    height: 60px;
    padding-left: 14px;
    border: 1px solid #e9e9e9;
    border-left: none;
}

.main-singer-info h4{
    padding-top: 8px;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
}

.main-singer-info p{
    height: 16px;
    line-height: 16px;
    padding-top: 8px;
    font-size: 12px;
    color: #666;
}

.main-singer-btn{
    width: 210px;
    height: 31px;
    line-height: 31px;
    text-align: center;
    margin-left: 20px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid rgb(195, 195, 195);
    box-sizing: border-box;
    box-shadow: 0 1px rgb(195, 195, 195);
}

/* 热门主播 */
.main-anchor{
    width: 250px;
    height: 294px;
    margin-top: 25px;
    background-color: #fff;
}

.main-anchor-title{
    width: 210px;
    height: 23px;
    border-bottom: 1px solid #ccc;
    font-size: 12px;
    font-weight: bold;
    margin: auto;
}

.main-anchor-card{
    width: 230px;
    height: 250px;
    margin-left: 20px;
    margin-top: 20px;
    font: 12px;
}

.main-anchor-card li{
    width: 210px;
    height: 40px;
    margin-bottom: 10px;
    display: flex;
}

.main-anchor-head,
.main-anchor-head img{
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.main-anchor-info{
    width: 160px;
    height: 40px;
    margin-left: 10px;
    font-size: 12px;
}

.main-anchor-info div{
    height: 20px;
    line-height: 20px;
    color: #000;
    cursor: pointer;
}

.main-anchor-info div:hover{
    text-decoration: underline;
}

.main-anchor-info p{
    width: 160px;
    height: 20px;
    line-height: 20px;
    color: #666;
    /* 超出变成省略号 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
public.css
* {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
}

.container {
    width: 100%;
    min-width: 1200px;
}

/* 头部 */
.head-container {
    width: 100%;
    min-width: 1200px;
    height: 70px;
    box-sizing: border-box;
    background-color: #242424;
    border-bottom: 1px solid #000;
    position: relative;
}

.head {
    width: 1200px;
    height: 69px;
    /* background-color: antiquewhite; */
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.head-left {
    height: 69px;
    display: flex;
}

.head-logo {
    display: block;
    width: 157px;
    height: 69px;
    padding-right: 20px;
    background-image: url('../img/topbar.png');
    background-position: 0px 0px;
}

.head-tip {
    height: 69px;
    display: flex;
}

.head-tip li {
    height: 69px;
}

.head-tip li a {
    display: inline-block;
    height: 69px;
    line-height: 69px;
    text-align: center;
    padding: 0 19px;
    color: #ccc;
    font-size: 14px;
}

.head-tip-target {
    background-color: #000;
    color: #fff !important;
}

.head-tip li a:hover {
    background-color: #000;
    color: #fff !important;
}

.head-right {
    height: 69px;
    display: flex;
    align-items: center;
}

.head-input {
    width: 158px;
    height: 32px;
    background-image: url(../img/topbar.png);
    background-position: 0 -99px;
    background-color: #fff;
    border-radius: 32px;
    position: relative;
}

.head-input input {
    width: 116px;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 30px;
    border: none;
    outline: none;
}

.head-right-center {
    width: 90px;
    height: 32px;
    box-sizing: border-box;
    color: #ccc;
    border-radius: 20px;
    line-height: 30px;
    border: 1px solid #4F4F4F;
    font-size: 12px;
    text-align: center;
    margin-left: 12px;
    cursor: pointer;
}

.head-right-center:hover {
    color: #fff;
    border-color: #fff;
}

.head-login {
    width: 28px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 12px;
    color: #666;
    margin-left: 20px;
    margin-right: 22px;
    cursor: pointer;
}

.head-login:hover {
    color: #787878;
    text-decoration: underline;
}


/* 底部 */
.foot-container {
    width: 100%;
    min-width: 1200px;
    height: 325px;
    position: relative;
    border-top: 1px solid #d3d3d3;
    background: #f2f2f2;
}

.foot {
    width: 980px;
    height: 325px;
    margin: auto;
    /* background-color: antiquewhite; */
}

/* enter */
.foot-enter {
    width: 980px;
    height: 71px;
    /* background-color: #fff; */
    padding-top: 33px;
    display: flex;
    justify-content: space-around;
    margin-bottom: 60px;
}

.foot-enter li {
    width: 100px;
    height: 71px;
    /* background-color: red; */
    position: relative;
}

.foot-enter-logo {
    display: block;
    width: 45px;
    height: 45px;
    background-image: url('../img/foot_enter_new2.png');
    background-size: 220px 220px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.logo-openplatform {
    background-position: -170px -5px;
}

.logo-openplatform:hover {
    background-position: -5px -115px;
}

.logo-trade {
    background-position: -5px -170px;
}

.logo-trade:hover {
    background-position: -60px -170px;
}

.logo-amped {
    background-position: -5px -60px;
}

.logo-amped:hover {
    background-position: -60px -5px;
}

.logo-xstudio {
    background-image: url('../img/xStudio.png');
    background-size: 45px 45px;
}

.logo-xstudio:hover {
    background-image: url('../img/xStudioHover.png');
    background-size: 45px 45px;
}

.logo-auth {
    background-position: -60px -60px;
}

.logo-auth:hover {
    background-position: -115px -5px;
}

.logo-musician {
    background-position: -115px -115px;
}

.logo-musician:hover {
    background-position: -5px -5px;
}

.logo-cloudsong {
    background-image: url('../img/cloudSong.png');
    background-size: 45px;
}

.logo-cloudsong:hover {
    background-image: url('../img/cloudSongHover.png');
    background-size: 45px;
}

.logo-reward {
    background-position: -170px -115px;
}

.logo-reward:hover {
    background-position: -60px -115px;
}


.foot-enter li p {
    width: 100px;
    height: 12px;
    line-height: 12px;
    position: absolute;
    bottom: 0;
    font-size: 12px;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
}

/* msg */
.msg {
    width: 980px;
    height: 100px;
    /* background-color: #fff; */
    position: relative;
    font-size: 14px;
    color: #666;
}

.msg-link,
.msg-word {
    height: 24px;
    line-height: 24px;
    text-align: center;
}

.msg a {
    font-size: 14px;
    color: #666;
}

.msg-link span {
    color: #d9d9d9;
    margin: 0 8px;
}

.msg a:hover {
    text-decoration: underline;
}

.police-logo {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url('../img/police.png');
    background-size: cover;
    margin-left: 2px;
    vertical-align: -2px;
}

.police-a:hover {
    text-decoration: none !important;
}

.police-logo:hover~.police {
    text-decoration: underline;
}

.police:hover {
    text-decoration: underline;
}

js

$(function () {
    // 轮播图
    var bannerCount = 0;
    var bannerImg = [
        {
            backImg: "http://p1.music.126.net/aDxcTn-0a6hLo0rpClb9ZA==/109951168963535337.jpg?imageView&blur=40x20",
            centerImg: "https://p1.music.126.net/aDxcTn-0a6hLo0rpClb9ZA==/109951168963535337.jpg?imageView&quality=89"
        },
        {
            backImg: "http://p1.music.126.net/_bnQhZdu335wUxh6VPyZpQ==/109951168968517586.jpg?imageView&blur=40x20",
            centerImg: "https://p1.music.126.net/_bnQhZdu335wUxh6VPyZpQ==/109951168968517586.jpg?imageView&quality=89"
        },
        {
            backImg: "http://p1.music.126.net/aDxcTn-0a6hLo0rpClb9ZA==/109951168963535337.jpg?imageView&blur=40x20",
            centerImg: "https://p1.music.126.net/aDxcTn-0a6hLo0rpClb9ZA==/109951168963535337.jpg?imageView&quality=89"
        },
        {
            backImg: "http://p1.music.126.net/_bnQhZdu335wUxh6VPyZpQ==/109951168968517586.jpg?imageView&blur=40x20",
            centerImg: "https://p1.music.126.net/_bnQhZdu335wUxh6VPyZpQ==/109951168968517586.jpg?imageView&quality=89"
        },
        {
            backImg: "http://p1.music.126.net/aDxcTn-0a6hLo0rpClb9ZA==/109951168963535337.jpg?imageView&blur=40x20",
            centerImg: "https://p1.music.126.net/zGfNaVSNgllRwIJFUOIBlw==/109951168968356614.jpg?imageView&quality=89"
        }
    ]
    var str = '';
    for (var i = 0; i < bannerImg.length; i++) {
        if (i == 0) {
            str += `<li class="banner-circle-target"></li>`
        } else {
            str += `<li></li>`
        }
    }
    $(".banner-circle").html(str);

    // 变化函数
    function bannerImgChange(n) {
        $(".banner-container").css("backgroundImage", `url(${bannerImg[n].backImg})`)
        $(".banner-img").css("backgroundImage", `url(${bannerImg[n].centerImg})`)
        $(".banner-circle li").eq(n).addClass("banner-circle-target")
        $(".banner-circle li").eq(n).siblings().removeClass("banner-circle-target")
    }

    // 下一张
    function backImgNext() {
        bannerCount++;
        if (bannerCount == bannerImg.length) {
            bannerCount = 0
        }
        bannerImgChange(bannerCount)
    }


    $(".banner-right").click(function () {
        backImgNext();
    })

    $(".banner-left").click(function () {
        bannerCount--;
        if (bannerCount == -1) {
            bannerCount = bannerImg.length - 1
        }
        bannerImgChange(bannerCount)
    })

    $(".banner-circle li").each(function (index, item) {
        $(item).click(function () {
            bannerImgChange(index);
            bannerCount = index
        })
    })

    var backImgTime = setInterval(function () {
        backImgNext();
    }, 3000)

    $(".banner-container").mouseover(function () {
        clearInterval(backImgTime);
    })

    $(".banner-container").mouseout(function () {
        backImgTime = setInterval(function () {
            backImgNext();
        }, 3000)

    })



    // 新碟上架轮播图
    var disk = [
        {
            imgURl: "../img/newdisk1.jpg",
            name: "共同的土地",
            author: "缺省"
        },
        {
            imgURl: "../img/newdisk1.jpg",
            name: "共同的土地",
            author: "缺省"
        },
        {
            imgURl: "../img/newdisk1.jpg",
            name: "共同的土地",
            author: "缺省"
        },
        {
            imgURl: "../img/newdisk1.jpg",
            name: "共同的土地",
            author: "缺省"
        },
        {
            imgURl: "../img/newdisk1.jpg",
            name: "共同的土地",
            author: "缺省"
        },
        {
            imgURl: "../img/newdisk2.jpg",
            name: "GUTS",
            author: "Olivia Rodrigo"
        },
        {
            imgURl: "../img/newdisk1.jpg",
            name: "共同的土地",
            author: "缺省"
        },
        {
            imgURl: "../img/newdisk1.jpg",
            name: "共同的土地",
            author: "缺省"
        },
        {
            imgURl: "../img/newdisk1.jpg",
            name: "共同的土地",
            author: "缺省"
        },
        {
            imgURl: "../img/newdisk1.jpg",
            name: "共同的土地",
            author: "缺省"
        },
        {
            imgURl: "../img/newdisk1.jpg",
            name: "共同的土地",
            author: "缺省"
        }
    ]
    var diskArr = [];
    var diskLength = Math.ceil(disk.length / 5);
    for (var i = 0; i < diskLength; i++) {
        diskArr.push(disk.slice(5 * i, 5 * (i + 1)));
    }
    str = '';
    for (var i = 0; i < diskLength + 2; i++) {
        str += `<li class="new-disk-list">
            <ul></ul>
        </li>`
    }
    $(".main-new-disk-list").html(str);
    for (var i = 0; i < diskLength + 2; i++) {
        $(".new-disk-list").eq(i).css("left", 645 * (i - 1) + "px")
    }
    // disk生成函数
    function diskProduct(n, k) {
        str = "";
        for (var i = 0; i < diskArr[n].length; i++) {
            str += `<li>
        <div class="new-disk-img">
            <img src="${diskArr[n][i].imgURl}" alt="">
            <div class="new-disk-play"></div>
        </div>
        <p class="new-disk-name">
            <span>${diskArr[n][i].name}</span>
        </p>
        <p class="new-disk-author">
            <span>${diskArr[n][i].author}</span>
        </p>
        </li>`
        }
        $(".new-disk-list ul").eq(k).html(str)
    }
    // 
    diskProduct(diskLength - 1, 0)

    diskProduct(0, diskLength + 1)


    for (var i = 0; i < diskArr.length; i++) {
        diskProduct(i, i + 1)
    }

    function diskChange(n) {
        $(".main-new-disk-list").css("left", -645 * n + "px");
    }

    //点击切换
    var diskCount = 0;
    var diskClick = true;
    $(".new-disk-next").click(function () {
        if (diskClick == true) {
            diskClick = false;
            diskCount++;
            $(".main-new-disk-list").css("transition", "0.3s")
            diskChange(diskCount)
            setTimeout(function () {
                if (diskCount == diskLength) {
                    $(".main-new-disk-list").css("transition", "0s")
                    diskCount = 0;
                    diskChange(diskCount);
                }
                diskClick = true;
            }, 300)
        }
    })


    $(".new-disk-pre").click(function () {
        if (diskClick == true) {
            diskClick = false
            diskCount--;
            $(".main-new-disk-list").css("transition", "0.3s")
            diskChange(diskCount);
            setTimeout(function () {
                if (diskCount == -1) {
                    $(".main-new-disk-list").css("transition", "0s")
                    diskCount = diskLength - 1;
                    diskChange(diskCount);
                }
                diskClick = true
            }, 300)
        }
    })

    var billList = []
    var billAList=[]
    var billDList=[]
    for (var i = 0; i < $(".bill-list-song").length; i++) {
        billList.push($(".bill-list-song li").slice(10 * i + i, 10 * i + i + 10))
        billAList.push($(".bill-list-song li a").slice(10 * i + i, 10 * i + i + 10))
        billDList.push($(".bill-list-song-oper").slice(10 * i, 10 * (i+1)))
    }
    console.log(billList);
    $.each(billList, function (index, item) {
        console.log(item);
        $.each(item, function (indexs, items) {
            
            $(items).mouseover(function () {
                console.log(index);
                console.log(indexs);
                console.log(billAList[index][indexs]);
                $(billAList[index][indexs]).css("width", "96px")
                $(billDList[index][indexs]).css("display", "flex")
            })
            $(items).mouseout(function () {
                $(billAList[index][indexs]).css("width", "180px")
                $(billDList[index][indexs]).css("display", "none")
            })
        })
    })





















})

;