Web前端开发切图标准规范

一、文件规范

1.1 文件命名规则

html名称要和psd名称一致;js与css名称不能出现汉字、空格;(如客户要求每个页面单独写css,要以psd名称的拼音缩写来为css命名;尽量避免拼音和英文混用);图片名称尽量在ps web保存(Ctrl+Alt+Shift+S)时存为数字(1_01.jpg 1_02.jpg)

html的后缀统一为html,不能出现htm

1.2 文件存放位置

项目文件夹命名为客户的项目名称加上“切图”;如:新浪网切图

项目文件夹内并列放置:html文件(注意:没有“夹”,直接放在根文件夹中)、css文件夹、js文件夹、images文件夹

1.3 编码格式

统一 utf-8 标准

1.4 项目文件夹修改版本控制

要加上日期,如:0117-新浪网切图;

如果同一天改了几个版本,就要加上时间;如:0117-1650-新浪网切图

二、HTML

2.1 a链接加上title,img加上alt

2.2 尽量不用table布局

2.3 禁用内置css(就是把css写在html里边)

html中不能出现style、align、width等属性

2.4 不同页面class命名尽量不要重复

门户站页面多、复用多,容易出现重复的情况,所以门户站,每个页面的块尽量以该html名称为前缀,根据顺序依次命名为a,b,c,d...如:index-a,index-b,index-c

2.5 一些小块,不适合写太多class的时候,可用一些html标签补位、区分(要记得根据情况进行css重置)

html标签 表现 css重置 备注
span 它和div并称为最通用的布局标签
b 加粗 font-weight:normal;
strong 加粗 font-weight:normal;
i 斜体 font-style:normal; 常用做图标
em 斜体 font-style:normal;
del 删除线 text-decoration:none;
ins 下划线 text-decoration:none;
big 大号文本 font-size:12px;font-weight:normal;
small 小号文本 font-size:12px;font-weight:normal;
br 换行 空标签
hr 水平分隔线 空标签

2.6 标题 h1-h6

一个页面只能有一个h1,一般在文章页面使用

h2,h3,h4,h5,h6可出现,但不能用于布局(就是说要全部加上class,css中不能出现h1-h6,因为如果要做SEO,seoer可能会根据情况修改h1-h6)

2.7 img or background

图片何时用img,何时用background,要根据具体情况和客户要求决定【此处主要考虑客户很可能安装百度分享,而百度分享是可以分享img的】

默认情况下,经常需要更换的(如产品图片、banner)、可以分享的(如带有域名的logo、宣传标语、二维码),就用img

而那些网站识别UI涉及的图标必须用background

三、CSS

3.1 使用统一的reset重置(如项目有特别要求可微调)

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,address,big,cite,code,del,dfn,em,ins,kbd,q,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
body,button,input,select,textarea{color:#2b2b2b;font:12px/1.5 "Hiragino Sans GB",Tahoma,Arial,Microsoft YaHei,"微软雅黑","Helvetica Neue",sans-serif;*font-family:"Hiragino Sans GB",Microsoft YaHei,"微软雅黑",Tahoma,Arial,"Helvetica Neue",sans-serif;}
ol,ul,li{list-style:none;vertical-align:middle;}
img{border:none;vertical-align:middle;}
input,select,textarea{vertical-align:middle;outline:none;}
table{border-collapse:collapse;border-spacing:0;empty-cells:show;}
a{color:#000;text-decoration:none;}
a:hover{color:#333;text-decoration:underline;}
i{display:inline-block;vertical-align:middle;margin:0 5px;font-style:normal;}
.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
.fl{float:left;}
.fr{float:right;}
.w-1000{width:1000px;margin:0 auto;}
.relative{position:relative;top:auto;left:auto;}

3.2 只能用class调整样式,禁止用id(id要全部预留给js和后台)

3.3 可缩写的要缩写

margin padding之类的要缩写,避免出现margin-top,padding-left

四、JS

4.1 框架、插件

jQuery或别的函数库须保留原始完整版本信息;如:jquery-1.11.1.js

如使用了jQuery插件,应整理好编码格式与项目要求一致,最好统一为 utf-8

4.2 自定义js

自定义的js都合并到一个js文件中


备注:该规范来自网络整理、客户要求整理、经验总结。未完待续...