DIVCSS层结构布局实例教程.ppt

《DIVCSS层结构布局实例教程.ppt》由会员分享，可在线阅读，更多相关《DIVCSS层结构布局实例教程.ppt（12页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、DIV+CSS一列布局一列布局 一列固定宽度一列固定宽度#layout height:300px;width:400px;background:#99FFcc;一列固定宽度居中一列固定宽度居中 margin属性用于控制对象的上、右、下、属性用于控制对象的上、右、下、左四个方向的外边距，设置左右两边为左四个方向的外边距，设置左右两边为autoauto，即可实现居中。，即可实现居中。一列布局（续）一列布局（续）一列自适应宽度一列自适应宽度#layout height:300px;width:80%;background:#99FFcc;一列自适应宽度居中一列自适应宽度居中#layout margi

2、n:auto;height:300px;width:80%;background:#99FFcc;一列二至多块布局一列二至多块布局 一列布局（续）一列布局（续）#head background-color:#0099CC;height:80px;width:80%;margin-top:5px;margin-right:auto;margin-left:auto;#main background-color:#996600;height:300px;width:80%;margin-top:5px;margin-right:auto;margin-left:auto;#foot backgro

3、und-color:#999966;height:100px;width:80%;margin-top:5px;margin-right:auto;margin-left:auto;两列固定宽度两列固定宽度 为了实现二列式布局，要使用了一个全为了实现二列式布局，要使用了一个全新的属性新的属性float。float属性是属性是CSS布局布局中非常重要的一个属性，用于控制对象中非常重要的一个属性，用于控制对象的浮动布局方式，我们的大部分的浮动布局方式，我们的大部分div布局布局基本上都通过基本上都通过float的控制来实现布局，的控制来实现布局，float的可选参数为：的可选参数为：none/le

4、ft/right。float使用使用none值时表示对象不浮动，而值时表示对象不浮动，而使用使用left时，对象将向左浮动时，对象将向左浮动。二列和三列布局二列和三列布局二列和三列布局二列和三列布局（续）（续）#left background-color:#E8F5FE;border:1px solid#A9C9E2;float:left;height:300px;width:200px;#right background-color:#F2FDDB;border:1px solid#A5CF3D;float:left;height:300px;width:200px;两列宽度自适应两列宽度自

5、适应 二列和三列布局二列和三列布局（续）（续）#left background-color:#E8F5FE;border:1px solid#A9C9E2;float:left;height:300px;width:20%;#right background-color:#F2FDDB;border:1px solid#A5CF3D;float:left;height:300px;width:70%;两列固定，宽度居中两列固定，宽度居中 需要利用需要利用div的嵌套式设计来完成，使用的嵌套式设计来完成，使用一个居中的一个居中的div作为容器，将二列分栏的作为容器，将二列分栏的两个两个div放置

6、在容器中，从而实现二列的放置在容器中，从而实现二列的居中显示居中显示。二列和三列布局二列和三列布局（续）（续）#layout width:404px;margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:auto;#left float:left;height:300px;width:200px;#right float:left;height:300px;width:200px;float属性属性 float是个重点，在是个重点，在 CSS 中，任何元素都中，任何元素都可以浮动。浮动元素会生成一个块级框，可以浮动。浮动元

7、素会生成一个块级框，而不论它本身是何种元素；且要指明一而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空跑到下一行，直到拥有足够放下它的空间。间。二列和三列布局二列和三列布局（续）（续）三列固定宽度三列固定宽度 三列固定宽度要在三列三列固定宽度要在三列div上添加一个父上添加一个父div，比如，设比如，设id为为content为父容器。然为父容器。然后把光标定位在后把光标定位在“content”内，连续插内，连续插入三个入三个div，并把前两

8、个设置，并把前两个设置float:left，第三个第三个div设置设置float:right。二列和三列布局二列和三列布局（续）（续）二列和三列布局二列和三列布局（续）（续）#content background-color:#99CC99;height:300px;width:600px;#left height:300px;width:200px;background-color:#9999FF;float:left;#main background-color:#996600;float:left;height:300px;width:200px;#right background-co

9、lor:#0066CC;float:right;height:300px;width:200px;IE6的的3像素像素bug 3像素像素bug是是IE6的一个著名的的一个著名的bug，当浮，当浮动元素与非浮动元素相邻时，这个动元素与非浮动元素相邻时，这个3像素像素的的Bug就会出现，但在就会出现，但在IE7以上的版本中以上的版本中却没有这个却没有这个bug。要解决这个问题，请在。要解决这个问题，请在左边的左边的div层上加上层上加上_margin-right:-3px。当两列固定宽度时，最好把右边的。当两列固定宽度时，最好把右边的div层也固定宽度且向右浮动，这样就可以层也固定宽度且向右浮动，这样就可以避免避免IE6的的3像素像素bug了。了。二列和三列布局二列和三列布局（续）（续）