本文共 983 字，大约阅读时间需要 3 分钟。

个人或者团队需要将主要页面的布局用DIV图的模式按层次画出来，这个DIV图就是在设计原型的基础上，将页面中的主要模块使用的ID名、class名标注出来，方便建立维护文档以便将来进行修改与升级。

划分CSS结构，建立全局css及各模块css。在html页面中引用全局css，在全局css中引用各模块css。

建立global.css为全局css，在全局css中定义“* { … } body { … }”之类的全局样式。

在全局样式中通过“@import url(”xxx.css”);”引入模块css。关于模块CSS的划分，我们比较喜欢类似wordpress中的css划分方式，

 

一般情况下通过类似下列结构划分：

layout.css /* 整站布局 */

public.css /* 公用组合样式 */header.css /* 页面头部区域样式 */sidebar.css /* 侧边栏区域样式 */main.css /* 主体区域样式 */footer.css /* 底部区域样式 */index.css /* 首页区域特有样式 */form.css /* 表单类样式 */

解释一下:

layout.css负责整个网站的布局，比如#header, #footer等布局的基本位置及样式设计；

public.css负责一些公用样式定义，因为一个class中可以使用class=”navbar font12px”这种利用中间空格分隔的方法来应用多个class样式，所以可以定义一些比较常用的或者在特殊情况下需要修改的公用class，方便局部微调；

header.css、sidebar.css、footer.css等模块是对应头部、侧边栏、底部模块的css样式表，可以根据网站的具体需求来增减模块；index.css是一些首页特有元素的css，因为首页的特殊性，我们在设计css的时候通常对首页进行特殊处理，一般情况下，首页是css最复杂的一个页面，有必要对首页的独有css元素进行归类放置，也可以不用@import引入index.css，而把它单独放到首页引用；form.css是表单元素的样式表，表单虽然不难，但控制起来还是比较麻烦的，单独放到一个css文件里方便控制，当然，类似的其他元素你也可以这么处理。

最后,在各个样式表文件中写入样式。

转载地址：http://aukvi.baihongyu.com/