当前位置:首页 > WEB开发 > HTML/CSS

第27章 CSS守旧布局[下]

优良自学吧提供第27章 CSS守旧布局[下],第27章 CSS传统布局[下] index.html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>CSS传

第27章 CSS传统布局[下]

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;
}

 

 

 

 

 

 


(本文来自互联网,不代表搜站(http://www.ylzx8.cn/)的观点和立场)
本站所有内容来自互联网,若本站收录的信息无意侵犯了贵司版权,请给我们来信(ylzx8cn@163.com),我们会及时处理和回复,谢谢

最近更新