一、页面布局

1.确定网页的主体内容，在页面中水平居中显示

2.分析页面中的模块，思考各个模块的排版

3.控制页面中的各个模块到指定位置，完成页面布局

二、CSS的定位机制

1.普通流方式：有元素在html文件中的位置决定(由标签在文件中的位置来决定)

   2.浮动方式：元素在页面中可以左右移动,直到碰到包含框或其他浮动框

   3.绝对定位：直接将元素定位到页面的任何位置(设置元素在页面中的位置坐标)

三、浮动属性

1.浮动：元素脱离原有的标准文档流,移动到其父元素中指定的位置

2.浮动的实现：在元素的CSS中添加float属性

left:向左浮动

right：向右浮动

none：不浮动（默认设置）

浮动元素不占据空间

四、常见的浮动布局

1.一列固定宽度并自动居中：margin设置为auto

2.一列自适应宽度：相对于浏览器而言,盒子的宽度会随浏览器宽度的改变而改变

3.两列自动居中：采用盒子嵌套方式实现,让外层的盒子自动居中

五、清除浮动

浮动的元素离开了原有的文档流,它会对页面中其他元素的排版产生影响。为了消除这种影响，可以使用clear属性消除浮动

在clear属性中设置

left：清除左侧的浮动影响

right：清除右侧的浮动影响

both：清除左右两侧的浮动影响

六、绝对定位与相对定位

1.相对定位：元素以它所在的普通流中的位置为起始点进行定位(设置坐标)

position:relative;/*相对定位*/
top:150px;
left:150px;

2.绝对定位：可以把元素精确定位到页面中的某个地方

position: absolute;
top:30px;
left: 45px;
z-index: -1;

（1）元素绝对定位后，它与普通文档流就没有关系，不占据普通文档流的空间

（2）绝对定位的元素的位置是相对于最近的父元素而言的

（3）因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index

来控制它层级次序。z-index 的值越高，它显示的越在上层

注意：页面中元素的z-index(层级)为0

七、在页面布局中常用的CSS属性

1.visibility：元素是否可见

visible:元素可见（默认）

hidden：不可见

2.display：元素的显示方式

block:块状显示

inline：显示在一行

none：不显示

hidden和none的区别

visibility: hidden; 隐藏元素后，保留元素所占有的物理空间

display: none;隐藏元素后，不保留元素所占有的物理空间

八、CSS中的块级元素和行内元素

1.常见的块级元素(block)：占据了全部的宽度,在前后都有换行符

<h1></h1><p></p><div></div><ul></ul><table></table><form></form>

宽度(width)、高度(height)、内边距(padding)、外边距(margin) 都是可以控的

2.内联元素(inline)：只需要必要的宽度,不强制换行

  <span></span><a></a>

宽度(width)、高度(height)

  内边距(padding-top、padding-bottom)

  外边距(margin-top、margin-botom)

  都是不能改变的

块元素：无论内容是什么都会独占一行，主要用于页面布局

行内元素：只占用自身的大小，不会占用一行。

DIV+CSS页面布局相关推荐

div css 登录页面布局,DIV+CSS页面布局
页面布局设计一.三行模式或三列模式特点:把整个页面水平.垂直分成三个区域. 三行模式:将页面分成头部.主体及页脚三部分三列模式:将页面分成左.中.右三个部分在CSS文件里: 1.三行模式代码 ...
div+css页面布局课堂笔记11---页面布局网站首页设计实例__终极版（仿csdn首页）
1. firstPage.html文件: <span style="font-size:14px;"><!doctype html> <html> ...
web前端开发技术实验与实践（第三版）储久良编著项目16 div+CSS页面布局设计
web前端开发技术实验与实践(第三版)储久良编著项目16 实训五项目16 一.页面文字素材: 这是头部信息区. 这是导航信息区. 这是主题信息区. 这是右侧信息区. 这是版权信息区. 二.代码: ...
div css页面布局模板_HTML 布局
网页布局对改善网站的外观非常重要. 请慎重设计您的网页布局. 在线实例使用元素的网页布局如何使用元素添加布局. 使用如何使用网站布局大多数网站会把内容安排到多个列中(就像杂志或报纸那样). ...
CSS页面布局（超详解）
目录 1 CSS页面布局概述 1.1 概述 1.2 网页栏目划分 1.3 元素类型转化 1.3.1 块元素 1.3.2 行内元素 1.3.2 块元素和行内元素的转换 1.4 定位 1.4.1 静态定位 ...
应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt
<利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...
table和div在页面布局上应该注意的问题
在这篇文章开篇,我先纠正一下我之前写的一篇入门文章的错误,还是先引用一下比较官方的说法吧,避免再次误导各位新手 " <!DOCTYPE> 声明必须位于 HTML5 文档中的第一行 ...
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有所瞭 ...

DIV+CSS页面布局