基于HTML5+CSS3制作一个简单的音乐排行榜

1024_代码狂欢

已于 2023-11-06 11:21:39 修改

阅读量4k

点赞数 9

分类专栏： html 文章标签： html5 css3

于 2023-11-06 10:57:18 首次发布

本文链接：https://blog.csdn.net/m0_75047166/article/details/134241393

版权

html 专栏收录该内容

1 篇文章

订阅专栏

该篇文章详细展示了如何使用HTML和CSS创建一个音乐排行榜页面，包括基本结构、背景样式和列表项设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML部分：

<!DOCTYPE html>
<html><head>
		<meta charset="utf-8">
		<title>音乐排行榜</title>
		<link rel="stylesheet" type="text/css" href="style05.css">
	</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——qeyouned</p>
				<p class="yj">qurested——conoted</p>
			</div>
		</div>
	</body>
</html>

css部分：

*{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;}
p{
	width: 372px;
	height: 55px;
	background: #504d58 url(yinfu.png) no-repeat 68px 18px;
	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,60px 180px;
	border-radius: 30px 30px 0 0;
}
.sheet .yj{border-radius: 0 0 30px 30px;}