HTML作业

短短小羊

已于 2023-01-09 14:47:43 修改

阅读量242

点赞数 1

分类专栏： WEB前端开发文章标签： css html 前端

于 2022-11-05 16:08:30 首次发布

本文链接：https://blog.csdn.net/m0_74413258/article/details/127704557

版权

WEB前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

音乐排行榜首页代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐排行榜</title>
    <link rel="stylesheet" href="../css/style2.css">
</head>
<body>
<div class="bg">
    <ul>
        <li class="tp"></li>
        <li>vnessa-constance</li>
        <li>dogffedrd—seeirtit</li>
        <li>dsieirif-constance</li>
        <li>wytuu-geyounted</li>
        <li class="yj">qurested-conoted</li>
    </ul>
</div>    
</body>
</html>

style2.css的代码

*{margin:0; padding:0; list-style:none; outline:none;}
/*整体设置歌曲排行版模块*/
.bg{
  width:600px;
  height:550px;
  background-image:repeating-radial-gradient(circle at 50% 50%,#333, #000 1%);
  margin:50px auto;
  padding:40px;
  border-radius:50%;
  padding-top:50px;
  border:10px solid#ccc;
}
/*歌曲排名部分*/
ul{
  width:372px;
  height:530px;
  background:#fff;
  border-radius: 30px;
  box-shadow: 15px 15px 12px #000;
  margin: 0 auto;
}
ul li{
  width: 372px;
  height: 55px;
  background: #504d58 url(../images/yinfu.png) no-repeat 70px 20px;
  margin-bottom:2px;
  font-size:18px;
  color:#d6d6d6;
  line-height:55px;
  text-align:center;
  font-family:"微软雅黑";
}
/*需要单独控制的列表项*/
ul .tp{
  width:372px;
  height:247px;
  background:#fff;
  background-image:url(../images/yinyue.jpg),url(../images/wenzi.jpg);
  background-repeat:no-repeat;
  background-position:87px 16px,99px 192px;
  border-radius:30px 30px 0 0;
}
ul .yj{border-radius:0 0 30px 30px;}

最终效果图