1、DIVCSS网页布局,div标签简单来说就是一个区块容器标签，即与之间相当于一个容器，可以容纳段落、标题、表格、图片等各种元素。因此，可以把与中的内容视为一个独立的对象。可以使用CSS控制页面中块级别元素的格式和定位。CSS对块级元素执行以下操作：为它们设置边距和边框、将它们放置在页面的特定位置、向它们添加背景颜色、在它们周围设置浮动文本等。原来的网页很多都采用表格来布局，但表格会生成大量难以阅读和维护的代码；而现在则采用div标记划分各个区域。Div 用于搭建网页结构，CSS用于创建网页表现（样式/美化），实质即使用XHTML对网站进行标准化重构，使用CSS将表现与内容分离，便于网站维护，简
2、化html页面代码，可以获得一个较优秀的网站结构以便于日后维护。,Div标签,（1）创建DIV对象若要向文档窗口插入DIV标签，首先将插入点放置在要显示DIV标签的位置。执行“插入记录”“布局对象”“DIV标签”命令，或者在“插入”面板“常用”类别中单击“插入DIV标签”按钮，选择插入点后，即可完成插入DIV对象。当然大家也可以输入HTML代码来创建DIV对象。例如：此处显示新DIV标签的内容,CSS布局基础,插入：用于选择Div标签的插入位置。其中：“在插入点”选项是指在当前光标所在位置插入Div标签，此选项仅在没有选中任何内容时可用；“在开始标签之后”选项是指在一对标签的开始标签之后，此标
3、签所引用的内容之前插入Div标签，新创建的Div标签嵌套在此标签中；“在标签之后”选项是指在一对标签的结束标签之后插入Div标签，新创建的Div标签与前面的标签是并列关系。该对话框会列出当前文档中所有已创建的Div标签供用户确定新创Div标签的插入位置。ID：为新插入的Div标签创建唯一的ID号。类：为新插入的Div标签附加已有的类样式。,CSS布局基础,（2）块元素的大小、边距、填充属性,CSS布局基础,CSS布局基础,（3）定位属性 定位属性position用于定义一个元素是否absolute（绝对)、relative（相对）、static（静态）、或者fixed（固定）。定位属性posi
4、tion的语法如下。 position：static|absolute|fixed|relative static：static值是元素的默认值，它会按照普通顺序生成，就如它们在HTML中的出现顺序一般。 relative：relative使元素相对于文档流的前一个对象偏移一定的距离，偏移的方向及幅度由top、right、bottom和left属性联合指定。 absolute：absolute使元素从HTML普通流中分离出来，并把它送到一个完全属于自己的定位中。通过设置top、right、bottom和left的值，可以使绝对定位的元素放置到任何地方。 fixed： fixed属性可以把一个元
5、素永远固定在浏览器的一个位置(如长表格中的标题行)。IE6不支持这个属性。,（4）浮动属性浮动属性是CSS布局中非常重要的一个属性，用于控制对象的浮动布局方式。其语法如下。 float：none | left | right 例如： #Divtest1 height: 200px; width: 200px; background-color: #ff0000; float: left; #Divtest2 background-color: #ffff00; width: 300px; height: 180px; float: left; ,CSS布局基础,CSS布局基础,元素Divtes
6、t1向左浮动，则元素Divtest2也要向左浮动即流到第一个Div对象Divtest1的右侧，如图所示。,单行单列结构,（1）宽度固定 宽度固定主要是设置DIV对象的width属性，DIV在默认状态下，宽度将占据整行的空间。由于设置了布局对象的宽度属性为“width：200px”，高度属性为“height：200px”，因此这是一种固定宽度的布局。 （2）宽度自适应（即相对宽度） 自适应布局能够根据浏览器窗口的大小，自动改变其宽度或高度，是一种非常灵活的布局形式。自适应布局网站对于不同分辨率的显示器都能提供最好的显示效果。 单列宽度自适应布局只需要将宽度由固定值改为百分比值的形式即可。如果将实
7、现的代码中的width:200，修改为width:75%，大家可以浏览测试。,单行单列结构,（3）单列居中 上述例子的特点是Div位于左上方，宽度固定或相对宽度。在网页设计中经常见到的形式是网页整体居中，在传统的表格布局方式中，使用align=”center”可以实现表格的居中。使用CSS也能够实现内容的居中，CSS代码如下： #Divtest1 height: 80px;width:500px;background-color:#FFCC00;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto; ,两
8、列布局结构,（1）二列固定宽度 对于两列式布局与单列布局类似，只不过需要两个DIV标签和两个CSS样式。利用float属性来实现两列式布局，CSS代码如下： #divleft float:left;height: 100px;width: 200px;border: 10px solid #CCFF00;background-color: #F2FAD1; #divright float:left;height: 100px;width: 200px;border: 10px solid #00FFCC;background-color: #FFFF00; ,二列布局结构,在body中插入两个
9、DIV标签，代码如下： 此处显示 id “divleft“ 的内容 此处显示 id “divright“ 的内容 将上述两个样式表分别应用于两个Div对象，如图所示。,二列布局结构,divleft和divright两个样式都使用了浮动(float)属性。该属性的值指出了对象是否浮动以及如何浮动。None表示不浮动，而使用left时，对象向左浮动，因此对于第2个DIV来说，将向左浮动，即流到第1个DIV对象的右侧。使用right时，对象将向右浮动。如果将#divright的float值设置为right，将使得#divright对象浮动到网页的右侧，而#divleft对象由于设置了“float:l
10、eft”属性而浮动到了网页的左侧，如图所示。,二列布局结构,如果结合margin属性，调整两个布局块之间的距离。在样式#divleft和#divright中添加“margin:10px”，则第2个DIV和第1个DIV之间会保留20px的距离，如图所示。,如果没有设置margin属性，则由于设置了“float:left”的属性，第2个DIV会紧紧贴着第1个DIV对象。,二列布局结构,（2）二列相对宽度 对于二列式布局方式，除了固定宽度，象表格一样还可以做到相对宽度。将宽度值设定成百分比即可。 重新定义CSS代码如下： #divleft margin:10px;float:left;height:
11、 150px;width: 30%;border: 10px solid #CCFF00;background-color: #F2FAD1; #divright margin:10px;float:right;height: 150px;width: 50%;border: 10px solid #00FFCC;background-color: #FFFF00; ,二列布局结构,左栏设置宽度为30%，右栏设置宽度为50%。这种二分法是常见的一种网页布局结构，左侧一般都是导航，右侧是内容，如图所示。,二列布局结构,上面的结构采用百分比宽度，但是没有占满整个浏览器窗口。如果将右栏的宽度设置为7
12、0%，那么右栏将被挤到第2行，从而就失去了左右分栏的效果了，如图所示。 这个问题的原因是由CSS盒模型引起的。在CSS布局中，一个对象的真实宽度是由对象的宽度、左右填充、左右边框、左右边界相加组成的。因此，左栏的宽度不仅仅是浏览器窗口宽度的30%，还应当加上左右填充、左右边框、左右边界。右栏的宽度也应当是浏览器窗口的70%，加上左右填充、左右边框、左右边界。因此最终的宽度超过了浏览器窗口的宽度，从而使右栏被挤到了第2行显示。,二列布局结构,在实际使用中，如果要达到满屏效果，简单的办法就是避免使用边框和边界属性，CSS代码如下： #divleft float:left;height: 150px
13、;width: 30%;background-color: #F2FAD1; #divright float:right;height: 150px;width: 70%;background-color: #FFFF00; 使用上述代码后，即可实现两列相对宽度且左右与浏览器填满的效果，如图所示。,核心技能点四：二列布局结构,（3）左列固定、右列宽度自适应 前面学习了两列宽度均为百分比值，从而实现了两列宽度自适应。在实际使用时，有时需要左栏固定，右栏根据浏览窗口的大小自动适应。实现的方法很简单，只需要将左侧宽度设置为固定值，右栏不设置任何宽度值，并且右栏不浮动，CSS代码: #divleft
14、float:left;height: 400px;width: 150px;border: 10px solid #CCFF00;margin: 10px;background-color: #F2FAD1; #divright height: 400px;margin: 10px;border: 10px solid #CCFF00;background-color: #FFFF00; ,二列布局结构,使用上述代码后，左栏宽度固定在150px，而右栏将根据浏览器窗口的大小自动适应，如图所示。,二列布局结构,（4）二列固定宽度居中 在上个核心知识点中介绍了如何使一个DIV对象居中显示，在CSS
15、代码中使用边界属性“margin:0px auto;”即可实现。 那么，在两分栏结构中，需要控制左分栏的左边界和右边界和右分栏的右边界相等。这时候需要利用DIV的嵌套设计来完成。 使用一个DIV作为容器，将两列分栏的两个DIV放入容器中，从而能够实现两列居中显示。将两分栏的两个DIV放入一个id为layout的DIV布局对象中，网页的代码如下：divleft左栏divright右栏 ,（4）二列固定宽度居中 上述的3个Div的CSS代码如下： #layout width: 500px;margin:0px auto ; #divleft float:left;height: 150px;wid
16、th: 100px;border: 10px solid #CCFF00;background-color: #F2FAD1; #divright float:left;height: 150px;width:360px;border: 10px solid #CCFF00;background-color: #FFFF00; ,（1）左右固定宽度中间宽度自适应 三列式的布局是网页中的常见布局形式。采用浮动定位方式，可以很容易地实现多列固定宽度。以下是三列固定宽度的CSS代码： #divleft float:left;height: 150px;width: 100px;border: 10p
17、x solid #CCFF00;background-color: #F2FAD1; #divcenter float:left;border: 10px solid #22FF00;height:150px;width: 300px;background-color: #F2FAff; ,三列式布局结构,#divright float:left;height: 150px;width:300px;border: 10px solid #CCFF00;background-color: #FFFF00; 上述布局的效果如图所示；,使用绝对定位将左栏和右栏的位置确定下来，其CSS代码如下： #d
18、ivleft float:left;height:150px;width:100px;border:10px solid #CCFF00;background-color: #F2FAD1;position:absolute;left:0px;top:0px; #divright float:right;height:150px;width:100px;border: 10px solid #CCFF00;background-color: #FFFF00;position:absolute;right:0px;top:0px;,divleft和divright就是层,然后，设置中间栏的左边界
19、和右边界，使它的左边界等于左栏的宽度，它的右边界等于右栏的宽度，从而可以使让出的宽度正好显示左栏和右栏。 #divcenter border: 10px solid #22FF00;height:150px;background-color:#F2FAff;margin-right:120px;margin-left:120px;margintop:0px; 为了达到最好的预览效果，定义body标签的边界和填充为0px，CSS代码如下： bodymargin:0px 0px 0px 0px;padding:0px 0px 0px 0px; ,（2）顶行三列式布局 顶行的三列式布局结构是顶行自动
20、适应宽度，左右栏绝对定位，中间栏自适应宽度。这是常见的一种网页布局形式。 这里一共需要4个DIV标签，分别是顶行、左栏、中间栏和右栏，其DIV部分的代码如下： divtop顶行 divleft左栏 divcenter中间 divright右栏 首先编写#divtop的CSS代码如下： #divtop height:100px;border:10px solid #FFFF00;background-color: #F2FAF0;margin-top:0px;margin-right:0px;margin-left:0px; ,这里没有设置#divtop的width属性，从而可以实现宽度自适应。
21、中间栏的设置与上例相同，所以不便，#divleft中将“top:0px; ”修改为“top:120px;”，同样的方法将#divright中间“top:0px; ”修改为“top:120px;”。最后流览效果如图所示。,课堂实训：,制作下图布局结构的网页：,参考代码：,/*页面头部*/ #Header width:800px;margin:0px auto; /*上下边距为0px，左右为自动调整居中*/height:100px;background:#FFCC99; /*页面主体*/ #PageBody width:800px;margin:0px auto;height:400px;background:#CCFF00; /*页面底部*/ #Footer width:800px; margin:0px auto; height:50px; background:#00FFFF; ,#Left float:left;width:200px;height:380px;background:#9999FF;margin: 10px; #Right height:380px;background:#55a0FF;margin: 10px; 页面头部左边栏右边栏页面底部 ,
