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

DIV+CSS,一列布局,一列固定宽度 #layout height: 300px; width: 400px; background: #99FFcc; 一列固定宽度居中 margin属性用于控制对象的上、右、下、左四个方向的外边距，设置左右两边为auto，即可实现居中。,一列布局（续）,一列自适应宽度 #layout height: 300px; width:80%;background: #99FFcc; 一列自适应宽度居中 #layout margin: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 background-color: #999966; height: 100px; width: 80%; margin-top: 5px; margin-right: auto; margin-left: auto; ,两列固定宽度 为了实现二列式布局，要使用了一个全新的属性float。float属性是CSS布局中非常重要的一个属性，用于控制对象的浮动布局方式，我们的大部分div布局基本上都通过float的控制来实现布局，float的可选参数为：none/left/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; ,两列宽度自适应,二列和三列布局 （续）,#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放置在容器中，从而实现二列的居中显示 。,二列和三列布局 （续）,#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 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。,二列和三列布局 （续）,三列固定宽度 三列固定宽度要在三列div上添加一个父div， 比如，设id为content为父容器。然后把光标定位在“content”内，连续插入三个div，并把前两个设置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-color: #0066CC; float: right; height: 300px; width: 200px;,IE6的3像素bug 3像素bug是IE6的一个著名的bug，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现，但在IE7以上