web前端页面规范.docx

资源描述

web前端页面规范.docx

《web前端页面规范.docx》由会员分享，可在线阅读，更多相关《web前端页面规范.docx（9页珍藏版）》请在冰豆网上搜索。

web前端页面规范.docx

web前端页面规范

1.概述

本文针对目前所开发产品中出现的问题，制定的部分关于前端页面的书写规范，统一标准，便于后台人员添加功能及前端后期优化维护，提高团队协作效率，本文档如有不对或者不合适的地方请及时提出,经讨论决定后可以更改此文档。

2.html文件

2.1结构样式分离

（1）尽量避免在html文件的head部分使用的形式来定义样式。

（2）尽量避免在html标签中直接使用style=””的形式来定义样式。

（3）统一通过外部调用css样式表文件来实现行为结构的分离：

2.2type属性

在引用样式和脚本时，无需指定type属性

2.3注释

为方便页面维护，以及不同人员阅读页面代码，页面中不同的模块起始位置和功能模板需分别添加注释。

如下图：

2.4缩进

为方便检查需保证标签的正确闭合，且代码需根据不同的层级进行缩进对齐。

2.5布局

2.5.1布局原则

响应式布局，根据浏览设备的不同分辨率实现自动调整页面布局。

其中PC端能自适应1024*768分辨率。

2.5.1布局框架

目前均采用bootstrap响应式框架

3.CSS文件

3.1命名

为了让样式文件管理更加方便，通过名称就能知道样式文件的作用范围，css样式和css文件均采用语义化命名方式：

（1）常用CSS选择器命名：

选择器命名

说明

wrapper

页面外围控制整体布局宽度

container、content

容器,用于最外层

main

页面主体

head、header

页头部分

logo

LOGO标志

foot、footer

页脚部分

版权信息

nav

导航

subnav

子导航

菜单

submenu

子菜单

sidebar

侧栏

title

标题

searchInput

搜索输入框

搜索

banner

广告条

dorpmenu

下拉菜单

list

列表

tool、toolbar

工具条

news

新闻

news-trends

新闻动态

hot

热点

（2）常用CSS文件命名：

文件命名

说明

master.css，style.css，main.css

主要的

module.css

模块

base.css

基本共用

forms.css

表单

font.css

文字

columns.css

专栏

themes.css

主题

print.css

打印

mend.css

补丁

*注：

若自定义css样式和文件与所用框架或插件中命名冲突，可采用前缀或后缀的形式来命名。

（3）长名称或词组可以使用“中横线”来为选择器命名。

（4）不建议使用“_”下划线来命名CSS选择器（可区分JS变量命名，解决低版本浏览器兼容问题）。

3.2CSS初始化

为减少CSS代码量以及统一不同浏览器某些标签的默认值，使用初始化来控制一些常用的页面元素：

其中font-family中文可根据具体项目需要进行设置“微软雅黑”或“宋体”。

3.3CSS书写顺序

（1）位置信息（position，top，right，z-index，display，float等）

（2）大小（width，height，padding，margin）

（3）文字系列（font，line-height，letter-spacing，color，text-align等）

（4）背景（background，border等）

（5）其他（animation，transition等）

3.4CSS缩写属性

CSS的有些属性是可以缩写的，譬如padding，margin，font等，这样精简代码又可以提高阅读体验：

3.5去掉小数点前面的“0”

3.6“0”后面不跟单位

3.7其他常用属性设置

3.7.1页面字体

在规定字体属性时，需要设置：

中文采用“宋体”或“微软雅黑”，英文采用“Arial”或者“verdana”,一般css初始化时font-family里需有“宋体”或者“微软雅黑”。

对于页面属性中字体的大小需根据不同级别来设置，通常：

（1）“Head”中标题性文字设置20px；

（2）“Menu”中的导航文字设置14px；

（3）“Sidebar”中的文字设置12px；

（4）“Content”中正文设置12px或14px；

（5）“foot”中的文字设置12px；

3.7.2文字颜色

（1）重要文字：

#C00适用范围：

提示性文字，需要特别注意的内容；

（2）常规文字：

#333适用范围：

普通信息、标题；

（3）次级文字：

#666适用范围：

帮助信息、说明性文字；

（4）辅助文字：

#999适用范围：

一些辅助性文字；

所有文字颜色可根据不同项目的具体需求进行更改，目的是同一作用范围的文字颜色一致。

3.7.3边距

（1）WEB页面和其中的表格都应该设置边距，避免页面元素紧贴边沿。

（2）一般表单元素如radio、checkbox以及select和所关联文字也应设置一定的间距，通常设置为3px，可根据具体情况在3px-5px之间进行调整。

（3）表单元素所关联文字根据表单元素的高度设置相应的行高。

3.7.4留白

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

14号字体可调整为15px-20px。

3.7.5行间距

行高的几种表示方式：

px/em，normal，百分值，数值或inherit。

一般来说，设置行高为数值（line-height:

1.2或line-height:

1.5…）是最理想的方式，并且会随着对应的font-size而缩放。

（1）使用px定值，由于继承性，无法实现根据文字大小自动调整间距，会出现大号文字重叠的现象。

（2）一般浏览器的normal值在1~1.2之间，使用normal文字间距过小，阅读吃力。

（3）百分值也有继承性。

（4）数值，虽然150%和1.5在值上是一样的，但是它们也是有差别的，使用百分比会计算line-height的值，然后以px像素为单位继承下去，而1.5则是先继承1.5这个值，遍历到了该标签再计算去line-height的像素值。

3.7.6段落设置

（1）首行缩进时，禁止使用“ ”或者键盘空格键，而是设置text-indent:

2em（缩进2个文字）。

（2）一段完整的文字应该用

标签，尽量不要使用
来人工干预分段。

3.7.7容器宽高

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

4.页面功能

4.1键盘响应支持

页面需要提供一些简单的键盘支持，例如：

“Enter”、”Tab”。

Enter：

确认，提交或进行下一步操作。

Tab：

按照一定的次序切换input焦点。

4.2新增

新增一条或多条记录时：

（1）新增的记录排在首页首行。

（2）提交失败后，保存已经输入的内容，以便再次提交。

4.3修改

修改一条或多条记录时：

（1）修改完成后，须回到原记录所在位置，并刷新记录。

（2）修改内容提交失败后，保存修改的内容，以便再次提交。

4.4删除

删除一条或多条记录时：

（1）须有确认删除的提示信息。

（2）删除成功后，返回到原记录所在页，若原记录所在页不存在，则返回上一页。

4.5查询

按照条件查询时：

（1）每次查询后定位到原页面。

（2）每次查询后保留当前查询条件。

（3）查询条件较多时，可配置“重置”按钮。

（4）未查询到对应记录时，需给予相关提示。

（5）除明确要求外，需提供模糊查询功能。

5.其他

（1）图标统一使用FontAwesome或者阿里巴巴iconfont图标，同一级别需大小一致。

（2）重要图片须加上alt属性，重要的元素加上title。

（3）尽量使用16进制颜色代码缩写（color:

#f00）

（4）切图时图片需保存为web所用格式

（5）IE8浏览器根据需要可增加以下meta属性以解决部分兼容问题：

展开阅读全文