制作音乐排行榜html

制作音乐排行榜,歌曲排行怎么嵌到白色框里面呢,做成最后一张图片那样

img

img

img

img

img

首先,提问的时候别截图,贴代码好么

<div class="bg">
  <div class="icon">
    <ul class="list">
      <li>歌曲1</li>
      <li>歌曲2</li>
      <li>歌曲3</li>
    </ul>
  </div>
</div>
.bg{
  border:solid 5px #999;
  background:#000;
  border-radius:50%;
  overflow:hidden;
height:500px;
width:500px;
}
.icon{
  background:#fff  url('音符图片.jpg') no-repeat top center;
  border-radius:10px;
  padding-top:100px;
  overflow:hidden;
height:400px;
width:300px;
margin:0 auto
}
.list{
  height:100%;
  overflow-y:auto
}

具体宽高有没有滚动条,自己调一下

根据最后一张效果:找一个图片放顶部,或者给列表设置上边距即可

ul头部位置新增li之后给高度撑出来图片位置 应该就可以了

同学同学还有代码嘛,一年后咱俩作业一模一样🙁


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>音乐排行榜</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
.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%;
    border:10px solid #ccc;
}
.sheet{
    width:372px;
    height:530px;
    background:#fff;
    border-radius:30px;
    box-shadow:15px 15px 12px #000;
    margin:0 auto;
}
.sheet p{
    width:372px;
    height:55px;
    background:#504d58 no-repeat 70px 20px;
    margin-bottom:2px;
    font-size:18px;
    color:#d6d6d6;
    line-height:55px;
    text-align:center;
    font-family:"微软雅黑";
}
.sheet .tp{
    width:372px;
    height:247px;
    background:#fff;
    background-image:url(yinyue.jpg),url(wenzi.jpg);
    background-repeat:no-repeat;
    background-position:87px 16px,99px 192px;
    border-radius:30px 30px 0 0;
}
.sheet.yj{border-radius:0 0 30px 30px;}
</style>
</head>
<body>
<div class="bg">
    <div class="sheet">
    <p class="tp"></p>
    <p>venessa-constance</p>
    <p>dogffedrd-seeirtit</p>
    <p>wytuu-qeyounted</p>
    <p class="yj">querested-conoted</p>
    </div>
</div>
</body>
</html>

img

您好,您现在弄出来了吗,能把源码分享一下吗