制作音乐排行榜,歌曲排行怎么嵌到白色框里面呢,做成最后一张图片那样
首先,提问的时候别截图,贴代码好么
<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>
您好,您现在弄出来了吗,能把源码分享一下吗