三列布局介绍.pptVIP

机械工业出版社 常用的CSS布局 三列布局介绍 三列布局介绍 三列布局在网页设计中较常用； 访问者的注意力最容易集中在中栏的信息区域，其次才是左右两侧信息。 三列布局介绍 两列定宽中间自适应的三列结构 div id=header这里是header区域/div div id=container div id=mainBox div id=content主要内容区域 /div /div div id=submainBox次要内容区域 /div div id=“sideBox” 侧边栏/div /div div id=“footer” footer区域 /div 三列布局介绍 两列定宽中间自适应的三列结构 主要利用负边距原理实现两列定宽中间自适应的三列结构，这里负边距值指的是将某个元素的margin属性值设置成负值，对于使用负边距的元素可以将其他容器“吸引”到身边，从而解决页面布局的问题。 #container { overflow:auto; } #mainBox { float:left; width:100%; height:200px;} #content { height:200px; margin:0 210px 0 310px;} #submainBox { float:left; height:200px; width:300px; margin-left:-100%;} #sideBox { float:left; height:200px; width:200px; margin-left:-200px;} 三列布局介绍 三列自适应结构 #content { height:200px; margin:0 31% 0 31%;/*设置外边距左右距离为自适应*/} #submainBox { float:left; height:200px; width:30%;/*设置宽度为30%*/ margin-left:-100%;/*设置负边距为-100%*/} #sideBox { float:left; height:200px; width:30%;/*设置宽度为30%*/ margin-left:-30%;/*设置负边距为-30%*/ } 清除浮动 父层不随子层高度 用float属性不可避免在非ie浏览器下会出现浮动问题，具体症状表现为：子层不继承父层的高度，照成高度不统一现象 解决方法 在两个浮动层之后插入一个层 br class=clearfloat / 定义类： .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px;} 外边距的叠加 1．两个元素垂直相遇时叠加 当两个元素垂直相遇时，第一个元素的下边距与第二个元素的上边距发生叠加，叠加后，两元素之间的距离为这两个元素外边距值较大者。 2．两个元素包含时叠加 架设两个元素没有内边距和边框，且一个元素包含另外一个元素，这时它们的上边距或下边距会发生叠加，叠加后，两元素之间的距离为这两个元素上边距或下边距较大者。 IE6双倍边距bug 当页面内有多个连续浮动时，如项目列表是采用左浮动，此时设置li的左侧margin值时，在最左侧呈现双倍情况。如外边距设置为10px，而左侧则呈现出20px 解决方法 在浮动元素上加上display:inline;的样式，可避免双倍边距bug 实训：精品课程网站首页 操作提示 div id=wrap div id=top /div div id=nav div id=nav_logo/div div id=nav_menu /div /div div id=main“ div id=main_left div id=main_left_top /div div id=main_left_botton/div /div div id=main_mid div id=main_mid_top div div id=main_mid_botton/div /div div id=main_right /div /div div i