DIV+CSS.ppt

3、选项是指在当前光标所在位置插入Div标签，此选项仅在没有选中任何内容时可用；“在开始标签之后”选项是指在一对标签的开始标签之后，此标签所引用的内容之前插入Div标签，新创建的Div标签嵌套在此标签中；“在标签之后”选项是指在一对标签的结束标签之后插入Div标签，新创建的Div标签与前面的标签是并列关系。该对话框会列出当前文档中所有已创建的Div标签供用户确定新创Div标签的插入位置。ID：为新插入的Div标签创建唯一的ID号。类：为新插入的Div标签附加已有的类样式。CSS布局基础（2）块元素的大小、边距、填充属性边界边框填充内容CSS布局基础CSS布局基础（3）定位属性

4、定位属性position用于定义一个元素是否absolute（绝对)、relative（相对）、static（静态）、或者fixed（固定）。定位属性position的语法如下。position：static

5、absolute

6、fixed

7、relativestatic：static值是元素的默认值，它会按照普通顺序生成，就如它们在HTML中的出现顺序一般。relative：relative使元素相对于文档流的前一个对象偏移一定的距离，偏移的方向及幅度由top、right、bottom和left属性联合指定。absolute：absolute使元素从HTML普通流中分离出来

8、，并把它送到一个完全属于自己的定位中。通过设置top、right、bottom和left的值，可以使绝对定位的元素放置到任何地方。fixed：fixed属性可以把一个元素永远固定在浏览器的一个位置(如长表格中的标题行)。IE6不支持这个属性。（4）浮动属性浮动属性是CSS布局中非常重要的一个属性，用于控制对象的浮动布局方式。其语法如下。float：none

9、left

10、right例如：#Divtest1{height:200px;width:200px;background-color:#ff0000;float:left;}#Divtest2{background-col

11、or:#ffff00;width:300px;height:180px;float:left;}CSS布局基础CSS布局基础元素Divtest1向左浮动，则元素Divtest2也要向左浮动即流到第一个Div对象Divtest1的右侧，如图所示。单行单列结构（1）宽度固定宽度固定主要是设置DIV对象的width属性，DIV在默认状态下，宽度将占据整行的空间。由于设置了布局对象的宽度属性为“width：200px”，高度属性为“height：200px”，因此这是一种固定宽度的布局。（2）宽度自适应（即相对宽度）自适应布局能够根据浏览器窗口的大小，自动改变其宽度或高度，是一种

12、非常灵活的布局形式。自适应布局网站对于不同分辨率的显示器都能提供最好的显示效果。单列宽度自适应布局只需要将宽度由固定值改为百分比值的形式即可。如果将实现的代码中的width:200，修改为width:75%，大家可以浏览测试。单行单列结构（3）单列居中上述例子的特点是Div位于左上方，宽度固定或相对宽度。在网页设计中经常见到的形式是网页整体居中，在传统的表格布局方式中，使用align=”center”可以实现表格的居中。使用CSS也能够实现内容的居中，CSS代码如下：#Divtest1{height:80px;width:50