web前端页面规范

《web前端页面规范》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、web前端页面规范目录web前端页面规范11.概述32.html文件32.1结构样式分离32.2type属性32.3注释32.4缩进42.5布局42.5.1布局原则42.5.1布局框架43.CSS文件43.1命名43.2CSS初始化73.3CSS书写顺序73.4CSS缩写属性73.5去掉小数点前面的“0”83.6“0”后面不跟单位83.7其他常用属性设置83.7.1页面字体83.7.2文字颜色83.7.3边距93.7.4留白93.7.5行间距103.7.6段落设置113.7.7容器宽高114.页面功能114.1键盘响应支持114.2新增114.3修改114.4删除124.

2、5查询125.其他121.概述本文针对目前所开发产品中出现的问题，制定的部分关于前端页面的书写规范，统一标准，便于后台人员添加功能及前端后期优化维护，提高团队协作效率，本文档如有不对或者不合适的地方请及时提出,经讨论决定后可以更改此文档。2.html文件2.1结构样式分离（1）尽量避免在html文件的head部分使用的形式来定义样式。（2）尽量避免在html标签中直接使用style=””的形式来定义样式。（3）统一通过外部调用css样式表文件来实现行为结构的分离：

3、ylesheet”/>2.2type属性在引用样式和脚本时，无需指定type属性2.3注释为方便页面维护，以及不同人员阅读页面代码，页面中不同的模块起始位置和功能模板需分别添加注释。如下图：2.4缩进为方便检查需保证标签的正确闭合，且代码需根据不同的层级进行缩进对齐。2.5布局2.5.1布局原则响应式布局，根据浏览设备的不同分辨率实现自动调整页面布局。其中PC端能自适应1024*768分辨率。2.5.1布局框架目前均采用bootstrap响应式框架3.CSS文件3.1命名为了让样式文件管理

4、更加方便，通过名称就能知道样式文件的作用范围，css样式和css文件均采用语义化命名方式：（1）常用CSS选择器命名：选择器命名说明wrapper页面外围控制整体布局宽度container、content容器,用于最外层main页面主体head、header页头部分logoLOGO标志foot、footer页脚部分copyright版权信息nav导航subnav子导航menu菜单submenu子菜单sidebar侧栏title标题searchInput搜索输入框search搜索banner广告条dorpmenu下拉菜单list列表tool、toolbar工具条news新闻

5、news-trends新闻动态hot热点login登录register注册（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变量命名，解决低版本浏

6、览器兼容问题）。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）其他（anim

7、ation，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；（