工字型布局的两种形式及其制法工字型布局是Web中应用比较广泛的布局，它将整个页面分成页头，侧面导航栏，内容栏和页脚栏四部分，页头一般包括logo，网站标题等；侧面导航栏是导航菜单,根据客户的喜好可以放在左边也可以放在右边；内容是正文部分，左右也可以根据用户的喜好放置；页脚包括版权信息，联系我们等。具体形式见下图。 固定两栏方式和可变两栏方式 根据content栏的宽度是否会随着浏览器的宽度改变可以将工字型布局分为固定两栏方式和可变两栏方式，请见图。
工字型布局中，header和footer很好实现，而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; } |
|
|
