html 规范

图片

图片统一存放在图片服务器。注意修饰性图片与内容类图片的分类。

图片格式/大小

适当使用 css Sprite理念合并修饰性图片，图片单张体积不能超过150Kb，JPG格式60%品质即可，部分模糊的可以保持在80%。

图片引用

1
2
3
1.图片路径需要绝对路径格式； 
2.所有img元素必须加上alt属性，修饰性图片alt属性内容为空，内容性质图片alt写上相应的内容 
3.必须加上width和height属性，值为原来的大小，但不要用它来进行缩放

CSS规范

避免使用id选择器（唯一性）

以字母开头

1
2
3
1.必须以字母开头 
2.不允许单个字母的类选择器 
3.不允许命名带有广告等英文的单词，例如ad，adv，以防止该模块被浏览器当做垃圾广告过滤掉。任何文件命名均如此。

全小写，并使用‘-’连字符号

1
2
1.下划线禁止出现在类的命名中，统一使用‘-’连字符 
2.禁止驼峰式命名

命名应简约而不是语义

1.避免过度简写

文件名例举

基本样式base.css框架布局 layout.css模块样式module.css等等

Reset参考
注意！使用时按需配置，去除冗余

精简版（适用于一般的游戏类官网、专题）

1
2
3
4
5
6
7
8
9
10
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,input,select,textarea,div,table,td,th,tr,dt,dd,dl{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
ul,ol{list-style:none;}
strong,b{font-weight:normal;}
em,i{font-style:normal;}
table{border-spacing:0;border-collapse:collapse;}
img{border:0;vertical-align:middle;}
input,select{vertical-align:middle;font-size:100%;line-height:150%;font-family:arial,'\5FAE\8F6F\96C5\9ED1',sans-serif;-webkit-appearance:none;}
a{text-decoration:none;outline:none;hide-focus:expression(this.hideFocus=true);background-color:transparent;-webkit-tap-highlight-color:transparent;}
body{min-width:1000px;font:14px/1.5 arial,"\5FAE\8F6F\96C5\9ED1",sans-serif;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;}

通用版（基本使用于所有页面）

1
2
3
4
5
6
7
8
9
10
11
12
13
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}

通用版（支持html5）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
table{border-collapse:collapse;border-spacing:0}
audio,canvas,video { display: inline-block;*display: inline;*zoom: 1;}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}

代码风格

1
2
3
1.css属性值需要用到引号，统一使用单引号 
2.为单个css选择器或新声明开启新行 
3.布局定位属性-自身属性-文本熟悉-其他css3

用css控制交互或视觉变化，js只需增减className

删除css属性值为0的单位

删除无用css样式