CSS使用浮动属性和边距设计3行3列定宽的布局实例
生活随笔
收集整理的這篇文章主要介紹了
CSS使用浮动属性和边距设计3行3列定宽的布局实例
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
CSS使用浮動屬性和邊距設(shè)計3行3列定寬的布局
下面使用CSS的浮動屬性和邊距屬性設(shè)計一個簡單地3行3列并且是固定寬度的布局頁面。
實例
設(shè)計步驟如下：
1. 制作3行3列定寬布局的XHTML部分。源代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS使用浮動屬性和邊距設(shè)計3行3列定寬的布局實例-www.baike369.com</title> </head> <body> <div id="main"><div id="header">這里是#header</div><div id="menu"><ul><li>菜單項目1</li><li>菜單項目2</li><li>菜單項目3</li><li>菜單項目4</li><li>菜單項目5</li></ul></div><div id="content"><p>主要的內(nèi)容。</p><p>主要的內(nèi)容。</p><p>主要的內(nèi)容。</p><p>主要的內(nèi)容。</p><p>主要的內(nèi)容。</p><p>主要的內(nèi)容。</p></div><div id="other"><ul><li>其他內(nèi)容</li><li>其他內(nèi)容</li><li>其他內(nèi)容</li></ul></div><div id="footer">這里是#footer</div> </div> </body> </html>2. 制作3行3列定寬布局的CSS部分。
由于中間3列的寬度固定，因此可以設(shè)定3列左浮動。CSS代碼如下：
<style type="text/css"> <!-- *{margin:0;padding:0; } body{font:small/1.5 "宋體",serif;background:#FFF; } li{list-style:none;padding-left:15px; } #main{width:770px;margin:auto;padding:3px;border:2px solid #999;background:#FFC; } #header{line-height:50px;background:#c6c;margin-bottom:5px;height:50px; } #menu{width:200px;float:left;margin-right:5px;background:#9f9; } #content{width:390px;float:left;margin-right:5px;margin-bottom:5px;background:#9cf; } #other{width:170px;float:left;background:#fc6; } #footer{line-height:50px;background:#c6c;clear:both;height:50px; } --> </style>不浮動的footer層出現(xiàn)在content層的右邊，因此需要對footer層設(shè)定clear屬性。
設(shè)定clear屬性后，footer層不僅位于所有浮動層之下，同時，父層main的高度也能包含所有子元素。但是，此時footer層和content層之間沒有邊距，因此需要為content層添加下邊距。
3. 代碼運(yùn)行后，頁面的顯示效果如下圖所示：
提示
本例只是一個理想狀態(tài)下的基礎(chǔ)步驟，在實際應(yīng)用中，還需要根據(jù)具體情況進(jìn)行調(diào)整。
總結(jié)
以上是生活随笔為你收集整理的CSS使用浮动属性和边距设计3行3列定宽的布局实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
