《创建CSS+DIV布局HTML文档》

1、精简代码，减少重构难度提升网页访问速度SEO优化CSS允许定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。,元素常常被称为块级元素。这意味着这些元素在网页中通常显示为一块内容，即“”。块级元素前后各有一个换行符(非显示添加的)，如果不加特殊定义，它们前后的内容和它们不能在同一行显示。,等元素称为“行内元素”，这是因为它们的内容只能显示在行内，即“”。除非在他们后面人为加上换行符，否则它们后面的内容和它们仍然是在同一行里显示。普通流相对绝对定位浮动普通流是HTML默认定位规则，即各个元素由元素在HTML 中的位置决定。如果是块级元素从上到下一个接一

2、个地排列，框之间的垂直距离是由框的垂直外边距计算出来。如果是行内元素在一行中水平排列。使用定位属性和元素位置属性可以控制元素的显示位置，包括相对定位和绝对定位两种方式。其中，相对定位是指允许元素在相对于文档布局的原始位置上进行偏移，而绝对定位是指允许元素与原始的文档布局分离且任意定位。在CSS中使用定位方式属性position可以控制浏览器对HTML元素位置的定位。static:无特殊定位，对象遵循HTML定位规则。relative:表示采用相对定位，对象不可层叠。absolute:使用left，right，top，bottom等属性进行绝对定位。fixed:表示当页面滚动时，元素不随着滚动。

3、在CSS中使用元素位置属性与定位方式属性共同设置元素的具体位置。auto: 表示默认值length:长度值或者百分数。必须定义position属性值为absolute或者relative此取值方可生效。如果对一个元素进行相对定位，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。注意:在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。注意:设置为绝对定位的元素框会从文档流完全删除，也就是说元素原先在正常文档流中所占的空间会关闭。在CSS中使用层叠顺序z-ind

4、ex属性设置层的先后顺序和覆盖关系。默认情况下，z-index值为1，表示该层位于最底层。auto:遵从其父对象的定位number:无单位的整数值。可为负数 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果把所有三个框都向左移动，

5、那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：在CSS中使用float属性设置对象是否及如何浮动。none:对象不浮动left:对象浮在左边right:对象浮在右边在CSS中使用clear属性设置不允许有浮动对象的边。none:允许两边都可以有浮动对象both:不允许有浮动对象left:不允许左边有浮动对象right:不允许右边有浮动对象 auto: 对象无剪切 rect( number number n

6、umber number ): 依据的顺序提供自的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切 。在CSS中使用clip属性设置对象的可视区域。区域外的部分是透明的。必须将position的值设为absolute，此属性方可使用。在CSS中使用overflow属性设置层内的内容超出层所能容纳的范围时的显示方式。visible:层的大小和内容都会自动显示auto:内容超出层的范围时添加滚动条 hidden:不显示超过对象尺寸的内容scroll:总是显示滚动条 visibility属性规定元素是否可见。提示：即使不可见元素也会占据页面空间。inherit:继承上一个父对象的可见性vi

7、sible:对象可视hidden:对象隐藏HTML添加子菜单代码联系我们 电子邮件联系电子邮件联系 电话联系电话联系 传真联系传真联系 CSS添加子菜单样式规则li ul display:none; li:hover ul display:block;position:absolute;padding:0px;li lifloat:none;li li a:hover background:yellow;color:blue; （这里用到一个后代选择器，只有li元素里的ul元素不予显示）1. 鼠标经过显示二级菜单2. 绝对定位不占用普通流空间3. 屏蔽ul块框固有格式设置垂直下拉菜单是HTML

8、中的一个块容器标签，在标签之内可以放置各种HTML元素，例如p,h1,table,img,form等，使用CSS相关属性将div容器标签中的元素作为一个独立对象进行修饰，不会影响其他HTML元素。大部分div标签都可以使用span标签代替div是一个块级元素，其包含的元素会自动换行；span标签是一个行内元素，其前后不会发生换行。div标签可以包含span标签，但span标签一般不包含div标签。在网页设计中，对于较大的块可以使用div标签完成，而对于具有独特样式的单独html元素，可以使用span标签完成。CSS+DIV基本布局思想：首先在整体上进行标签的分块，然后对各个块进行CSS定位，最

9、后再在各个块中添加相应的内容。第一步要整体构思，将网页划分几个部分，采用的结构：上中下结构、左右两列结构等。第二步根据不同的部分，划分几个DIV块，用来存放不同的内容，大块中可以存放不同的小块。页部区域主体区域导航区域中间区域右侧边区域页脚区域#header #container#footer#left#center#rightbody 在标签中加入css链接:在标签中写入div基本结构 页头区域 导航区域 中间区域 右侧边区域 页脚区域#containerwidth:520px#header background-color:#99bbbb;#left background-color:#f

10、fff99; width:120px; height:200px; text-align:center; float:left;#center background-color:#eeeeee; width:250px; height:200px; float:left;#right background-color:#fccc99; width:150px; height:200px; float:left;#footer background-color:#99bbbb; clear:both; text-align:center;columns多列布局的基本属性，可以同时定义列数和每列的

11、宽度。columns属性初始值根据元素个别属性而定，适用于不可替换的块元素、行内块元素和单元格，但是表格元素除外。目前Webkit引擎支持-webkit-columns私有属性。column-gap属性可以定义两栏之间的间距。normal:根据浏览器默认设置进行解析，一般为1em。:由浮点数字和单位标识符组成的长度值。不可为负值。目前Webkit引擎支持-webkit-column-gap私有属性，Gecko引擎支持-moz-column-gap私有属性，IE浏览器暂时不支持，也没有定义支持私有属性。 -moz-column-gap: 5em; -webkit-column-gap:5em; column-gap:5em;column-rule属性可以定义每列之间边框的宽度、样式和颜色。:由浮点数字和单位标识符组成的长度值。不可为负值。:定义列边框的样式。:定义列边框的颜色。:设置边框透明显示。 -webkit-column-rule: 2px