千一教程-CSS(6)

作者:千一网络 来源:千一网络 日期:2006-5-20

通过前面的学习我们已经在 CSS 方面打下了坚实的基础,本节给出两个用 DIV+CSS 布局的示例,供大家参考。

两栏布局:


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

我们来作个解释。

body {text-align:center;} 让内容居中,在分辨率较高的显示器中,我们就可以看到整个网页和网页的内容是居中的。但 Netscape 不会将整个网页居中,只是将网页的内容居中,所以我们又加上 .pageBody {margin:0px auto 0px auto;} 使在所有浏览器中均居中。

如果只考虑 IE,那么 mainBg 那一层是多余的,但为了兼容 Netscape,就加上了 mainBg 这一层,并且为其指定样式为 float:left;,这样就可以为整个一行指定背景了。

两栏中,左边一个为左浮动,右边一个为右浮动。虽然两个都可以用左浮动,不过我们习惯把最右边一栏设为右浮动,这样就可以保证最右一栏的最右边靠近 pageBody 的最右边,网页看起来就很整齐。注意在两栏的 margin、padding、width、border 之和不能大于 pageBody 的宽度,否则右边的列会掉到下一行。这里面由于各个浏览器对 margin、padding、width、border 的解释不同,一下子就要写出兼容所有浏览器的代码,确实有些难度,建议先编写在 IE 里兼容的代码,再考虑其它浏览器,您可以随时给我们留言进行咨询,或者参考 千一网络 的其它文章。

三栏布局:


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

通过对两栏、三栏布局的理解,我们可以轻易地做出四栏、五栏……

相关阅读

相关文章