制作简单的音乐排行榜
作者:互联网
运行代码:
<!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