静态网页设计div css,[网页设计]DIV+CSS网页标准化布局(一）

1、DIV+CSS定义及优势

Div+css 是什么?

Div+css 是一种目前比较流行的网页布局技术

Div 来存放需要显示的数据(文字，图表..) , css 就是用来指定怎样显示， 从而做到数据和显示相互的效果

Div+css 优势采用DIV+CSS模式的网站具有以下优势：

表现和内容相分离

代码简洁，提高页面浏览速度

易于维护和改版

提高搜索引擎对网页的索引效率

我们可以简单的这样理解div+css:

div是用于存放内容(文字,图片,元素)的容器。

css是用于指定放在div中的内容如何显示,包括这些内容的位置和外观.

2、“无意义”的HTML元素div和spanHTML只是赋予内容的手段，大部分HTML标签都有其意义(例如，标签p创建段落，h1标签创建标题等等)的，然而div和span标签似乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS结合起来后，它们被用得十分广泛。你所需要记住的是span和div是“无意义”的标签。它们的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用

它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来。span和div的不同之处在于span是内联的，用在一小块的内联HTML中。而div(division)元素是块级的(简单地说，它等同于其前后有断行)，用于组合一大块的代码，为HTML 文档内大块的内容提供结构和背景的元素，可以包含段落、标题、表格甚至其他部分，这使div便于建立不同集成的类。

div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制

3、页面布局的盒子模型

(1)盒子模型的相关属性margin(外边距/边界)

border(边框)

padding(内边距/填充 )

我们看图理解一下各属性作用：

     以上属性又分为上、右、下、左四个方向

(2)盒模型的层次关系    我们通过一个经典的盒模型3D立体结构图来理解，如图：     从这个层次关系中可以看出，当同时设置背景图和背景色时，背景    垂直居中：

层模型--相对定位

如果想为元素设置层模型中的相对定位，需要设置position:relative(表示相对定位)，它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

如下代码实现相对于以前位置向下移动50px，向右移动100px;#div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px;}

层模型--固定定位

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。1 #div1{ 2 width:200px; 3 height:200px; 4 border:2px red solid; 5 position:fixed; 6 left:100px; 7 top:50px; 8 } 9

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。

7、盒子模型的浮动布局

理解浮动属性首先要搞清楚，什么是文档流？    浮动示例，没有使用浮动的3个DIV：    CSS样式代码：    执行效果如图：        HTML结构代码：    clear只对块级元素有效，表示如果前一个元素存在左浮动或右浮动，则换行

转载请保留本文网址：

http://www.shaoqun.com/a/250660.html