CSS浮动布局.ppt

浮动实验 10 div id=“box1”/div div id=“box2”/div div id=“box3”/div 实验 10 小结： 普通块元素对浮动元素设置上边界无效。 可以给浮动元素设置下边界实现间隔。 两列浮动布局 四 两列布局网页的逻辑结构 #container #header #content #footer #sidebar body div id=“container” div id=“header”…/div div id=“sidebar”…/div div id=“content”…/div div id=“footer”…/div /div /body 方法1 #container #header #content #footer #sidebar #sidebar { width: 240px; float: left; } #content { margin-left: 240px; } #footer { clear:both; } float: left clear: both margin-left: 240px 方法2 #container #header #content #footer #sidebar #sidebar { float: left; width: 240px; } #content { float: right; width: 500px; } #footer { clear:both; } float: right float: left clear: both 三列浮动布局 五 CSS 布局 三列布局网页的逻辑结构 #container #header #content #footer #sidebar2 #sidebar1 body div id=“container” div id=“header”…/div div id =“sidebar1”…/div div id=“content”…/div div id=“sidebar2”…/div div id=“footer”…/div /div /body 方法1 #container #header #content #footer #sidebar2 #sidebar1 …… #sidebar1 { float: left; width: 170px; } #content { float: left; width: 400px; } #sidebar2 { float: right; width: 170px; } #footer { clear:both; } …… float: left float: left clear: both float: right 方法2 #container #header #content #footer #sidebar1 #sidebar2 …… #sidebar1 { float:right; width: 170px; } #content { float: right; width: 400px; } #sidebar2 { float: left; width: 170px; } #footer { clear:both; } …… float: right float: left clear: both float: right 让背景延伸 六 CSS 布局 让背景延伸 在 container 上应用一个垂直重复的背景图像。 #container { width: 760px; margin: auto; text-align: left; background: url(images/container_bg.gif) repeat-y center top; } 浮动实验 4 #box3 { float: left; } 浮动实验 4 #box3 { float: right; } 浮动实验 4 #box3 { float: right; } 浮动实验 4 实验 4 小结： 浮动元素只对其后面的元素产生影响。 浮动实验 5 #box2 { width: 200px; height: 200px; float: left; } 浮动实验 5 #box2 {