第27章 CSS传统布局[下]

最新推荐文章于 2024-11-12 20:43:23 发布

iteye_17658

最新推荐文章于 2024-11-12 20:43:23 发布

阅读量107

点赞数

分类专栏：阅-H5 文章标签： html5 css3

阅-H5 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

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>

<header>
	header
</header>

<!-- <aside>
	aside
</aside> -->

1111

</body>
</html>

style.css

@charset "utf-8";

body {
	margin: 100px;
	height: 800px;
	border: 1px solid red;
	/*这body父元素设置一个不需要top和left定位的相对定位，这个叫做设置参考点*/
	position: relative;
}

header {
	width: 100px;
	height: 100px;
	background-color: silver;
/*	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;*/
/*	position: fixed;
	top: 100px;
	left: 0;*/
/*	position: relative;
	top: 10px;
	left: 10px;*/
	position: absolute;
	top: 100px;
	left: 100px;
}

/*aside {
	width: 100px;
	height: 100px;
	background-color: green;
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 2;
}*/

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 {
	width: 960px;
	margin: 0 auto;
	position: relative;
}

header {
	width: 960px;
	height: 120px;
	background-color: olive;
	position: absolute;
	top: 0;
	left: 0;
}

aside {
	width: 200px;
	height: 500px;
	background-color: purple;
	position: absolute;
	top: 120px;
	left: 0;
}

section {
	width: 760px;
	height: 500px;
	background-color: maroon;
	position: absolute;
	top: 120px;
	right: 0;
}

footer {
	width: 960px;
	height: 120;
	background-color: gray;
	position: absolute;
	top: 620px;
	left: 0;
}

index3.html

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

<header>
	header
</header>

<aside>
	aside
</aside>

<section>
	section
	<textarea></textarea>
</section>

<footer>
	footer
</footer>

</body>
</html>

style3.css

@charset "utf-8";

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

header {
	height: 120px;
	background-color: olive;
	overflow: auto;
	resize: both;
}

aside {
	width: 200px;
	height: 500px;
	background-color: purple;
	border: 5px solid green;
	padding: 10px;
	box-sizing: border-box;
	float: left;
}

section {
	width: 760px;
	height: 500px;
	background-color: maroon;
	float: right;
}

footer {
	width: 960px;
	height: 120;
	background-color: gray;
	clear: both;
}

textarea {
	resize: none;
}