使用HTML5,css。制作一个初级简单的“音乐排行榜”。图片在下面,要用前三张图来做,实现效果是第四张图。
应该是比较简单css,我刚学还未入门,已经憋好几个小时,希望有人指导一下。
题主要的代码如下,注意图片路径,csdn不允许外链,题主可能要修改下图片路径,要不到时别人没打开过这个问题没有图片缓存会显示不出来图片。
<!doctype html>
<meta charset="utf-8" />
<style>
body{background:#999}
.container {
margin: 0 auto;
width: 360px;
border-radius: 20px;
box-shadow: rgba(0,0,0,.6) 10px 10px 2px;
padding-top: 10px;
text-align: center;
background: #fff
}
.container .item {
padding-left: 100px;
background: #504d58 url(https://img-mid.csdnimg.cn/release/static/image/mid/ask/409256676536179.png) no-repeat 70px center;
line-height: inherit;
border-bottom: 2px solid #fff;
line-height: 50px;
color: #fff;
text-align: left
}
.container .item:last-of-type {
border-bottom: 0;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
</style>
<div class="container">
<img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/95465667653616.jpg" /><br />
<img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/05174667653616.jpg" />
<div class="item">
vnessa--constance
</div>
<div class="item">
vnessa--constance
</div>
<div class="item">
vnessa--constance
</div>
<div class="item">
vnessa--constance
</div>
</div>
有帮助麻烦点下【采纳该答案】,谢谢~~