页面架构

1 CSS Reset

不同浏览器原定对标签的展示是不同，需要先预处理（清除默认样式和全局标签定义）。

预处理方案 – 主要根据具体产品要求，在初期就决定好。

彻底重置方案 - Reset.css

温和重置方案 - Normalize.css

谈一谈 Normalize.css normalize.css

2 布局解决方案

2.1 居中布局

2.1.1 水平居中

2.1.2 垂直居中

2.1.3 水平垂直居中

2.2 多列布局

2.2.1 定宽与自适应

2.2.2 不定宽与自适应

2.2.3 等分

2.2.4 等高

2.3 全屏布局

3 响应式

优点 – 一个网站适应多个客户端

缺点 – 不同客户端展示细节不同

响应式设计断点数值与代码段参考

4 页面优化

4.1 概括

1. 好处

   提升网页响应速度

   对搜索引擎、屏幕阅读器友好

   提高可读性，可维护性

2. 处理

   减少请求

   减少文件大小

   页面性能

   规范可读和可维护

4.2 处理方式

减少请求

1. 图片合并，CSS精灵
2. CSS文件合并，根据需要使用内联样式
3. 避免使用import

减少文件大小

1. 减少图片大小

   选择合适图片格式，压缩图片（ImageOptim、ImageAlpha、JPEGmini）

2. CSS值缩写

3. 省略值为0的单位

4. 颜色值最短表示

5. CSS选择器合并

6. 文件压缩（YUI Compressor、cssmin）

页面性能

1. 加载顺序，外联样式表放置在head标签内，脚本放置在body标签最末
2. 减少标签数量
3. 选择器长度
4. 耗性能属性（expression、filter、border-radius、box-shadow、gradients）
5. 图片设置宽高，加载完成图片前，先对格式大小做好加载，资源最后和预先格式尺寸一致，资源和格式尺寸不对，浏览器需要回流重绘
6. 表现可以用CSS实现，就用CSS实现
7. 可读和可维护，制定规范，语义化，尽量避免Hack，模块化，必要注释

5 规范与模块化

5.1 规范

5.2 模块化