第一步：整体分析页面布局。
当拿到视觉稿的时候，不是着手去想怎么编写HTML、CSS代码，而是先从整体上分析页面的布局，观察页面各个模块的间距差别、划分header，body，footer、CSS Sprites、切图事宜、页面色调、背景如何设置等等，之后再细化到每个模块的布局，从外到内，逐步细化。可以说，这一步是非常关键的，它给了下面将要进行的代码编写一个整体的框架布局。
第二步：归纳统一、分类，切图（CSS Sprites）
整体分析过后，就是归类、组合模块的时候了。这一步还是的需要从整体来看，分析页面哪些模块的样式相似（常见的就是ul列表，以及一些图文编排），包括颜色、样式、修饰、背景、宽度、padding、margin、border等等。将相似的模块的样式归类，这为接下来编写CSS代码大有好处，可以最大化的精简CSS代码。
第三步：拆分模块、规划HTML结构、规划并编写CSS
在前期工作都做了之后，这步就改到了动手写代码的时候了，我喜欢将每个模块或者列拆分开来编写，这样做的好处是我可以先不管整体布局，从HTML语意化的角度架构HTML结构，此时HTML代码较少，在编写CSS以及查看HTML代码的时候不用花费太多时间了（痛恨HTML代码多了，上下拉滚动条，累人！）
第四步：组合成页面。
在每个模块都编写好之后，借助页面布局生成器（幸亏有了它，效率第一啊！缺点是HTML结构复杂，-_-），将每个拆分的模块整合起来，同时也清理CSS文件的代码，整合CSS代码也有一些些技巧的：在CSS Sprites里设置HTML元素的背景的时候，把全部的元素都写在一处：
项目总结
一个静态页面的构成 由 头部导航 header 身体body 底部footer组成
网友评论