《HTML5布局之路》读书笔记

9787302466840

[TOC]

第1章

第20章:附录

开发备忘录

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

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

基于需求分析报告的“任务”
  • reset文件的基本调整;
  • 标签的基本选用;
  • 典型的布局选用和基本得布局操作;
  • 切图工作。
需求分析时需要注意的部分
  • 美工图大小和具体内容区域大小的区别,内容区域外的样式如何处理。
  • 会不会有fixed定位。
  • 有没有返回顶部的功能需求。
  • 哪些地方需要注意超出隐藏。
  • 哪些地方需要内容撑开高度。
  • 哪些地方需要有链接跳转。
  • hover效果(有些美工图会提供三态:初始、移入和按下)是什么样子。
  • 哪些地方需要加光标的小手状态。
  • 哪些有JS特效,特邀考虑效果。
  • 基本字体字号、颜色和背景颜色的选用。
  • 分清背景图和数据图。
  • 公共模块。
  • 哪些地方是需要提交数据的,考虑使用form。

二、基本得前期准备工作

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

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

移动端
  • 全新的选择器以及大部分的CSS3属性都得到了很好的支持;
  • 视口(viewport)的设置;
  • 基本rem的处理;
  • user-selecttap-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页面。
Last Updated: 6/29/2018, 3:06:00 PM