QZYXKU 2021-10-31 10:45 采纳率: 0%
浏览 5072

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

img

img

img

img


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

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

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2021-10-31 13:05
    关注

    题主要的代码如下,注意图片路径,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>
    

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

    展开全部

    评论
  • m0_73925624 2022-11-22 12:25
    关注

    谢谢🙏

    评论
编辑
预览

报告相同问题?

问题事件

  • 创建了问题 10月31日

悬赏问题

  • ¥15 代写uni代码,app唤醒
  • ¥15 全志t113i启动qt应用程序提示internal error
  • ¥15 ensp可以看看嘛.
  • ¥80 51单片机C语言代码解决单片机为AT89C52是清翔单片机
  • ¥60 优博讯DT50高通安卓11系统刷完机自动进去fastboot模式
  • ¥15 minist数字识别
  • ¥15 在安装gym库的pygame时遇到问题,不知道如何解决
  • ¥20 uniapp中的webview 使用的是本地的vue页面,在模拟器上显示无法打开
  • ¥15 网上下载的3DMAX模型,不显示贴图怎么办
  • ¥15 关于#stm32#的问题:寻找一块开发版,作为智能化割草机的控制模块和树莓派主板相连,要求:最低可控制 3 个电机(两个驱动电机,1 个割草电机),其次可以与树莓派主板相连电机照片如下:
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部