在没有知道DIV这个东西之前，我是知道CSS的，在知道CSS之前俺都是用TABLE的，布局网页无非就是几行几列的一个表格，上下左右，配合前期PS里面做好的整体页面效果图，来布置具体的表格该怎么分割和组合。因为折腾了时间长了，人就懒了，TABLE＋CSS也倒是用的很欢，然后慢慢也知道了DIV这个东东，但是已经习惯了表格，所以就没有去深究DIV这个事情。趁着春节前没什么事，所以还是打算把DIV这个玩意好好的收拾一下。前面也说了，要折腾，就要找个东西开刀，所以就先拿博客试水了，博客程序用的比较早，虽然是ASP＋ACCESS的，也够用了，就一直也没换，顶多是一年半载空闲了换个风格，就这么一直用了下来。
博客页面的模板架构是TABLE＋CSS的，最原始的情况是每个栏目都可以单独弄一个模板，我也懒得折腾，就整个博客不管啥栏目都用了一个，基本布局就是上[页头：header，顶部登录信息+图片展示区]，中[左：博客导航内容，右：博客正文列表]，下[页尾footer]，大框架就是这样了，很简单明了。于是就动手在DW里开始DIV+CSS的折腾了，根据大框架布局的话，基本也就是5个DIV定乾坤。头部是通栏，登录区和中间左右结构还有尾部是指定宽度的，如下图：
大局已定，开工了。DW点火，5个DIV速度码好，结果，嗯，不是我想象中的那样哦，一头雾水，NND怎么都千篇一律的各占一行呢！第三和第四个必须左右排练啊，剩下三个你满行了也就算了，我也就不先惦记了，但是中间左右排列的部分，得想办法让他归位，先看看原始状态没有CSS哦。
于是乎放Google，爬吧，肯定有前人也有我这种疑问，找啊找，摇啊摇，试啊试，总算到了外婆桥！功夫不负有心人吗。可以上CSS了，当然是外部CSS链接了，main.css开始入场。header通栏的好办，先不管他默认就是通栏的。第一个问题来了，登录区login part部分是有宽度的，要居中显示哦，放Google得知css里该怎么写，margin-left:auto; margin-right:auto;这两刀就安了，意思是让左右两边自动适应浏览器的宽度。第二个问题接踵而至，要让横行的两个DIV改左右排排坐吃果果啊。继续放Google吧，得知还得在他俩外在整个大的DIV[id=center_content]，因为要居中，left nav和blog content list得套进去，且这两display:inline，就是前面说的让这两块在同一行排排坐，一个float:left，一个float:right，要不然这一左一右是搞不定的。好了，css布置完毕，点击下面的运行代码按钮就可以看到布局已经完成。
CSS样式表内容：
上面还有个问题，就是左右排排坐的两部分，因为内容的高度会不同，所以牵扯到一个背景自动加高适应的问题，就是id=center_content这个div的背景，不管里面左右两个内容块谁高了，id=center_content这个div的背景色都会自动向下延伸，他的css里要加上overflow:auto，我Google的结果是overflow:hidden，按字面意思理解超出了一个是自动，一个是隐藏，我也不知道具体啥差别，反正都可以，我就用auto吧，比较符合我想的那种自动适应向下延伸。
既然大框架的布局已经搞定，各个部分的细节问题就问题不大了，无非是在每个大块里添加若干个子块嵌套进去，再逐个定义好各个具体内容部分显示的class即可，之前也专门说了关于ID和Class的区别了，大框架唯一的部分我就用ID了，大框架里面的子块，子内容全都用class。还有就是html代码和css样式表文件中的注释行的问题，最好养成习惯，加上必要注释，你能看懂的，好记性不如烂笔头啊，有了注释内容，一年半载后你再来修改更新你的样式表或者修改html将会非常方便，事半功倍哦。即便是你不干了，接你班的后来者也会从心底里感谢你的，如果你换了一个地方，接手别人的东西之后要是看到同样的注释，你的心里也会豁然开朗的，我为人人，人人为我。
关于HTML代码里注释行还得注意一点，注释行的注释方法，必须按照W3C的标准注释行来，<!--注释内容-->这种，这就是标准！切记，如果你那短线多了或者少了，Firefox这种极其W3C的浏览器，会把你的页面解释得一塌糊涂不堪入目，不信你试试看，除了Firefox之外其他的浏览器到是没有问题，对这个注释行的兼容都很好。所以为了适应所有的浏览器，还是按照标准去注释吧。另外还得再唠叨一个事情，如果你的网页是gb2312编码的，那你的css文件也是gb2312编码，默认的话不需要改动。如果你的HTML页面是utf-8的编码，那你的css文件也一定要是utf-8编码，否则你设定的样式会莫名其妙的失效，比如font-family设置的字体失效，虽然在DW里显示无问题，但是用浏览器查看的时候字体设置无效。
在初步折腾DIV＋CSS布局的过程中，基本我就碰到这么多问题，也基本都能Google之解决。如果你有什么新鲜问题需要交流也可以留言，咱们一起耍。
[Edit on 2011-2-10 3:05:22 By 笑傲江湖]
