QQ音乐网页布局前端代码

2501_91001005

已于 2025-05-08 15:03:50 修改

阅读量97

点赞数 3

文章标签：前端 html css

于 2025-05-08 12:39:35 首次发布

本文链接：https://blog.csdn.net/2501_91001005/article/details/147785661

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="css/qqwy.css" rel="stylesheet">
	</head>
	<body>
		<div class="heder"></div>
		<div class="banner"></div>
		<div class="bigbox">
			<div class="gdtj"></div>
			<div class="tj"></div>
			<div class="gdlist">
				<div class="minibox1"></div>
				<div class="minibox2"></div>
				<div class="minibox3"></div>
				<div class="minibox4"></div>
				<div class="minibox5"></div>
			</div>
			<div class="lll"></div>
			<div class="left"></div>
			<div class="right"></div>
		</div>
		<div class="bigbox2">
			<div class="gdtj"></div>
			<div class="tj"></div>
			<div class="xingegedan">
				<div class="minibox1"></div>
				<div class="minibox2"></div>
				<div class="minibox3"></div>
				<div class="minibox4"></div>
				<div class="minibox5"></div>
				<div class="minibox6"></div>
				<div class="minibox7"></div>
				<div class="minibox8"></div>
				<div class="minibox9"></div>
			</div>
			<div class="lll"></div>
			<div class="left"></div>
			<div class="right"></div>
		</div>
		<div class="bigbox3">
			<div class="jctj"></div>
			<div class="jclist">
				<div class="minibox1"></div>
				<div class="minibox2"></div>
				<div class="minibox3"></div>
			</div>
			<div class="lll"></div>
			<div class="left"></div>
			<div class="right"></div>
		</div>
		<div class="bigbox4">
			<div class="shofa"></div>
			<div class="dqbox">
				<div class="dq"></div>
				<div class="gengduo"></div>
			</div>
			<div class="sflist">
				<div class="minibox1"></div>
				<div class="minibox2"></div>
				<div class="minibox3"></div>
				<div class="minibox4"></div>
				<div class="minibox5"></div>
				<div class="minibox6"></div>
				<div class="minibox7"></div>
				<div class="minibox8"></div>
				<div class="minibox9"></div>
				<div class="minibox10"></div>
			</div>
			<div class="lll"></div>
			<div class="left"></div>
			<div class="right"></div>
		</div>
		<div class="bigbox5">
			<div class="phbox">
				<div class="phb"></div>
				<div class="gengduo"></div>
			</div>
			<div class="phlist">
				<div class="minibox1"></div>
				<div class="minibox2"></div>
				<div class="minibox3"></div>
				<div class="minibox4"></div>
				<div class="minibox5"></div>
			</div>
		</div>
		<div class="bigbox6">
			<div class="mv"></div>
			<div class="dqbox">
				<div class="dq"></div>
				<div class="gengduo"></div>
			</div>
			<div class="mvlist">
				<div class="minibox1"></div>
				<div class="minibox2"></div>
				<div class="minibox3"></div>
				<div class="minibox4"></div>
				<div class="minibox5"></div>
				<div class="minibox6"></div>
				<div class="minibox7"></div>
				<div class="minibox8"></div>
				<div class="minibox9"></div>
				<div class="minibox10"></div>
			</div>
			<div class="lll"></div>
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

* {
	padding: 0;
	margin: 0;
}
 
.heder {
	height: 80px;
	width: 800px;
	background-color: darkgrey;
	margin: auto;
}
 
.banner {
	height: 40px;
	width: 600px;
	background-color: aqua;
	margin: auto;
}
 
.bigbox {
	height: 500px;
	width: 100%;
	background-color: aquamarine;
	overflow: hidden;
	position: relative;
}
 
.bigbox .gdtj {
	height: 80px;
	width: 200px;
	background-color: antiquewhite;
	margin: 30px auto;
}
 
.bigbox .tj {
	height: 40px;
	width: 400px;
	background-color: blue;
	margin: auto;
}
 
.bigbox .gdlist {
	height: 200px;
	width: 800px;
	background-color: coral;
	margin: 30px auto;
}
 
.bigbox .gdlist div {
	height: 200px;
	width: 120px;
	background-color: darkgoldenrod;
	float: left;
}
 
.bigbox .gdlist .minibox2,
.bigbox .gdlist .minibox4 {
	margin: 0 50px;
}
 
.bigbox .lll {
	height: 20px;
	width: 100px;
	background-color: darkgray;
	margin: 20px auto;
}
 
.bigbox .left {
	height: 100px;
	width: 90px;
	background-color: darkgrey;
	position: relative;
	left: 0px;
	top: -220px;
}
 
.bigbox .right {
	height: 100px;
	width: 90px;
	background-color: darkgrey;
	position: absolute;
	right: 0px;
	top: 260px;
}
 
.bigbox2 {
	height: 500px;
	width: 100%;
	background-color: hotpink;
	overflow: hidden;
	position: relative;
}
 
.bigbox2 .gdtj {
	height: 80px;
	width: 200px;
	background-color: antiquewhite;
	margin: 30px auto;
}
 
.bigbox2 .tj {
	height: 40px;
	width: 400px;
	background-color: orange;
	margin: auto;
}
 
.bigbox2 .xingegedan {
	height: 200px;
	width: 800px;
	background-color: coral;
	margin: 30px auto;
}
 
.bigbox2 .xingegedan div {
	height: 60px;
	width: 260px;
	background-color: aqua;
	float: left;
}
 
.bigbox2 .xingegedan .minibox2,
.bigbox2 .xingegedan .minibox8 {
	margin: 0 10px;
}
 
.bigbox2 .xingegedan .minibox4,
.bigbox2 .xingegedan .minibox6 {
	margin: 10px 0px;
}
 
.bigbox2 .xingegedan .minibox5 {
	margin: 10px 10px;
}
 
.bigbox2 .left {
	height: 100px;
	width: 90px;
	background-color: darkgrey;
	position: relative;
	left: 0px;
	top: -220px;
}
 
.bigbox2 .right {
	height: 100px;
	width: 90px;
	background-color: darkgrey;
	position: absolute;
	right: 0px;
	top: 260px;
}
 
.bigbox2 .lll {
	height: 20px;
	width: 100px;
	background-color: darkgray;
	margin: 20px auto;
}
 
.bigbox3 {
	height: 400px;
	width: 100%;
	background-color: darkorchid;
	position: relative;
	overflow: hidden;
}
 
.bigbox3 .jctj {
	height: 80px;
	width: 200px;
	background-color: antiquewhite;
	margin: 30px auto;
}
 
.bigbox3 .jclist {
	height: 200px;
	width: 800px;
	background-color: coral;
	margin: 0 auto;
}
 
.bigbox3 .jclist div {
	height: 200px;
	width: 260px;
	background-color: aqua;
	float: left;
}
 
.bigbox3 .jclist .minibox2 {
	margin: 0 10px;
}
 
.bigbox3 .left {
	height: 100px;
	width: 90px;
	background-color: darkgrey;
	position: relative;
	left: 0px;
	top: -210px;
}
 
.bigbox3 .right {
	height: 100px;
	width: 90px;
	background-color: darkgrey;
	position: absolute;
	right: 0px;
	top: 190px;
}
 
.bigbox3 .lll {
	height: 20px;
	width: 100px;
	background-color: darkgray;
	margin: 20px auto;
}
 
.bigbox4 {
	height: 650px;
	width: 100%;
	background-color: ivory;
	position: relative;
	overflow: hidden;
}
 
.bigbox4 .shofa {
	height: 80px;
	width: 200px;
	background-color: antiquewhite;
	margin: 30px auto;
}
 
.bigbox4 .dqbox {
	height: 40px;
	width: 800px;
	background-color: antiquewhite;
	margin: 0 auto;
}
 
.bigbox4 .dqbox .dq {
	height: 40px;
	width: 400px;
	background-color: pink;
	margin: auto;
}
 
.bigbox4 .dqbox .gengduo {
	height: 40px;
	width: 60px;
	background-color: pink;
	float: right;
	margin: -40px 0;
}
 
.bigbox4 .sflist {
	height: 390px;
	width: 800px;
	background-color: lightskyblue;
	margin: 20px auto;
}
 
.bigbox4 .sflist div {
	height: 180px;
	width: 144px;
	background-color: palegoldenrod;
	float: left;
}
 
.bigbox4 .sflist .minibox2,
.bigbox4 .sflist .minibox4 {
	margin: 0 20px;
}
 
.bigbox4 .sflist .minibox6,
.bigbox4 .sflist .minibox8,
.bigbox4 .sflist .minibox10 {
	margin: 30px 0;
}
 
.bigbox4 .sflist .minibox7,
.bigbox4 .sflist .minibox9 {
	margin: 30px 20px;
}
 
.bigbox4 .left {
	height: 100px;
	width: 90px;
	background-color: darkgrey;
	position: relative;
	left: 0px;
	top: -300px;
}
 
.bigbox4 .right {
	height: 100px;
	width: 90px;
	background-color: darkgrey;
	position: absolute;
	right: 0px;
	top: 350px;
}
 
.bigbox4 .lll {
	height: 20px;
	width: 100px;
	background-color: darkgray;
	margin: 20px auto;
}
 
.bigbox5 {
	height: 650px;
	width: 100%;
	background-color: lavender;
	position: relative;
	overflow: hidden;
}
 
.bigbox5 .phbox {
	height: 80px;
	width: 800px;
	background-color: darkkhaki;
	margin: 30px auto;
}
 
.bigbox5 .phbox .phb {
	height: 80px;
	width: 200px;
	background-color: darksalmon;
	margin: 0 auto;
}
 
.bigbox5 .phbox .gengduo {
	height: 40px;
	width: 60px;
	background-color: chartreuse;
	float: right;
	margin: -60px 0;
}
 
.bigbox5 .phlist {
	height: 470px;
	width: 800px;
	background-color: salmon;
	margin: 0 auto;
}
 
.bigbox5 .phlist div {
	height: 100%;
	width: 144px;
	background-color: aliceblue;
	float: left;
}
 
.bigbox5 .phlist .minibox2,
.bigbox5 .phlist .minibox4 {
	margin: 0 20px;
}
 
.bigbox6 {
	height: 610px;
	width: 100%;
	background-color: mediumpurple;
	position: relative;
	overflow: hidden;
}
 
.bigbox6 .mv {
	height: 80px;
	width: 200px;
	background-color: antiquewhite;
	margin: 30px auto;
}
 
.bigbox6 .dqbox {
	height: 40px;
	width: 800px;
	background-color: grey;
	margin: 0 auto;
}
 
.bigbox6 .dqbox .dq {
	height: 40px;
	width: 400px;
	background-color: lightyellow;
	margin: auto;
}
 
.bigbox6 .dqbox .gengduo {
	height: 40px;
	width: 60px;
	background-color: lightyellow;
	float: right;
	margin: -40px 0;
}
 
.bigbox6 .mvlist {
	height: 350px;
	width: 800px;
	background-color: darkturquoise;
	margin: 20px auto;
}
 
.bigbox6 .mvlist div {
	height: 160px;
	width: 144px;
	background-color: mintcream;
	float: left;
}
 
.bigbox6 .mvlist .minibox2,
.bigbox6 .mvlist .minibox4 {
	margin: 0 20px;
}
 
.bigbox6 .mvlist .minibox6,
.bigbox6 .mvlist .minibox8,
.bigbox6 .mvlist .minibox10 {
	margin: 30px 0;
}
 
.bigbox6 .mvlist .minibox7,
.bigbox6 .mvlist .minibox9 {
	margin: 30px 20px;
}
 
.bigbox6 .left {
	height: 100px;
	width: 90px;
	background-color: darkgrey;
	position: relative;
	left: 0px;
	top: -285px;
}
 
.bigbox6 .right {
	height: 100px;
	width: 90px;
	background-color: darkgrey;
	position: absolute;
	right: 0px;
	top: 325px;
}
 
.bigbox6 .lll {
	height: 20px;
	width: 100px;
	background-color: darkgray;
	margin: 20px auto;
}