春天里,百花香...
工字型布局是Web中应用比较广泛的布局,它将整个页面分成页头,侧面导航栏,内容栏和页脚栏四部分,页头一般包括logo,网站标题等;侧面导航栏是导航菜单,根据客户的喜好可以放在左边也可以放在右边;内容是正文部分,左右也可以根据用户的喜好放置;页脚包括版权信息,联系我们等。具体形式见下图。
固定两栏方式和可变两栏方式
根据content栏的宽度是否会随着浏览器的宽度改变可以将工字型布局分为固定两栏方式和可变两栏方式,请见图。
可变两栏式布局制法
工字型布局中,header和footer很好实现,而sidebar和content相对麻烦一些,我的做法是将它们放在一行两列的表格中,左列宽度卡死,右边不设置宽度,并让表格充满其父div。代码如下,注意其中表格的样式设置,它确保了超过td宽度的内容折行显示,这样就不会让内容强行把表格撑开了:
固定两栏方式的制法
固定两栏方式需要在div的宽度和浮动上动一下手脚,具体来说就是content的宽度加上siderbar的宽度要等于它们所在的父元素的宽度,另外content向左浮动,siderbar向右浮动。这样content和siderbar两个div就不会独占一行了,代码如下。 HTML代码:
CSS代码,注意contentDiv中也有防止Div被过宽内容撑开的代码:
posted on 2008-09-27 14:41 sitinspring 阅读(1717) 评论(0) 编辑 收藏
Powered by: BlogJava Copyright © sitinspring