国产欧美日韩综合精品二区,亚洲一区二区三区在线免费观看,久草在线新免费首页资源站

工字型布局的兩種形式及其制法

工字型布局是Web中應用比較廣泛的布局，它將整個頁面分成頁頭，側面導航欄，內容欄和頁腳欄四部分，頁頭一般包括logo，網站標題等；側面導航欄是導航菜單,根據客戶的喜好可以放在左邊也可以放在右邊；內容是正文部分，左右也可以根據用戶的喜好放置；頁腳包括版權信息，聯系我們等。具體形式見下圖。

固定兩欄方式和可變兩欄方式

根據content欄的寬度是否會隨著瀏覽器的寬度改變可以將工字型布局分為固定兩欄方式和可變兩欄方式，請見圖。

可變兩欄式布局制法

工字型布局中，header和footer很好實現，而sidebar和content相對麻煩一些，我的做法是將它們放在一行兩列的表格中，左列寬度卡死，右邊不設置寬度，并讓表格充滿其父div。代碼如下，注意其中表格的樣式設置，它確保了超過td寬度的內容折行顯示，這樣就不會讓內容強行把表格撐開了：

<body>

<jsp:include page="/web/page/branch/header.jsp"/>

</div>

<jsp:include page="/web/page/branch/menubar.jsp"/>

</div>

<tr>

內容欄

</div>

</td>

菜單欄

</div>

</td>

</tr>

</table>

</div>

<jsp:include page="/web/page/branch/footer.jsp"/>

</div>

</body>

固定兩欄方式的制法

固定兩欄方式需要在div的寬度和浮動上動一下手腳，具體來說就是content的寬度加上siderbar的寬度要等于它們所在的父元素的寬度，另外content向左浮動，siderbar向右浮動。這樣content和siderbar兩個div就不會獨占一行了，代碼如下。
HTML代碼：

<body>

<jsp:include page="/web/page/branch/header.jsp"/>

</div>

<jsp:include page="/web/page/branch/menubar.jsp"/>

</div>

左側菜單欄

</div>

右側導航欄

</div>

<jsp:include page="/web/page/branch/footer.jsp"/>

</div>

</body>

CSS代碼，注意contentDiv中也有防止Div被過寬內容撐開的代碼：

#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;

}

posted on 2008-09-27 14:41 sitinspring 閱讀(1755) 評論(0) 編輯收藏

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理

春風博客

導航

統計

公告

常用鏈接

留言簿(11)

隨筆分類(224)

隨筆檔案(126)

個人軟件下載

我的其它博客

我的鄰居們

最新隨筆

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜

工字型布局的兩種形式及其制法