css传统布局[下]

来源：互联网发布：实用魔术教学软件编辑：程序博客网时间：2024/05/21 18:59

效果：

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:

0 0