QQ music page (pure HTML)

Language 2023-10-05 15:50:26 views: null 
<!DOCTYPE html>
<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="stylesheet" href="./css/css/QQ.css">
</head>

<body>
    <div class="div0">
        <div class="div0_1">
            <div class="box" id="box">
                <div class="nav">
                    <img src="./img/img/Image 38.png" alt="#" class="imga1">
                </div>
                <ul class="clearfix">
                    <li class="main1">音乐馆</li>
                    <li class="main2">我的音乐</li>
                    <li class="main3">客户端</li>
                    <li class="main4">音乐号</li>
                    <li class="main5">VIP</li>
                </ul>
                <div class="div1">
                    <input type="text" class="input1" required lay-verify="required" placeholder="&nbsp;搜索音乐、歌单、MV、用户" autocomplete="off">
                    <div class="div3">登录</div>
                    <div class="div4">开通绿钻豪华版</div>
                    <div class="div5">开通付费包</div>
                </div>
            </div>
            <hr>
            <div class="div6">
                <span>首页</span>
                <span>歌手</span>
                <span>新碟</span>
                <span>排行榜</span>
                <span>分类歌单</span>
                <span>电台</span>
                <span>MV</span>
                <span>数字专辑</span>
                <span>服务</span>
            </div>
        </div>
        <div class="div8">
            <div class="div7">歌单推荐</div>
            <div class="div8_1">
                <span>为你推荐</span>
                <span>小语种</span>
                <span>经典英语</span>
                <span>网络歌曲</span>
                <span>官方歌曲</span>
                <span>情歌</span>
            </div>
            <div class="div8_2">
                <span class="span1"><</span>
                <span><img src="./img/img/Image 1.png" alt="" class="img1"></span>
                <span><img src="./img/img/Image 2.png" alt=""></span>
                <span><img src="./img/img/Image 3.png" alt=""></span>
                <span><img src="./img/img/Image 5.png" alt=""></span>
                <span><img src="./img/img/Image 6.png" alt="" class="img5"></span>
                <span class="span2">></span>
            </div>
            <div class="div8_3">
                <span>
                    <p>《创造营2019》歌曲合集</p>
                    <p class="p1">播放量：62.9万</p>
                </span>
                <span>
                    <p class="p2">看世界万万千，唯有你一人入眼</p>
                    <p class="p1">播放量：62.9万</p>
                </span>
                <span>
                    <p class="p2">舒缓男声|享受这又暖又丧的温柔</p>
                    <p class="p1">播放量：62.9万</p>
                </span>
                <span>
                    <p class="p3">元气日音：我愿用脂肪来交换美貌</p>
                    <p class="p1">播放量：62.9万</p>
                </span>
                <span>
                    <p>夏日除燥首选·Tropical House</p>
                    <p class="p1">播放量：62.9万</p>
                </span>
            </div>
            <div class="div8_4">
                <span class="span1"></span>
                <span class="span2"></span>
            </div>
        </div>
        <div class="div9">
            <div class="div7">新歌首发</div>
            <div class="div9_1">
                <span class="span1">▷播放全部</span>
                <span class="span2">最新</span>
                <span>内地</span>
                <span>港台</span>
                <span>欧美</span>
                <span>韩国</span>
                <span>日本</span>
            </div>
            <div class="div9_2">
                <span><img src="./img/img/Image 7.png" alt="">
                <font class="font1">逗你玩</font>
                <font class="font2">李子璇</font>
                <font class="font3">03：34</font>
                </span>
                <span class="span1"><img src="./img/img/Image 8.png" alt="">
                    <font class="font1">逗你玩</font>
                    <font class="font2">李子璇</font>
                    <font class="font3">03：34</font>
                </span>
                <span class="span2"><img src="./img/img/Image 9.png" alt="">
                    <font class="font1">逗你玩</font>
                    <font class="font2">李子璇</font>
                    <font class="font3">03：34</font>
                </span>
            </div>
            <div class="div9_3">
                <span><img src="./img/img/Image 10.png" alt="">
                <font class="font1">逗你玩</font>
                <font class="font2">李子璇</font>
                <font class="font3">03：34</font>
                </span>
                <span class="span1"><img src="./img/img/Image 11.png" alt="">
                    <font class="font1">逗你玩</font>
                    <font class="font2">李子璇</font>
                    <font class="font3">03：34</font>
                </span>
                <span class="span2"><img src="./img/img/Image 12.png" alt="">
                    <font class="font1">逗你玩</font>
                    <font class="font2">李子璇</font>
                    <font class="font3">03：34</font>
                </span>
            </div>
            <div class="div9_3">
                <span><img src="./img/img/Image 13.png" alt="">
                <font class="font1">逗你玩</font>
                <font class="font2">李子璇</font>
                <font class="font3">03：34</font>
                </span>
                <span class="span1"><img src="./img/img/Image 14.png" alt="">
                    <font class="font1">逗你玩</font>
                    <font class="font2">李子璇</font>
                    <font class="font3">03：34</font>
                </span>
                <span class="span2"><img src="./img/img/Image 15.png" alt="">
                    <font class="font1">逗你玩</font>
                    <font class="font2">李子璇</font>
                    <font class="font3">03：34</font>
                </span>
            </div>
            <div class="div9_4">
                <span class="span1"></span>
                <span class="span2"></span>
                <span class="span3"></span>
            </div>
        </div>
        <div class="div10">
            <div class="div7">精彩推荐</div>
            <div class="div10_1">
                <span><img src="./img/img/Image 16.png" alt=""></span>
                <span class="span1"><img src="./img/img/Image 17.png" alt=""></span>
            </div>
        </div>
        <div class="div11">
            <div class="div7">新碟首发</div>
            <div class="div11_1">
                <span class="span1">更多></span>
                <span class="span2">内地</span>
                <span>港台</span>
                <span>欧美</span>
                <span>韩国</span>
                <span>日本</span>
                <span>其他</span>
            </div>
            <div class="div8_2">
                <span class="span1"><</span>
                <span><img src="./img/img/Image 1.png" alt="" class="img1"></span>
                <span><img src="./img/img/Image 2.png" alt=""></span>
                <span><img src="./img/img/Image 3.png" alt=""></span>
                <span><img src="./img/img/Image 5.png" alt=""></span>
                <span><img src="./img/img/Image 6.png" alt="" class="img5"></span>
                <span class="span2">></span>
            </div>
            <div class="div8_3">
                <span>
                    <p>《创造营2019》歌曲合集</p>
                    <p class="p1">播放量：62.9万</p>
                </span>
                <span>
                    <p class="p2">看世界万万千，唯有你一人入眼</p>
                    <p class="p1">播放量：62.9万</p>
                </span>
                <span>
                    <p class="p2">舒缓男声|享受这又暖又丧的温柔</p>
                    <p class="p1">播放量：62.9万</p>
                </span>
                <span>
                    <p class="p3">元气日音：我愿用脂肪来交换美貌</p>
                    <p class="p1">播放量：62.9万</p>
                </span>
                <span>
                    <p>夏日除燥首选·Tropical House</p>
                    <p class="p1">播放量：62.9万</p>
                </span>
            </div>
            <div class="div8_2">
                <span class="span1"><</span>
                <span><img src="./img/img/Image 1.png" alt="" class="img1"></span>
                <span><img src="./img/img/Image 2.png" alt=""></span>
                <span><img src="./img/img/Image 3.png" alt=""></span>
                <span><img src="./img/img/Image 5.png" alt=""></span>
                <span><img src="./img/img/Image 6.png" alt="" class="img5"></span>
                <span class="span2">></span>
            </div>
            <div class="div8_3">
                <span>
                    <p>《创造营2019》歌曲合集</p>
                    <p class="p1">播放量：62.9万</p>
                </span>
                <span>
                    <p class="p2">看世界万万千，唯有你一人入眼</p>
                    <p class="p1">播放量：62.9万</p>
                </span>
                <span>
                    <p class="p2">舒缓男声|享受这又暖又丧的温柔</p>
                    <p class="p1">播放量：62.9万</p>
                </span>
                <span>
                    <p class="p3">元气日音：我愿用脂肪来交换美貌</p>
                    <p class="p1">播放量：62.9万</p>
                </span>
                <span>
                    <p>夏日除燥首选·Tropical House</p>
                    <p class="p1">播放量：62.9万</p>
                </span>
            </div>
        </div>
        <div class="div12">
            <div class="div7">排行榜</div>
            <div class="div11_1">
                <span class="span1">更多></span>
            </div>
            <div class="div12_2">
                <span><img src="./img/img/11.png" alt="" class="img1"></span>
                <span><img src="./img/img/22.png" alt=""></span>
                <span><img src="./img/img/33.png" alt=""></span>
                <span><img src="./img/img/44.png" alt=""></span>
                <span><img src="./img/img/55.png" alt=""></span>
            </div>
        </div>
        <div class="div13">
            <div class="div7">MV</div>
            <div class="div11_1">
                <span class="span2">精选</span>
                <span>内地</span>
                <span>港台</span>
                <span>欧美</span>
                <span>韩国</span>
                <span>日本</span>
            </div>
            <div class="div13_2">
                <span><img src="./img/img/Image 28.png" alt=""></span>
                <span><img src="./img/img/Image 29.png" alt="" class="img1"></span>
                <span><img src="./img/img/Image 30.png" alt=""></span>
                <span><img src="./img/img/Image 31.png" alt=""></span>
                <span><img src="./img/img/Image 32.png" alt=""></span>
                <span><img src="./img/img/Image 33.png" alt="" class="img5"></span>
            </div>
            <div class="div13_3">
                <span>
                        <p>《创造营2019》歌曲合集</p>
                        <p class="p1">播放量：62.9万</p>
                        <p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
                    </span>
                <span>
                        <p class="p2">看世界万万千，唯有你一人入眼</p>
                        <p class="p1">播放量：62.9万</p>
                        <p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
                    </span>
                <span>
                        <p class="p2">舒缓男声|享受这又暖又丧的温柔</p>
                        <p class="p1">播放量：62.9万</p>
                        <p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
                    </span>
                <span>
                        <p class="p3">元气日音：我愿用脂肪来交换美貌</p>
                        <p class="p1">播放量：62.9万</p>
                        <p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
                    </span>
                <span>
                        <p>夏日除燥首选·Tropical House</p>
                        <p class="p1">播放量：62.9万</p>
                        <p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
                    </span>
                <span>
                        <p>夏日除燥首选·Tropical House</p>
                        <p class="p1">播放量：62.9万</p>
                        <p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
                    </span>
            </div>
            <div class="div13_2">
                <span><img src="./img/img/Image 34.png" alt=""></span>
                <span><img src="./img/img/Image 35.png" alt="" class="img1"></span>
                <span><img src="./img/img/Image 36.png" alt=""></span>
                <span><img src="./img/img/Image 37.png" alt=""></span>
                <span><img src="./img/img/Image 33.png" alt=""></span>
                <span><img src="./img/img/Image 32.png" alt="" class="img5"></span>
            </div>
            <div class="div13_3">
                <span>
                        <p>《创造营2019》歌曲合集</p>
                        <p class="p1">播放量：62.9万</p>
                        <p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
                    </span>
                <span>
                        <p class="p2">看世界万万千，唯有你一人入眼</p>
                        <p class="p1">播放量：62.9万</p>
                        <p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
                    </span>
                <span>
                        <p class="p2">舒缓男声|享受这又暖又丧的温柔</p>
                        <p class="p1">播放量：62.9万</p>
                        <p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
                    </span>
                <span>
                        <p class="p3">元气日音：我愿用脂肪来交换美貌</p>
                        <p class="p1">播放量：62.9万</p>
                        <p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
                    </span>
                <span>
                        <p>夏日除燥首选·Tropical House</p>
                        <p class="p1">播放量：62.9万</p>
                        <p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
                    </span>
                <span>
                        <p>夏日除燥首选·Tropical House</p>
                        <p class="p1">播放量：62.9万</p>
                        <p class="p1"><img src="./img/img/Image 40.png">5.2万</p>
                    </span>
            </div>
            <div class="div8_4">
                <span class="span1"></span>
                <span class="span2"></span>
                <span class="span2"></span>
                <span class="span2"></span>
            </div>
        </div>
        <div class="div14"><img src="./img/img/88.png" alt=""></div>
    </div>
</body>

</html>

 (css)

* {
    padding: 0;
    margin: 0;
}

.div0 {
    height: 4380px;
    background-color: #F5F5F5;
}

.div0_1 {
    width: 1580px;
    height: 130px;
    background-color: white;
}

.box {
    width: 1380px;
    height: 80px;
    margin: 0 auto;
    /* border: 1px solid red; */
}

.wrap {
    background-color: black;
}

.nav {
    float: left;
}

.nav .imga1 {
    width: 200px;
    height: 50px;
    display: inline-block;
    margin-right: 18px;
    margin-top: 13px;
}

.box ul {
    float: left;
    list-style-type: none;
}

.box ul li {
    width: 110px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    float: left;
    font-size: 16px;
    font-family: 绮椾綋;
}

.box ul .main1 {
    margin-left: 30px;
    width: 80px;
    height: 80px;
    /* border: 1px solid pink; */
}

.box ul .main2 {
    width: 80px;
    height: 80px;
}

li:hover {
    background-color: #31C37C;
    color: white;
}

.box ul .main3 {
    width: 80px;
    height: 80px;
}


/* .main3:hover {
    background-color: #31C37C;
    color: white;
} */

.box ul .main4 {
    width: 80px;
    height: 80px;
}


/* .main4:hover {
    background-color: #31C37C;
    color: white;
} */

.box ul .main5 {
    width: 80px;
    height: 80px;
}

.input1 {
    width: 210px;
    height: 35px;
    background-image: url(D:\web鍓嶇\绯荤粺鐝璡qq闊充箰.html\img\img\39.png);
    background-repeat: no-repeat;
    border: 1px solid #E4E4E4;
    background-position: right;
    border-radius: 4px;
    outline-color: hsl(161, 37%, 64%);
}

.div1 {
    padding-top: 22px;
    width: 730px;
    height: 58px;
    float: right;
}

.div1 .div3 {
    width: 78px;
    height: 20px;
    font-size: 17px;
    font-family: "榛戜綋";
    margin-top: 10px;
    margin-right: 400px;
    float: right;
}

.div1 .div4 {
    width: 150px;
    height: 35px;
    margin-top: -35px;
    margin-right: 260px;
    float: right;
    background: #31C37C;
    font-size: 15px;
    color: #FFFFFF;
    text-align: center;
    line-height: 30px;
}

.div1 .div5 {
    width: 100px;
    height: 35px;
    margin-top: -35px;
    margin-right: 120px;
    float: right;
    border: 1px solid #E4E4E4;
    font-size: 15px;
    text-align: center;
    line-height: 30px;
}

.div6 {
    width: 900px;
    margin: 0 auto;
    margin-top: 10px;
}

.div6 :hover {
    color: #31C37C;
}

.div6 span {
    display: block;
    float: left;
    margin-left: 35px;
}

.div7 {
    width: 1580px;
    margin-top: 80px;
    text-align: center;
    font-size: 30px;
    font-family: 榛戜綋;
    font-weight: bold;
}

.div8 {
    width: 1580px;
    height: 450px;
    background: white;
}

.div8_1 {
    width: 760px;
    margin: 0 auto;
    margin-top: 10px;
}

.div8_1 :hover {
    color: #31C37C;
}

.div8_1 span {
    float: left;
    margin-left: 55px;
    margin-top: 5px;
}

.div8_2 {
    width: 1448px;
    height: 220px;
    margin-top: 20px;
    margin-left: 66px;
    display: inline-block
}

.div8_2 .img1 {
    margin-left: 0px;
}

.div8_2 img {
    width: 220px;
    height: 220px;
    float: left;
    margin-left: 57px;
}

.div8_2 .span1 {
    width: 58px;
    height: 116px;
    background: #EAECEA;
    margin-left: 2px;
    margin-top: 52px;
    float: left;
    font-size: 50px;
    text-align: center;
    line-height: 116px;
}

.div8_2 .span2 {
    width: 58px;
    height: 116px;
    background: #EAECEA;
    margin-left: 0px;
    margin-top: 52px;
    float: left;
    font-size: 50px;
    text-align: center;
    line-height: 116px;
}

.div8_3 {
    width: 1448px;
    height: 70px;
    margin-left: 66px;
    margin-top: 2px;
}

.div8_3 span {
    width: 220px;
    height: 70px;
    display: inline-block;
    margin-left: 52px;
}

.div8_3 .p1 {
    color: #B3B3B3;
    line-height: 40px;
}

.div8_3 .p2 {
    font-size: 15px;
}

.div8_3 .p3 {
    font-size: 14px;
}

.div8_4 {
    width: 1580px;
    height: 20px;
    margin-top: 30px;
}

.div8_4 span {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    border: 1px solid white;
    background: #E8E8E8;
    display: inline-block;
}

.div8_4 .span1 {
    background: #E8E8E8;
    margin-left: 800px;
}

.div8_4 .span1:hover {
    background: #AFAFAF;
}

.div8_4 .span2:hover {
    background: #AFAFAF;
}

.div8_4 .span2 {
    background: #E8E8E8;
}

.div9 {
    width: 1580px;
    height: 500px;
    background: white;
}

.div9_1 {
    width: 1448px;
    margin: 0 auto;
    margin-top: 10px;
}

.div9_1 :hover {
    color: #31C37C;
}

.div9_1 span {
    float: left;
    margin-left: 60px;
    margin-top: 5px;
}

.div9_1 .span1 {
    width: 100px;
    height: 30px;
    display: block;
    text-align: center;
    line-height: 30px;
    border: 1px solid #808080;
}

.div9_1 .span2 {
    float: left;
    margin-left: 300px;
    margin-top: 5px;
}

.div9_2 {
    width: 1448px;
    height: 102px;
    margin-top: 60px;
    margin-left: 66px;
}

.div9_2 img {
    width: 100px;
    height: 100px;
}

.div9_2 span {
    width: 400px;
    height: 102px;
    background: #F9F9F9;
    display: inline-block
}

.div9_2 .span1 {
    margin-left: 100px;
}

.div9_2 .span2 {
    float: right;
}

.div9 .font1 {
    position: relative;
    top: -60px;
}

.div9 .font2 {
    position: relative;
    top: -30px;
    left: -53px;
    color: #B3B3B3;
}

.div9_2 .font3 {
    position: relative;
    top: -40px;
    left: 80px;
    color: #B3B3B3;
}

.div9_3 {
    width: 1448px;
    height: 102px;
    margin-top: 10px;
    margin-left: 66px;
}

.div9_3 img {
    width: 100px;
    height: 100px;
}

.div9_3 span {
    width: 400px;
    height: 102px;
    background: #F9F9F9;
    display: inline-block
}

.div9_3 .span1 {
    margin-left: 100px;
}

.div9_3 .span2 {
    float: right;
}

.div9_3 .font3 {
    position: relative;
    top: -40px;
    left: 80px;
    color: #B3B3B3;
}

.div8_4 {
    width: 1580px;
    height: 20px;
    margin-top: 30px;
}

.div9_4 span {
    width: 10px;
    height: 10px;
    margin-top: 40px;
    border-radius: 100%;
    border: 1px solid white;
    display: inline-block;
}

.div9_4 .span1 {
    background: #E8E8E8;
    margin-left: 800px;
}

.div9_4 .span1:hover {
    background: #AFAFAF;
}

.div9_4 .span2 {
    background: #E8E8E8;
}

.div9_4 .span2:hover {
    background: #AFAFAF;
}

.div9_4 .span3 {
    background: #E8E8E8;
}

.div9_4 .span3:hover {
    background: #AFAFAF;
}

.div10 {
    width: 1580px;
    height: 400px;
    background: white;
}

.div10_1 {
    width: 1448px;
    height: 280x;
    margin: 0 auto;
    margin-top: 20px;
}

.div10_1 .span1 {
    float: right;
}

.div11 {
    width: 1580px;
    height: 750px;
    background: white;
}

.div11_1 {
    width: 1448px;
    margin: 0 auto;
    margin-top: 10px;
}

.div11_1 :hover {
    color: #31C37C;
}

.div11_1 span {
    float: left;
    margin-left: 60px;
    margin-top: 5px;
}

.div11_1 .span1 {
    width: 100px;
    height: 30px;
    display: block;
    text-align: center;
    line-height: 30px;
    float: right;
}

.div11_1 .span2 {
    float: left;
    margin-left: 500px;
    margin-top: 5px;
}

.div12 {
    width: 1580px;
    height: 530px;
    background: white;
}

.div12_2 {
    width: 1448px;
    height: 420px;
    margin-top: 20px;
    margin-left: 66px;
    display: inline-block
}

.div12_2 img {
    margin-left: 59px;
    width: 220px;
    height: 420px;
}

.div12_2 .img1 {
    float: left;
}

.div13 {
    width: 1580px;
    height: 550px;
    background: white;
}

.div13_2 {
    width: 1448px;
    height: 120px;
    margin-top: 20px;
    margin-left: 66px;
    display: inline-block
}

.div13_2 img {
    width: 200px;
    margin-left: 30px;
}

.div13_3 {
    width: 1448px;
    height: 70px;
    margin-left: 66px;
    margin-top: 2px;
}

.div13_3 span {
    width: 220px;
    height: 70px;
    display: inline-block;
    margin-left: 10px;
}

.div13_3 .p1 {
    color: #B3B3B3;
    line-height: 30px;
}

.div13_3 .p2 {
    font-size: 15px;
}

.div13_3 .p3 {
    font-size: 14px;
}

.p1 .img {
    display: inline-block
}

.div14 img {
    width: 1580px;
}

(img)

 

Guess you like

Origin blog.csdn.net/xiaozgm/article/details/125656075
Recommended
The number of MaxKB GitHub Stars, an open source knowledge base question and answer system based on large language models, exceeded 5,000!
Ranking
Getting the basic concepts of ROS + catkin Profile
Spring Learning (2) --- Assembling Beans in the IoC Container
js to get the src attribute of the image regularly
STM32 is based on CubeIDE and HAL library basics entry study notes: Bluetooth WIFI STM32 connects to Alibaba Cloud
Short video learning - 3, pandas simple use of pivot_table
Print directory of project configuration log, output log
Understand the difference between vi and vim in Linux in 3 minutes
1 + x certificate Web front-end development HTML5 special exercises
mangodb save and insert the difference
7-1 Family tree processing (50 points) (binary tree solution)
Daily
More
2024-05-13(8)
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)

Code World

© 2018 codetd.com