制作简单的音乐排行榜_心得技巧

上一篇: docker使用详解下一篇:【Redis】客观下线

制作简单的音乐排行榜

发布时间：2022-06-24 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了制作简单的音乐排行榜，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

运行代码：

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

效果图：

制作简单的音乐排行榜

脚本宝典总结

以上是脚本宝典为你收集整理的制作简单的音乐排行榜全部内容，希望文章能够帮你解决制作简单的音乐排行榜所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

上一篇: docker使用详解下一篇:【Redis】客观下线

猜你在找的心得技巧相关文章

clion结合vcpkg以及GTest的使用 2022-07-07
EGF 2022-06-06
ExtJS 布局-Column布局（Column layout） 2022-06-05
颜色之ARGB与RGB、RGBA的区别与介绍 2022-04-15
rgba中的a是什么意思 CSS之RGBA颜色指南 2022-04-15
rootfs -根文件系统制作 2022-07-07
网页简单布局之结构与表现原则分享 2022-04-15
小项目中怎么防止Vue的闪现画面效果 2022-04-15
隐藏 Web 中的元素方法及优缺点教程详解 2022-04-15
告别硬编码让你的前端表格自动计算的实例代码 2022-04-15