DIV_CSS层结构布局实例+教程.pptVIP

DIV+CSS;一列布局 ;一列布局（续）;一列二至多块布局 ;两列固定宽度 为了实现二列式布局，要使用了一个全新的属性——float。float属性是CSS布局中非常重要的一个属性，用于控制对象的浮动布局方式，我们的大部分div布局基本上都通过float的控制来实现布局，float的可选参数为：none/left/right。float使用none值时表示对象不浮动，而使用left时，对象将向左浮动 。;二列和三列布局 （续）;两列宽度自适应 ;两列固定，宽度居中 需要利用div的嵌套式设计来完成，使用一个居中的div作为容器，将二列分栏的两个div放置在容器中，从而实现二列的居中显示 。;float属性 float是个重点，在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。;三列固定宽度 三列固定宽度要在三列div上添加一个父div， 比如，设id为content为父容器。然后把光标定位在“content”内，连续插入三个div，并把前两个设置float:left，第三个div设置float:right 。 ;二列和三列布局 （续）;IE6的3像素bug 3像素bug是IE6的一个著名的bug，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现，但在IE7以上的版本中却没有这个bug。要解决这个问题，请在左边的div层上加上_margin-right:-3px 。当两列固定宽度时，最好把右边的div层也固定宽度且向右浮动，这样就可以避免IE6的3像素bug了。