工字型布局的兩種形式及其制法工字型布局是Web中應用比較廣泛的布局，它將整個頁面分成頁頭，側面導航欄，內容欄和頁腳欄四部分，頁頭一般包括logo，網(wǎng)站標題等；側面導航欄是導航菜單,根據(jù)客戶的喜好可以放在左邊也可以放在右邊；內容是正文部分，左右也可以根據(jù)用戶的喜好放置；頁腳包括版權信息，聯(lián)系我們等。具體形式見下圖。 固定兩欄方式和可變兩欄方式 根據(jù)content欄的寬度是否會隨著瀏覽器的寬度改變可以將工字型布局分為固定兩欄方式和可變兩欄方式，請見圖。
工字型布局中，header和footer很好實現(xiàn)，而sidebar和content相對麻煩一些，我的做法是將它們放在一行兩列的表格中，左列寬度卡死，右邊不設置寬度，并讓表格充滿其父div。代碼如下，注意其中表格的樣式設置，它確保了超過td寬度的內容折行顯示，這樣就不會讓內容強行把表格撐開了：  <body> <div id="bodyDiv"> <div id="header"> <jsp:include page="/web/page/branch/header.jsp"/> </div> <div id="menubar"> <jsp:include page="/web/page/branch/menubar.jsp"/> </div> <div id="contentDiv"> <table border="0" width="100%" height="100%" style=";word-wrap:break-word;word-break;break-all;"> <tr> <td width="200" valign="top"> <div id="content"> 內容欄 </div> </td> <td valign="top"> <div id="sideBar"> 菜單欄 </div> </td> </tr> </table> </div> <div id="footer"> <jsp:include page="/web/page/branch/footer.jsp"/> </div> </div> </body>固定兩欄方式的制法 固定兩欄方式需要在div的寬度和浮動上動一下手腳，具體來說就是content的寬度加上siderbar的寬度要等于它們所在的父元素的寬度，另外content向左浮動，siderbar向右浮動。這樣content和siderbar兩個div就不會獨占一行了，代碼如下。 <body> <div id="bodyDiv"> <div id="header"> <jsp:include page="/web/page/branch/header.jsp"/> </div> <div id="menubar"> <jsp:include page="/web/page/branch/menubar.jsp"/> </div> <div id="contentDiv"> <div id="content"> 左側菜單欄 </div> <div id="sidebar"> 右側導航欄 </div> </div> <div id="footer"> <jsp:include page="/web/page/branch/footer.jsp"/> </div> </div> </body>
#bodyDiv{}{ width:780;}#contentDiv{}{ width:100%; height:500px;}#content{}{ table-layout: fixed; word-wrap: break-word; overflow: hidden; width:580px; height:100%; float:left;}#sidebar{}{ width:200px; height:100%; float:left; background:#292929; } |
|
|
