1、1web 前端页面规范目 录web 前端页面规范 .11.概述 .32.html 文件 .32.1 结构样式分离 .32.2 type 属性 .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.
2、6 段落设置 .113.7.7 容器宽高 .114.页面功能 .114.1 键盘响应支持 .114.2 新增 .114.3 修改 .114.4 删除 .124.5 查询 .125.其他 .121.概述本文针对目前所开发产品中出现的问题，制定的部分关于前端页面的书写规范，统一标准，便于后台人员添加功能及前端后期优化维护，提高团队协作效率，本文档如有不对或者不合适的地方请及时提出, 经讨论决定后可以更改此文档。2.html 文件2.1 结构样式分离（1）尽量避免在 html 文件的 head 部分使用的形式来定义样式。（2）尽量避免在 html 标签中直接使用 style=”的形式来定义样式。（3
3、）统一通过外部调用 css 样式表文件来实现行为结构的分离：2.2 type 属性在引用样式和脚本时，无需指定 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 页头部分logo LOGO 标志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 选择器（可区分
6、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，b
7、order 等）（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；（
8、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 页面和其中的表格都应该设置边距
9、，避免页面元素紧贴边沿。（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 值在 11.2 之间，使用 normal 文字间距过小，阅读吃力。（3）百分值也有继承性。
