CSS+DIV布局之道

以前用CSS+DIV做过两个小项目，感觉并不是很通畅，觉得有必要在这方面补补课，最近又用CSS+DIV山寨了几个界面，算是练手吧，现在思路清晰多了，和大家分享。

 

一、为什么采用CSS+DIV布局？简单谈几点？

首先，CSS+DIV布局对搜索引擎友好，为什么友好？是因为CSS+Div布局的代码简单，提高spider爬行效率，能在较短的时间内爬完整个页面，这样对收录质量有好处。真正的网站优化不只是为了追求收录，还需要良好的用户体验，代码简单自然会有良好的响应速度，对提高用户体验很有帮助。

 

例如：结合CSS和XHTML来制作导航菜单会比使用Javascript或图片来实现同样效果更加节省代码(CSS可以结合一些图片来制作导航而且代码量很小，而完全使用图片的导航代码量也要多很多)，

另外如果尽可能完善到能通过W3C验证，与普通表格组成页面的网站相比，使用XTML架构的网站排名状况要好。

 

其次，内容与样式分离，修改设计效率高。到CSS里找到相应的ID或class或标记修改属性值即可，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。而且可以实现一键切换整个页面风格。

 

还有视觉方面，以往表格嵌套的制作方法，使得页面与页面或者区域与区域之间的显示效果会有所偏差；而使用DIV+CSS的制件方法，将所有的页面或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。使用CSS来设计导航菜单并不会限制你的设计。事实上，CSS会提供更加灵活的导航设计方案，当用CSS来设置背景图时也能实现各种视觉效果。

 

二、采用CSS+DIV布局，从何做起。

 

当你从美工那里（如果没有美工，我们后面谈）拿到一个页面的草图，准备用CSS+DIV实现这个页面，那么一般要经过这么三个步骤：

分析构架，模块拆分，整体调整。

 

第一步、分析构架

 

例如，分析下面这个页面

我们应该把他的内容忽略掉，直接提取出这个页面的骨架，也就是这个页面的排版构架。见下图。

其他常用的布局，大概也就是下面这几个，你就从网上看吧，大概都差不多，无非就这么几块倒来倒去。

第二步，模块拆分

 

这里主要是分析框架中都有哪几部分，也就是考虑这个页面由哪些元素构成。方便我们实施DIV分块。

 

从上图，我们也很容易看出，这个页面主要有四个部分：导航和顶端banner，左侧列表，内容区，脚注（草图中省去了，太长了）

 

Div分块结束后，然后再针对内容加入CSS样式。

 

第三步，整体调整

这里无非就是对于整个页面边边角角的把握。一些收尾工作吧。

 

 

三、一些小建议，也是用CSS+DIV做页面的一点心得。

 

1、 如果没有美工给你提供界面的草图。个人又没有没学基础，或者缺少灵感，建议，从网上找一个差不多的界面，实行高仿（或者找一个免费的模板），当然不要总是 对一个界面下手（小心侵权）。这样效率高，页面效果也不会太差，太差得你也看不上是吧。或者，你不想从头设计页面的某个部分，例如导航菜单，那么有大量的 免费资源可以拿来使用。

 

拿来主义虽好，但我可不提倡，因为这样会和其它网站使用同样的风格。不过有一些菜单可以自定义样式来符合你自己的网站风格。

 

2、 如果要做全浏览器兼容网站，那么一定要边开发，边检查浏览器兼容，为什么？如果你在一个浏览器上开发完一个界面，甚至所有界面，那么忽然换一个浏览器测 试，出了问题，如果小问题还好，如果是位置等一些问题，你会发现，它会打乱你整个页面的布局，等于你又要从头开始检查，一点点改过来，我试过，麻烦得要 死。

 

没办法，这是CSS现在最主要的缺点：并非所有的CSS元素与所有的浏览器兼容。正因为如此，我们必须写一些自定义CSS来解决问题。这也是它与table布局的主要区别之一。

 

3、火狐和谷歌提供的开发人员工具，例如firebug等，一定要会使，无论是研究别人的页面，还是维护自己的页面，都会为你的开发带来事半功倍的效果。

 

4、做好积累工作，在开发过程中用到的小技巧，特效或者处理一些浏览器兼容的方法，一定要记录下来，积极分享，于人于己都有好处。

 

5、要使你的页面尽可能的轻，能用小图，不用大图，能用小图repeat-x，绝对不要用一整张大图。至于精简代码的好处，前面已经提到。

转自：http://blog.csdn.net/shan9liang/article/details/7736759