之所以想要写这篇文章,初衷是因为在制作企业网站时,经常会重复性的做一些劳动,企业网站一般就首页,列表页,详细页,而如果我们能编写一套可移植可拓展性强的html+css的模板,这样做企业网站的时候就可以较少的考虑html的结构,而把精力放在css的编写上,可以让前台html+css编写类似于搭积木一样，需要什么模块就放什么，有效地提高开发效率和开发过程中的规范统一。
下面是一个具有代表性的页面布局结构
<div id="area">
<div id="header">
页头
<div class="nav">
导航条
</div>
</div>
<div id="main">
<div id="sidebar">
侧栏
</div>
<div id="content">
内容
</div>
</div>
<div id="footer">
页尾
</div>
</div>
一、id和class的使用及区别
一个id在一个页面只可以使用一次，一个class可以一个页面上多次引用。
页面存在多个相同的ID影响就是不能通过W3的校验，但是当你需要用JavaScript通过id来控制这个div，那就会出现错误。
书写建议：如果是维一的结构定位的就用id，否则就用class
二、id和class的命名规则
id 和 class 的命名根据内容来合理的取名，如header, main...这些词汇简单并且能够使人顾名思义,这都是仁者见仁，智者见智，没有统一开发规范，但是合理的css命名可以增强样式规则的可读性，便于后来你或其他人对页面的修改。
书写建议：为CSS类名定义的时候，尽量使用小写字母，如果有两个以上的单词，在每个单词之间使用”-”符或单词首字母大写(第一个单词除外)。如:”main-left”或”mainLeft”。
命名的规则可以参考：http://www.sj27.com/blog/post/15.html
三、公用样式模板的设计模块
页面元素Logo设计,
整一个编写的思路是把logo当作背景图放在h1里,h1在网页中的权重是最高的,然后在span写上关键字,设置为隐藏,目的在于有利于seo优化,
html 代码如下 <a href=” ”><h1 class="logo"><span>关键字（放最重要的信息）</span></h1></a>
css中要注意的是span的隐藏编写,在css中设置隐藏主要有
1、display:none; 的缺陷
搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略掉。
屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略掉被隐藏的文字。
2、visibility:hidden; 的缺陷
这个大家应该比较熟悉了，就是隐藏的内容会占据他所应该占据的物理空间。
3、overflow:hidden; 一个比较合理的方法
.logo span {
overflow: hidden;
width: 0;
height: 0;
}
就像上面的一段 CSS 所展示的方法，将宽度和高度设定为0，然后超过部分隐藏，就会弥补上述一、二方法中的缺陷，也达到了隐藏内容的目的。
(未完待续)
