使用HTML5，css。制作一个初级简单的“音乐排行榜”。

img

img

img

img


使用HTML5，css。制作一个初级简单的“音乐排行榜”。图片在下面，要用前三张图来做，实现效果是第四张图。

应该是比较简单css，我刚学还未入门，已经憋好几个小时，希望有人指导一下。

题主要的代码如下，注意图片路径，csdn不允许外链，题主可能要修改下图片路径，要不到时别人没打开过这个问题没有图片缓存会显示不出来图片。

img


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

有帮助麻烦点下【采纳该答案】，谢谢~~

谢谢🙏