DIV常见布局设计 1：单行单列结构 （1）宽度固定

Presentation on theme: "DIV常见布局设计 1：单行单列结构 （1）宽度固定"— Presentation transcript:

1 DIV常见布局设计 1：单行单列结构 （1）宽度固定 宽度固定主要是设置DIV对象的width属性，举例说明：图10-7中的DIV标签都属于宽度固定的标签，DIV在默认状态下，宽度将占据整行的空间。由于设置了布局对象的宽度属性为“width：200px”，高度属性为“height：200px”，因此这是一种固定宽度的布局。 （2）宽度自适应 自适应布局能够根据浏览器窗口的大小，自动改变其宽度或高度，是一种非常灵活的布局形式。自适应布局网站对于不同分辨率的显示器都能提供最好的显示效果。 单列宽度自适应布局只需要将宽度由固定值改为百分比值的形式即可。如果将实现的代码中的width:200，修改为width:75%，大家可以浏览测试。

2 DIV常见布局设计 1、单行单列结构 （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; }

3 DIV常见布局设计 2、二列布局结构 （1）二列固定宽度
对于列式布局与单列布局类似，只不过需要两个DIV标签和两个CSS样式。利用float属性来实现两列式布局，CSS代码如下： #divleft {float:left; height: 100px; width: 200px; border: 10px solid #CCFF00; background-color: #F2FAD1; } #divright {float:left; border: 10px solid #00FFCC; background-color: #FFFF00;

4 DIV常见布局设计 2、二列布局结构 在body中插入两个DIV标签，代码如下： <div id="divleft">此处显示 id "divleft" 的内容</div> <div id="divright">此处显示 id "divright" 的内容</div> 将上述两个样式表分别应用于两个Div对象，如图所示。

5 DIV常见布局设计 2、二列布局结构 divleft和divright两个样式都使用了浮动(float)属性。该属性的值指出了对象是否浮动以及如何浮动。Float表示不浮动，而使用left时，对象向左浮动，因此对于第2个DIV来说，将向左浮动，即流到第1个DIV对象的右侧。使用right时，对象将向右浮动。如果将#divright的float值设置为right，将使得#divright对象浮动到网页的右侧，而#divleft对象由于设置了“float:left”属性而浮动到了网页的左侧，如图所示。

6 DIV常见布局设计 2、二列布局结构 如果结合margin属性，调整两个布局块之间的距离。在样式#divleft和#divright中添加“margin:10px”，则第2个DIV和第1个DIV之间会保留20px的距离，如图所示。 如果没有设置margin属性，则由于设置了“float:left”的属性，第2个DIV会紧紧贴着第1个DIV对象。

7 DIV常见布局设计 2、二列布局结构 （2）二列自适应宽度
对于二列式布局方式，除了固定宽度，象表格一样还可以做到自适应宽度。从单列自适应布局中可以看出，将宽度值设定成百分比即可实现自适应。 重新定义CSS代码如下： #divleft {margin:10px; float:left; height: 150px; width: 30%; border: 10px solid #CCFF00; background-color: #F2FAD1; } #divright {margin:10px; float:right; width: 50%; border: 10px solid #00FFCC; background-color: #FFFF00;

8 DIV常见布局设计 2、二列布局结构 左栏设置宽度为30%，右栏设置宽度为50%。这种二分法是常见的一种网页布局结构，左侧一般都是导航，右侧是内容，如图所示。

9 DIV常见布局设计 2、二列布局结构 上面的结构采用百分比宽度，但是没有占满整个浏览器窗口。如果将右栏的宽度设置为70%，那么右栏将被挤到第2行，从而就失去了左右分栏的效果了，如图所示。 这个问题的原因是由CSS盒模型引起的。在CSS布局中，一个对象的真实宽度是由对象的宽度、左右填充、左右边框、左右边界相加组成的。因此，左栏的宽度不仅仅是浏览器窗口宽度的30%，还应当加上左右填充、左右边框、左右边界。右栏的宽度也应当是浏览器窗口的70%，加上左右填充、左右边框、左右边界。因此最终的宽度超过了浏览器窗口的宽度，从而使右栏被挤到了第2行显示。

10 DIV常见布局设计 2、二列布局结构 在实际使用中，如果要达到满屏效果，简单的办法就是避免使用边框和边界属性，CSS代码如下： #divleft {float:left; height: 150px; width: 30%; background-color: #F2FAD1; } #divright {float:right; width: 70%; background-color: #FFFF00; 使用上述代码后，即可实现两列自适应且左右与浏览器填满的效果，如图所示。

11 DIV常见布局设计 2、二列布局结构 利用CSS定位属性也可以实现两列的自适应布局，其CSS代码如下： #divleft { float:left; height: 150px; width: 20%; background-color: #F2FAD1; position:relative; } #divright { margin-left:22%; background-color: #FFFF00;

12 DIV常见布局设计 2、二列布局结构 #divleft对象的宽度为20%，所以只需要把#divright对象的左边界宽度设置成大于或等于20%就可以了。上述代码中“margin-left:22%”正是设置#divright的左边界为22%，如图所示。 左边界为22%

13 DIV常见布局设计 2、二列布局结构 二列自适应宽度布局的实际预览效果如图所示。

14 DIV常见布局设计 （3）左列固定、右列宽度自适应 前面学习了两列宽度均为百分比值，从而实现了两列宽度自适应。在实际使用时，有时需要左栏固定，右栏根据浏览窗口的大小自动适应。实现的方法很简单，只需要将左侧宽度设置为固定值，右栏不设置任何宽度值，并且右栏不浮动，CSS代码: #divleft { float:left; height: 150px; width: 150px; border: 10px solid #CCFF00; margin: 10px; background-color: #F2FAD1; } #divright { background-color: #FFFF00; 2、二列布局结构

15 DIV常见布局设计 2、二列布局结构 使用上述代码后，左栏宽度固定在150px，而右栏将根据浏览器窗口的大小自动适应，如图所示。

16 DIV常见布局设计 2、二列布局结构 （4）二列固定宽度居中 在上个核心知识点中介绍了如何使一个DIV对象居中显示，在CSS代码中使用边界属性“margin:0px auto;”即可实现。 那么，在两分栏结构中，需要控制左分栏的左边界和右边界和右分栏的右边界相等。这时候需要利用DIV的嵌套设计来完成。 使用一个DIV作为容器，将两列分栏的两个DIV放入容器中，从而能够实现两列居中显示。将两分栏的两个DIV放入一个id为layout的DIV布局对象中，网页的代码如下： <div id="layout"> <div id="divleft">divleft左栏</div> <div id="divright">divright右栏</div> </div>

17 DIV常见布局设计 （4）二列固定宽度居中 上述的3个Div的CSS代码如下： #layout {width: 500px; margin:0px auto ; } #divleft {float:left; height: 150px; width: 100px; border: 10px solid #CCFF00; background-color: #F2FAD1; #divright {float:left; width:360px; background-color: #FFFF00;

18 DIV常见布局设计 这里通过“margin:0xp auto”设置“#layout”的居中属性，从而使里面的内容也居中。根据盒模型理论，一个对象的实际宽度由对象的宽度、左右边界、左右边框、左右填充相加而成，所以“#layout”的宽度设置为500px，即“100px+360px+20px+20px=500px”。布局的预览效果如图所示：

19 DIV常见布局设计 3、三列式布局结构 （1）左右固定宽度中间宽度自适应 三列式的布局是网页中的常见布局形式。采用浮动定位方式，可以很容易地实现多列固定宽度。以下是三列固定宽度的CSS代码： #divleft {float:left; height: 150px; width: 100px; border: 10px solid #CCFF00; background-color: #F2FAD1; } #divcenter {float:left; border: 10px solid #22FF00; height:150px; width: 300px; background-color: #F2FAff;

20 DIV常见布局设计 #divright { float:left; height: 150px; width:300px; border: 10px solid #CCFF00; background-color: #FFFF00; } 上述布局的效果如图10-19所示；

21 DIV常见布局设计 使用绝对定位将左栏和右栏的位置确定下来，其CSS代码如下： #divleft {float:left; height:150px; width:100px; border:10px solid #CCFF00; background-color: #F2FAD1; position:absolute; left:0px; top:0px; } #divright {float:right; border: 10px solid #CCFF00; background-color: #FFFF00; right:0px; top:0px;}

22 DIV常见布局设计 然后，设置中间栏的左边界和右边界，使它的左边界等于左栏的宽度，它的右边界等于右栏的宽度，从而可以使让出的宽度正好显示左栏和右栏。 #divcenter { border: 10px solid #22FF00; height:150px; background-color:#F2FAff; margin-right:120px; margin-left:120px; margintop:0px; } 为了达到最好的预览效果，定义body标签的边界和填充为0px，CSS代码如下： body{ margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;

23 DIV常见布局设计 （2）顶行三列式布局 顶行的三列式布局结构是顶行自动适应宽度，左右栏绝对定位，中间栏自适应宽度。这是常见的一种网页布局形式。 这里一共需要4个DIV标签，分别是顶行、左栏、中间栏和右栏，其DIV部分的代码如下： <div id="divtop">divtop顶行</div> <div id="divleft">divleft左栏</div> <div id="divcenter">divcenter中间</div> <div id="divright">divright右栏</div> 首先编写#divtop的CSS代码如下： #divtop { height:100px; border:10px solid #FFFF00; background-color: #F2FAF0; margin-top:0px; margin-right:0px; margin-left:0px; }

24 DIV常见布局设计 这里没有设置#divtop的width属性，从而可以实现宽度自适应。中间栏的设置与上例相同，所以不变，#divleft中将“top:0px; ”修改为“top:120px;”，同样的方法将#divright中间“top:0px; ”修改为“top:120px;”。最后浏览效果如图所示。