第27章 CSS传统布局[上]

最新推荐文章于 2025-11-04 19:05:08 发布

最新推荐文章于 2025-11-04 19:05:08 发布 · 112 阅读

阅-H5 专栏收录该内容

40 篇文章

订阅专栏

本文深入探讨了CSS传统布局的基本概念，展示了如何使用HTML和CSS创建经典的网页布局，并通过实例演示了header、aside、section和footer元素的应用。

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>CSS传统布局[上]</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<table border="0">
	<tr>
		<td colspan="2" class="header">header</td>
	</tr>
	<tr>
		<td class="aside">aside</td>
		<td class="section">section</td>
	</tr>
	<tr>
		<td colspan="2" class="footer">footer</td>
	</tr>
</table>

</body>
</html>

style.css

@charset "utf-8";

body {
	margin: 0;
}

table {
	/*width: 960px;*/
	width: 100%;
	margin: 0 auto;
	/*border-spacing: 0px;*/
	border-collapse: collapse;
}
.header {
	height: 120px;
	background-color: olive;
}
.aside {
	width: 200px;
	height: 500px;
	background-color: purple;
}
.section {
	width: 760px;
	background-color: maroon;
}
.footer {
	height: 120px;
	background-color: gray;
}

index2.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>CSS传统布局[上]</title>
	<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>

<header>
	header
</header>

<aside>
	aside
</aside>

<section>
	section
</section>

<footer>
	footer
</footer>

</body>
</html>

style2.css

@charset "utf-8";

body {
	margin: 0 auto;
	/*width: 960px;*/
	width: auto;
}

header {
	height: 120px;
	background-color: olive;
}
aside {
	/*width: 200px;*/
	width: 20%;
	/*min-width: 120px;*/
	height: 500px;
	background-color: purple;
	float: left;
}
section {
	/*width: 760px;*/
	width: 80%;
	height: 500px;
	background-color: maroon;
	float: right;
}
footer {
	height: 120px;
	background-color: gray;
	clear: both;
}