css传统布局[下]

最新推荐文章于 2024-06-21 16:09:32 发布

fxy流年无悔

最新推荐文章于 2024-06-21 16:09:32 发布

阅读量427

点赞数

分类专栏： web 文章标签： css

本文链接：https://blog.csdn.net/a716121/article/details/52164093

版权

web 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

效果：

index.html

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

<header>
	header
</header>
<!-- <aside>
	aside
</aside> -->
111111

</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: 1;
}
aside{
	width:100px;
	height: 100px;
	background-color: green;
	position: absolute;
	top:20px;
	left: 20px;
	z-index: 2;
}*/


/*header{
	width:100px;
	height: 100px;
	background-color: silver;
	position: fixed;
	top:100px;
	left:0;

}*/

/*header{
	width:100px;
	height: 100px;
	background-color: silver;
	position: relative;
	top: 10px;
	left: 10px;
}	
*/

header{
	width:100px;
	height: 100px;
	background-color: silver;
	position: absolute;
	top:100px;
	left: 100px;
}

index2.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<title>CSS3传统布局[下]</title>
	<meta charset="utf-8">
	<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: 400px;
	background-color: purple;
	/*position: absolute;*/
	top:120px;
	/*left: 0;*/
	
	
}
section{
	width: 760px;
	height: 400px;
	background-color: red;
	position: absolute;
    top:120px;
	left:200px;
	
	
}
footer{
	width: 960px;
	height: 120px;
	background-color: gray;
	/*position: absolute;*/
	top:520px;

}

index3.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<title>CSS3传统布局[下]</title>
	<meta charset="utf-8">
	<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;
	/*resize与overflow:auto一起用才出现可拖拽图形*/
	overflow: auto;
	resize: both;
}
aside{
	width: 200px;
	height: 400px;
	background-color: purple;
	border:5px solid green;
	/*上下左右空出10个像素*/
	padding:10px;
	/*border-box不让border和padding额外增加元素大小*/
	box-sizing: border-box;
	float:left;

}
section{
	width: 760px;
	height: 400px;
	background-color: red;
	float: right;

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

ppt:

fxy流年无悔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css传统布局[下]

效果：index.html CSS3传统布局[下] header aside -->111111style.css@charset "utf-8";body{ margin:100px; height: 800px; border:1px solid red; /*在body父元素设置一个不需要top和le
复制链接

扫一扫

专栏目录