9787302466840.md

《HTML5布局之路》读书笔记

[TOC]

第1章

第20章：附录

开发备忘录

良好的项目开发，从缜密的分析与计划开始，充分的项目开发能够让之后的问题降低到最少，提升整体开发效率。

一、书写基本得需求分析报告

基于需求分析报告的“任务”

• reset文件的基本调整；
• 标签的基本选用；
• 典型的布局选用和基本得布局操作；
• 切图工作。

需求分析时需要注意的部分

• 美工图大小和具体内容区域大小的区别，内容区域外的样式如何处理。
• 会不会有fixed定位。
• 有没有返回顶部的功能需求。
• 哪些地方需要注意超出隐藏。
• 哪些地方需要内容撑开高度。
• 哪些地方需要有链接跳转。
• hover效果(有些美工图会提供三态：初始、移入和按下)是什么样子。
• 哪些地方需要加光标的小手状态。
• 哪些有JS特效，特邀考虑效果。
• 基本字体字号、颜色和背景颜色的选用。
• 分清背景图和数据图。
• 公共模块。
• 哪些地方是需要提交数据的，考虑使用form。

二、基本得前期准备工作

• 文件夹结构搭建。
• 准备reset重置文件以及基本得几个JS文件，根据情况引入。
• 合理修改reset文件(基于网站分析结果)：
  • 基本得背景图颜色和文字颜色。
  • 标签的两种状态。
  • 基本得字体大小和样式设置。
  • 删除掉没有使用到的样式设置。
  • 保证after伪元素清除浮动的方式在reset当中。

三、移动端与PC端的特殊性

移动端

• 全新的选择器以及大部分的CSS3属性都得到了很好的支持；
• 视口(viewport)的设置；
• 基本rem的处理；
• user-select；tap-highlight-color；-webkit-transform-style等样式的处理；
• 需要额外注意“指触区”；
• 模拟测试以外，需要进行真机调试；
• 320屏幕像素下，字体大小最小为12px；
• a标签的title和img标签的title可以删除，嵌套原则可以适当调整；
• 最大最小宽的考虑；
• 针对背景图进行background-size的处理。

PC端

• 使用最新标签后，对新标签的兼容处理；
• 需要测试各个浏览器(保证在IE6、IE7的地段浏览器中，布局与功能正常)；
• 对于子代选择器、CSS3新增选择器等能否使用取决于开发的兼容要求；
• IE下的测试，需要启动服务器，即在WAMP下运行。

四、整体开发的基本顺序提醒

• 注意模块的最小最大宽度/高度；
• 先完成一级布局与二级布局；
• 对于公共部分，统一开发；
• 在完成模块布局之后，再制作具体的模块；
• 边开发边测试。

五、具体开发中的注意事项

开发细节

• 文件名禁止使用中文命名；
• 编写代码的时候，需要合理的缩进(不要出现空格与Tab混用)与注释；
• 遵循基本得嵌套规则；
• 不要忘记a标签的href和title、img标签的alt、title、src，a标签的target(从何处打开链接)；
• CSS后代选择器，尽量不要超过3层，且不能超过4层；
• 类名采用单词(语义)命名，多个单词采用中划线连接；
• 不设置不必要的属性和属性值，如针对占满父级整行的块元素设置width:100%;，就是不必要的属性；
• CSS样式按照顺序书写：显示属性->自身属性->文本->其它->CSS3属性；
• HTML与CSS中引号需要保持一致，禁止出现单引号和双引号混用；
• 类名和id名通常不重复；
• 每段语句结束后的分号(英文)必不可少。

防止布局错乱

• 注意保持盒模型大小的一致性(如：增加左右padding，原有width需要变小)；
• 及时清除浮动，并采用合理的清除方式；
• 针对定位元素，处理z-index值；
• 数据图需要限制宽高；
• 背景图需要进行合并；
• 对于需要超出隐藏的需求，单行文本隐藏或显示为省略号，比如在模块标题需要进行设置，多行文本如果显示区域高度固定，需要设置超出隐藏；
• img标签需要浮动或者设置display:block，以防止img元素下的3像素空隙；
• 合理使用群组和后代选择器。

代码完成后不可缺少的相关工作

• CSS压缩；
• JS压缩；
• 图片压缩；
• ico文件的制作；
• 404页面。