ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

制作简单的音乐排行榜

2022-05-12 01:33:41  阅读:222  来源: 互联网

标签:sheet border 音乐 height 排行榜 radius background 制作 30px


运行代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>音乐排行榜</title>
<link rel="stylesheet" type="text/css" href="style05.css">
<style>
/*清除浏览器默认样式*/
*{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%;
    padding-top:50px;
    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 url(yinfu.png) no-repeat 50px 8px;
    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>vnessa——constance</p>
        <p>dogffedrd——seeirtit</p>
        <p>dsieirif——constance</p>
        <p>wytuu——qeyounted</p>
        <p class="yj">qurested——conoted</p>
    </div>    
</div>
</body>
</html>

效果图:

 

标签:sheet,border,音乐,height,排行榜,radius,background,制作,30px
来源: https://www.cnblogs.com/cszcoder/p/16260668.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有