【H5】页面布局练习

Osinghong5个月前 (12-05)成果展示47

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>网页</title>
	</head>
	<link rel="stylesheet" href="https://odocs.top/zb_users/upload/css/20241205.css" />
	<div class="container">
		<body>
			<!-- 页眉 -->
			<header>
				<div>
					<div class="logo">
						<p>logo</p>
					</div>
					<div class="banner1">
						<p>banner1</p>
					</div>
					<span class="banner2">
						<p>banner2</p>
					</span>
				</div>
				<div class="menu"> <!-- 菜单 -->
					<p>菜单</p>
				</div>
			</header>
			<!-- 内容 -->
			<article>
				<div class="column1"> <!-- 栏目一 -->
					<p>栏目1</p>
				</div>
				<div class="column2"> <!-- 栏目二 -->
					<p>栏目2</p>
				</div>
				<div class="column3"> <!-- 栏目三 -->
					<p>栏目3</p>
				</div>
				<div class="column4"> <!-- 栏目四 -->
					<p>栏目4</p>
				</div>
				<div class="column5"> <!-- 栏目五 -->
					<p>栏目5</p>
				</div>
				<div class="column6"> <!-- 栏目六 -->
					<p>栏目6</p>
				</div>
				<div class="column7"> <!-- 栏目七 -->
					<p>栏目7</p>
				</div>
				<div class="column8"> <!-- 栏目八 -->
					<p>栏目8</p>
				</div>
				<div class="column9"> <!-- 栏目九 -->
					<p>栏目9</p>
				</div>
			</article>
			<!-- 页脚 -->
			<footer>
				<p>页脚</p>
			</footer>
	</div>
	</body>
</html>

CSS：

html {
	margin: 0 auto;
	width: 1000px;
}

.logo,
.banner2 {
	width: 200px;
	height: 80px;
	background-color: lightblue;
	line-height: 80px;
	position: relative;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
}

.banner1 {
	width: 540px;
	height: 80px;
	background-color: lightblue;
	line-height: 80px;
	position: relative;
	margin-left: 220px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.banner2 {
	margin-left: 780px;
	margin-top: -80px;
}

.menu {
	width: 980px;
	height: 30px;
	background-color: lightblue;
	line-height: 30px;
	position: relative;
	margin-top: 20px;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
}

.column1,
.column2 {
	width: 370px;
	height: 200px;
	background-color: lightblue;
	line-height: 200px;
	position: relative;
	margin-top: 20px;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
}

.column2 {
	margin-left: 390px;
	margin-top: -200px;
}

.column3,
.column4,
.column5,
.column6 {
	width: 180px;
	height: 200px;
	background-color: lightblue;
	line-height: 200px;
	position: relative;
	margin-top: 20px;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
}

.column4,
.column5,
.column6 {
	margin-left: 13px;
}

.column7,
.column8,
.column9 {
	width: 200px;
	height: 130px;
	background-color: lightblue;
	line-height: 130px;
	position: relative;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
}

.column7 {
	margin-top: -200px;
	margin-left: 20px;
}

.column8 {
	margin-top: -55px;
	margin-left: 20px;
}

.column9 {
	margin-top: 15px;
	margin-left: 20px;
}

footer {
	width: 980px;
	height: 60px;
	background-color: lightblue;
	line-height: 60px;
	position: relative;
	float: left;
	margin-top: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

打赏