当前位置：首页 > news >正文

web前端第八次作业---制作音乐榜单

news 2025/6/27 3:11:24

制作音乐榜单

代码:

<!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>

运行结果: