亚洲国产综合精品中文字幕,久久久久亚洲精品日久生情,无码不卡亚洲成?人片

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

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

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

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

可變兩欄式布局制法

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

<body>

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

</div>

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

</div>

<tr>

內(nèi)容欄

</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>

左側(cè)菜單欄

</div>

右側(cè)導航欄

</div>

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

</div>

</body>

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

#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 閱讀(1742) 評論(0) 編輯收藏

新用戶注冊刷新評論列表


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




網(wǎng)站導航: 博客園 IT新聞 Chat2DB C++博客博問管理

春風博客

導航

統(tǒng)計

公告

常用鏈接

留言簿(11)

隨筆分類(224)

隨筆檔案(126)

個人軟件下載

我的其它博客

我的鄰居們

最新隨筆

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜

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