web前端页面规范.docx

web前端页面规范
目 录
web前端页面规范 1
3
3
3
type属性 3
3
4
4
布局原则 4
布局框架 er等）
（5）其他（animation，transition等）

CSS的有些属性是可以缩写的，譬如padding，margin，font等，这样精简代码又可以提高阅读体验：
“0”
“0”后面不跟单位


在规定字体属性时，需要设置：中文采用“宋体”或“微软雅黑”，英文采用“Arial”或者“verdana”,一般css初始化时font-family里需有“宋体”或者“微软雅黑”。对于页面属性中字体的大小需根据不同级别来设置，通常：
（1）“Head”中标题性文字设置20px；
（2）“Menu”中的导航文字设置14px；
（3）“Sidebar”中的文字设置12px；
（4）“Content”中正文设置12px或14px；
（5）“foot”中的文字设置12px；

（1）重要文字： #C00 适用范围：提示性文字，需要特别注意的内容；
（2）常规文字： #333 适用范围：普通信息、标题；
（3）次级文字： #666 适用范围：帮助信息、说明性文字；
（4）辅助文字： #999 适用范围：一些辅助性文字；
所有文字颜色可根据不同项目的具体需求进行更改，目的是同一作用范围的文字颜色一致。

（1）WEB页面和其中的表格都应该设置边距，避免页面元素紧贴边沿。
（2）一般表单元素如radio、checkbox以及select和所关联文字也应设置一定的间距，通常设置为3px，可根据具体情况在3px-5px之间进行调整。
（3）表单元素所关联文字根据表单元素的高度设置相应的行高。

页面的模块之间需要控制相同的间距，通常板块间距、板块与内容间距、内容单元之间的间距以及内容的间距设置为10px-20px。14号字体可调整为15px-20px。

行高的几种表示方式：px/em，normal，百分值，数值或inherit。
一般来说，设置行高为数值（line-height:-height:…）是最理想的方式，并且会随着对应的font-size而缩放。
（1）使用px定值，由于继承性，无法实现根据文字大小自动调整间距，会出现大号文字重叠的现象。
（2）一般浏览器的normal值在1~，使用normal文字间距过小，阅读吃力。
（3）百分值也有继承性。
（4）数值，虽然150%，但是它们也是有差别的，使用百分比会计算line-height的值，然后以px像素为单位继承下去，，遍历到了该标签再计算去line-height的像素值。

（1）首行缩进时，禁止使用“ ”或者键盘空格键，而是设置text-indent:2em（缩进2个文字）。
（2）一段完整的文字应该用<p>标签，尽量不要使用<br>来人工干预分段。

容器宽度根据实际情况设置固定数值、百分比或弹性自适应，高度根据内容自适应，无需设置固定值。


页面需要提供一些简单的键盘支持，例如：“Enter”、”Tab”。
Enter：确认，提交或进行下一步操作。
Tab：按照一定的次序切换input焦点。

新增一条或多条记录时：
（1）新增的记录排在首页首行。
（2）提交失败后，保存已经输入的内容，以便再次提交。

修改一条或多条记录时：
修改完成后，须回到原记录所在位置，并刷新记录。
修改内容提交失败后，保存修改的内容，以便再次提交。

删除一条或多条记录时：
须有确认删除的提示信息。
删除成功后，返回到原记录所在页，若原记录所在页不存在，则返回上一页。

按照条件查询时：
每次查询后定位到原页面。
每次查询后保留当前查询条件。
查询条件较多时，可配置“重置”按钮。
未查询到对应记录时，需给予相关提示。
除明确要求外，需提供模糊查询功能。

（1）图标统一使用Font Awesome或者阿里巴巴iconfont图标，同一级别需大小一致。
（2）重要图片须加上alt属性，重要的元素加上title。
（3）尽量使用16进制颜色代码缩写（col