web前端第八次作业---制作音乐榜单_web前端音乐排行榜的制作-优快云博客

本文链接：https://blog.youkuaiyun.com/XRJ040618xrj/article/details/145127579

制作音乐榜单

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box_big{
            width: 1200px;
            height: 400px;
            border: 0px solid red;
            width: auto;
        }

        .box_small{
            width: 150px;
            height: 150px;
            box-shadow: -10px 10px 10px rgb(37, 36, 36);
           
            
        }

        ol,ul{
            list-style: none;/*  list-style: none 去掉ol(有序列表)ul(无序列表)前面的点*/
        }


        .box{
            width: 240px;
            height: 150px;
            border: 0px solid red;
            margin: auto;
            padding: 25px;
            background-color: rgba(230, 230, 239, 0.973);
            
            
        }

        .box1{
            width: 288px;
            height: 35px;
            border: 0px solid rgb(9, 240, 82);
            margin: auto; 
            background-color: rgb(210, 211, 214);
        }

        .box2{
            width: 288px;
            height: 35px;
            border: 0px solid rgb(51, 9, 240);
            margin: auto; 
            background-color: rgba(230, 230, 239, 0.973);
        }

        

        .box3{
            width: 85px;
            height: 45px;
            border: 0px solid red;
           

        }

        .bsb{
            width: 85px;
            height: 100px;
            border: 0px solid green;
            float: right;/*右浮动*/
            margin:0px 0px 0px 3.5px ;
        }
        .color{
            color: brown;
        }


    </style>
</head>
<body>
    <div class="box_big">
        <div class="box">
           <img class="box_small" src="https://p3.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg">
           <div class="bsb"><p></p><strong>飙升榜</strong><img class="box3" src="/img/微信截图_20250114014228.png"></div>
           
        </div>
        
        <div class="box1">&nbsp;<strong class="color">1</strong>&nbsp;不重逢</div>
        <div class="box2">&nbsp;<strong class="color">2</strong>&nbsp;温暖的房子</div>
        <div class="box1">&nbsp;<strong class="color">3</strong>&nbsp;永不熄灭的火焰</div>
        <div class="box2">&nbsp;4&nbsp;怪诞心理学</div>
        <div class="box1">&nbsp;5&nbsp;不重逢</div>
        <div class="box2">&nbsp;6&nbsp;不重逢</div>
        <div class="box1">&nbsp;7&nbsp;不重逢</div>
        <div class="box2">&nbsp;8&nbsp;不重逢</div>
        <div class="box1">&nbsp;9&nbsp;不重逢</div>
        
    </div>
    
</body>
</html>

运行结果: