DIV+CSS布局的几点建议

http://www.cnblogs.com/bindsang/archive/2008/07/28/1254385.html

DIV+CSS布局的几点建议

玩Web重构也有段时日了，算有了那么些心得。经常有网友问才子一些关于布局方面的问题，SvnHost群里还有朋友请才子多写点关于布局方面的教程，帮助一些新手，才子也答应了会多写些关于布局方面才子自己的一些经验及心得，分享给大家。

Web重构许多人认为就是简单的DIV+CSS布局而已，这显然是个错误的概念，具体解释才子不想多说了，这方面文章一堆。DIV+CSS布局的确是重构里非常重要的一环，才子今天就讲讲布局方面的几点建议。

1. 请设计一套适合自己风格的布局(含XHTML及CSS)。

　　其实每个网站设计者一般都有自己的风格，那么请单独设计一套自己喜欢的布局方式，包括XHTML及CSS。请一定要熟练的记住各个布局模块之间的从属关系。本文最后会附上一张示意图。

2. 请务必给每个参与布局的模块都加上一个唯一的ID标识符。如#header, #content, #footer等。

　　也许你暂时根本不需要在CSS中为每个模块定义单独的样式，但你敢说以后也不会需要吗？如果不确定，那就请加上ID。而且请搞清楚，ID标识不光是为了方便CSS里定义它的样式，它同时还是一个DOM的节点，为了以后的扩展，这个ID也是十分有必要的。

3. 请不要使用除了div之外的任何其它元素标签来参与布局。

　　这一点很多人可能会有疑问，难道连span,ul,li,p,h1,h2.....这些标签都不要用了吗？当然不是，请看清楚，才子指的是布局，而这些标签都只是为了渲染一些效果而需要使用到的一些内容的容器，与布局无关。

4. 内容里某些地方需要特殊渲染，能够使用元素标签样式来做渲染的，请不要再复杂化而使用其它的类选择符来渲染。

　　这点有点拗口，说不太清，请看这篇文章：巧妙的利用XHTML中不常用的标签元素，大概就这么个意思了。

5. 请善用注释，缩进，空行。

　　不管是什么代码，XHTML也好，CSS也好，JS也好，后台程序代码也好，全部适用。例如XHTML代码里，每个模块开始都加上一个注释，说明是什么模块，而各层的div的嵌套，都请注意好缩进，下一层的比上一层的多一个缩进，务必一眼就可以清楚的看出结构来。每个模块之间，请不要吝啬一两个空行，做到这几点，你会发现，不管是你自己看源码也好，人家看源码也好，都会很容易上手，如果是需要修改的话，会大大的提高效率。

6. 做一个项目时，请一定要写一个开发文档。

　　开发文档就是开发过程中的一些要点关键点，一定要记录下来，如目录结构(如有必要，各目录及文件的作用都最好记录下)，页面布局情况等等，方便自己随时查阅，如果将来要换人来做这项目的话，人家也容易接手。

暂时说这么多，也许还会有很多值得注意的地方，才子一旦想到会及时加上，谢谢！

针对第1点，附上一张才子前段时间帮人做的一个企业站的布局图：

这是个典型的三行两列的布局，上面是header，中间是content，中间又分成左右两部分(sidebar和main)，最下面是footer。大结构很清晰，不用多解释了。下面来大致看一下具体是如何布局的：
网站最外层是一个大容器#wrap，所有内容全往里面装，只要定义了它的宽度，全局都生效，建议都这样来定义一个外层容器。
最上面是header容器，里面有三个模块，分上下两层，上层又分左右两个模块，logo和banner，下层是nav模块，也就是菜单啦。
中间是content容器，分左右两个大模块，sidebar和main，sidebar又有上下两个模块，login和recommend模块，右边main也有上下两个模块，ad和product。
最下面是footer容器。
最后附上以上布局的一个简单源码，仅供参考！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312" dir="ltr"> <head> <title> 标准的三行两列布局 </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="gb2312" /> <meta name="author" content="Macky, 风流才子" /> <style type="text/css">  </style> </head> <body> <div id="wrap"> <div id="header"> <div id="logo">Logo</div> <div id="banner">Banner</div> <div id="nav">nav | nav | nav | nav | nav | nav | nav | nav | nav | nav | nav | nav | nav</div> </div> <div id="content"> <div id="sidebar"> <div id="login">Login</div> <div id="recommend">Recommend</div> </div> <div id="main"> <div id="ad">AD</div> <div id="product">Product</div> </div> </div> <div id="footer">footer</div> </div> </body> </html>

风流才子作品，转帖请保留原文地址链接，谢谢合作！
才子小窝：http://www.54caizi.org/

转载于:https://www.cnblogs.com/flyaway007/archive/2008/09/11/1288999.html