网页基础布局

来源：互联网发布：c语言必读书籍编辑：程序博客网时间：2024/06/05 03:57

div+css的自动居中一列布局

1.三个技能:

标准文档流
块级元素
margin属性

2.一个注意：

如果父层要设置margin的auto，那么就不能设置float和绝对定位。

3.一个简单的一列式布局样式

<!DOCTYPE html><html><head><title></title><meta charset="utf-8"><style type="text/css">    *{    margin: 0px;    padding:0px;     }    p{    text-align: center;    padding-top: 40px;    }.whole{width: 100%;height: 700px;background-color: gray;}.top{width: 100%;height: 100px;background-color: black;color: white;}.body{width: 80%;height: 500px;background-color: white;color: white;margin: 0px auto;}.foot{width: 80%;height: 100px;background-color: blue;color: white;margin: 0px auto;}</style></head><body><div class="whole"><div class="top"><p>这是头部</p></div><div class="body"><p>这是身体</p></div><div class="foot"><p>这是底部</p></div></div></body></html>

2.横向两列布局

1.一个技能：

float属性可以使块级元素横向排列。

2.一些注意点：

如果设置了浮动，但是么有设置宽度值，那么元素会随内容的变化而变化。
受到影响的元素是紧邻之后的元素。

3.清除浮动的两种方法：

clear：both（clear：left ）：清除紧邻之后的元素
width：100%+overflower：hidden

4.基础的横向布局代码：

<!DOCTYPE html><html><head><title></title><meta charset="utf-8"><style type="text/css">    *{    margin: 0px;    padding:0px;     }    p{    text-align: center;    padding-top: 40px;    }.whole{width: 100%;height: 700px;background-color: gray;}.top{width: 100%;height: 100px;background-color: black;color: white;}.body{width: 80%;height: 500px;background-color: white;color: white;margin: 0px auto;overflow: hidden;}.body_top{width: 80%;height: 250px;background-color: pink;float: left;}.body_right{width: 20%;height: 500px;background-color: orange;float: right;}.body_buttom{width: 80%;height: 250px;background-color: yellow;float: left;}.foot{width: 80%;height: 100px;background-color: blue;color: white;margin: 0px auto;}}</style></head><body><div class="whole"><div class="top"><p>这是头部</p></div><div class="body"><!-- 排列的顺序非常重要，如果挑换top，right和buttom的顺序，将会得到不一样的结果，这是由渲染的顺序决定的 --><div class="body_top"></div><div class="body_right">                </div><div class="body_buttom"></div></div><div class="foot"><p>这是底部</p></div></div></body></html>

3.绝对布局定位

1.3种定位形式：

相对定位，绝对定位，静态定位（static fixed absolute raletive） //absolute和fixed都是绝对定位

2.对三种的形式的讨论

relative：它的偏移是相对于原点的。会产生空间的层堆叠。

绝对定位：脱离绝对文档流。宽度随内容变化。会参照祖先来定位。

3.简单的定位的演示：

<!DOCTYPE html><html><head><title></title><meta charset="utf-8"><style type="text/css">.whole{width: 100%;height: 1000px;background-color: gray;}.outer{background-color: red;width: 50%;height: 500px;position:relative;top: 100px;left: 100px;}.inner{background-color: pink;width: 50%;height: 250px;position: absolute;top: 100px;left: 100px;}</style></head><body><div class="whole"><div class="outer"><div class="inner"></div></div></div></body></html>

0 0