工字型布局的两种形式及其制法

工字型布局是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 阅读(1721) 评论(0) 编辑收藏

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻 Chat2DB C++博客博问管理

春风博客

导航

统计

公告

常用链接

留言簿(11)

随笔分类(224)

随笔档案(126)

个人软件下载

我的其它博客

我的邻居们

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜

工字型布局的两种形式及其制法