文章目录

一：网页布局的目的
二：如何布局
- （1）：确定“版心”
- （2）：分析模块
三：页面元素的定位机制
- （1）流式布局
- （2）浮动-float
- （3）绝对定位(position:absolute)
- (4)相对定位(position:relative)
四：布局中的常用属性
- (1)浮动属性(float)
- (2)清除属性(clear)
- (3)溢出属性(overflow)
五：元素的定位
六：偏移量
七：层叠属性
八：语义标签
九：命名规范

一：网页布局的目的

通过网页布局，可以使网页的内容更加清晰，有条理，同时更加易读。

二：如何布局

（1）：确定“版心”

所谓“版心”是页面主体内容的所在位置，一般为居中。

（2）：分析模块

页面通常由五大块组成：头部（header）—导航(nav)—焦点图(banner)—内容(content)—版权(footer)

三：页面元素的定位机制

（1）流式布局

按元素类型和在HTML文件中出现的顺序定位。
A:block块状布局：从上至下一个接一个排列。
B:inline水平布局：在一行中水平布局。

（2）浮动-float

当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框，产生文字环绕的效果。

（3）绝对定位(position:absolute)

通过页面坐标(页面左上角)的方式来定位元素。使用绝对定位后元素不会占用普通流空间

(4)相对定位(position:relative)

如果一个元素进行相对定位，它将以它所在的位置(即它在普通流中的位置)为初始点，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动。

注意：与定位相关的属性有left、top、right、bottom,这四个属性只有在使用了定位属性(position)后才有效;只能同时使用相邻的两个属性，不能同时使用相对的两个属性。

四：布局中的常用属性

(1)浮动属性(float)

选择器{float: 属性值;}

float的属性值有三个：left；right;none（默认值）

例一：一列固定宽度并自动居中

 选择器{height: 120px;width: 1000px;background: red;margin: auto;}

例二：一列自适应宽度

#d2{height: 200px;background: greenyellow;margin: auto;}

例三：例3：两列自适应宽度

选择器{height: 350px;width: 120px;background: red;float: left;}选择器{height: 350px;width: 70%;background: blue;}

(2)清除属性(clear)

clear的取值有四个：

none：允许元素两边都有浮动元素

left：不允许元素左边有浮动的元素

right：不允许元素右边有浮动的元素

both：不允许两边有浮动的元素

例如：

   <style type="text/css">.leftText{margin: 3px;height: 180px;width: 170px;background-color: red;float: left;}.footText{height: 185px;background-color:blue;}.Clear{clear: both;}</style><body><div class="leftText">区块1</div><div class="leftText">区块2</div><div class="Clear"></div><div class="footText">区块3</div></body>

下图是加入clear属性前后显示：

如果没有Clear这个DIV，"区块3"会紧接"区块2"并列在同一行;加上Clear这个div,就可以消除浮动div的影响，"区块3"的布局就不受影响。

(3)溢出属性(overflow)

当内容溢出元素边框的时候，选择溢出属性overflow,有四个取值。

scroll	提供滚动机制(带有滚动条)
visible	默认值，内容溢出到边框以外
hidden	内容被修剪。溢出的部分看不见
auto	如果内容被修剪，则显示器会显示滚动条以便查看其余的内容

使用DIV+CSS进行布局时要注意的问题：

div、ul、ol、p、li都是块级标签，它们和周围的元素都有边界(margin),在块级标签嵌套的时候，要注意处理这些边界。

五：元素的定位

   选择器{position:属性值;}

position有四个取值：

static	自动定位(默认的定位方式)
relative	相对于元素在文档流中的位置进行定位
absolute	相对于已经定义好的父元素的位置进行定位
fixed	相对于浏览器窗口进行的定位

六：偏移量

精确定位元素的位置，取值是数值或百分比。

top	顶端偏移量
left	左边偏移量
right	右边偏移量
bottom	下边偏移量

七：层叠属性

当对元素进行定位时，可能会出现堆叠现象;可以使用z-index属性来设置元素的堆叠顺序。z-index的取值是整数(0、正整数、负整数)。取值越小，层叠顺序越在下面。

八：语义标签

1、<thead></thead>：表示表格的头部

2、<tbody></tbody>：表示表格的主体

3、<header></header>：表示页面的头部

4、<nav></nav>：表示导航栏

5、<footer></footer>：表示页面或区域的底部

6、<article></article>：表示页面中独立的文档内容

7、<section></section>：用于对页面内容进行分块

8、<aside></aside>：表示页面的附属信息(侧边栏、广告等)

九：命名规范

1、避免使用中文命名；不能以数字开头；不能占用关键字；用最少的字母达到最好理解的意义(见名知义)

2、驼峰式命名：除第一个单词之外，其他单词首字母大写;
帕斯卡命名：每个单词之间用"_"连接。

3、CSS文件的命名：

文件	命名
主样式文件	master.css
模块样式	module.css
字体样式	font.css
基本样式	base.css
布局样式(版面)	layout.css
表单样式	forms.css

DIV+CSS网页布局（新手必备)相关推荐

Float构建三栏DIV CSS网页布局
你对用float构建三栏DIV CSS网页布局的用法是否熟悉,这里和大家分享一下,用绝对定位的方法从CSS中得到固定宽度的布局并不困难:但是得到液态布局就有点困难了,因此现在都开始抛弃基于表格的布局技 ...
html css网页布局实例简单,Div+CSS网页布局项目实战一（含设计图、HTML和CSS源文件）...
网页的基本结构新建一个文件夹,命名为"DIV+CSS布局练习",在文件夹下新建两个空的记事本文档,输入以下内容: Div+CSS网页布局项目实战:页面布局与规划|www.125j ...
Div+CSS网页布局对网站搜索引擎优化的影响
Div+CSS网页布局对网站搜索引擎优化的影响我们都知道DivCSS网页布局的好处,它对网站搜索引擎优化的影响有哪些呢? 网站优化使用 DIV+CSS佈局,页面代码精简,这一点相信对XHTML有所瞭 ...
web前端 --- CSS（04） -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
DIV+CSS网页布局实例
一.效果预览说明:非常基础的IDV+CSS,实现了一般网站布局.CSS样式也比较基础,一些像定位等属性都没有使用. 二.代码实现 1.主体结构 (1)标签结构 (2)容器样式 2.头部 (1)头部标 ...
Div CSS网页布局对网站搜索引擎优化的影响
我们都知道DivCSS网页布局的好处,它对网站搜索引擎优化的影响有哪些呢? 网站优化使用 DIV CSS佈局,页面代码精简,这一点相信对XHTML有所瞭解的都知道.代码精简所带来的直接好处有两点:一是 ...
DIV+CSS网页布局常用的一些基础知识
CSS命名规范一．文件命名规范全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.css: 二．常 ...
DIV+CSS 网页布局之：三列布局
1.宽度自适应三列布局三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...
DIV CSS网页布局让搜索引擎蜘蛛不再累
怎样做CSS布局呢? CSS文件的链接方式 1.附加链接:外部CSS文件 2.导入CSS:常用应用多个CSS文件时,将多个CSS导入一个CSS文件中 CSS规则定义有三种 1.类比如".Re ...

DIV+CSS网页布局（新手必备)