神马文学网工字型布局的两种形式及其制法
来源：百度文库 编辑：神马文学网 时间：2024/07/04 05:34:25
工字型布局的两种形式及其制法
工字型布局是Web中应用比较广泛的布局，它将整个页面分成页头，侧面导航栏，内容栏和页脚栏四部分，页头一般包括logo，网站标题等；侧面导航栏是导航菜单,根据客户的喜好可以放在左边也可以放在右边；内容是正文部分，左右也可以根据用户的喜好放置；页脚包括版权信息，联系我们等。具体形式见下图。
固定两栏方式和可变两栏方式
根据content栏的宽度是否会随着浏览器的宽度改变可以将工字型布局分为固定两栏方式和可变两栏方式，请见图。
可变两栏式布局制法
工字型布局中，header和footer很好实现，而sidebar和content相对麻烦一些，我的做法是将它们放在一行两列的表格中，左列宽度卡死，右边不设置宽度，并让表格充满其父div。代码如下，注意其中表格的样式设置，它确保了超过td宽度的内容折行显示，这样就不会让内容强行把表格撑开了：
内容栏 菜单栏 
#bodyDiv{
}{
width:780;
}