PC端规范代码.docx

PC端规范代码.docx

《PC端规范代码.docx》由会员分享，可在线阅读，更多相关《PC端规范代码.docx（15页珍藏版）》请在冰点文库上搜索。

PC端规范代码

PC端规范代码

示例

DOCTYPEhtml>

——注：

UTF-8编码具有更广泛的适应性——

——注：

作者统一公司名字——

——title注：

产品中文全称-产品英文缩写-官方网站——

——样式注：

求统一使用外链CSS文件方法——

页面注释说明

html

--在区域中加上页面注释，方便查看页面代码-->

-- topstart-

内容区

-- topend-

Css/*里面注释代码，方便查看及修改*/

/*footer*/

内容区

/*Endfooter*/

页面共用样式

CSS共用样式放在base.css

常见的样式common.css

页面公共部份由一个人编写（例如：

公共头部，公共尾部）

CSS样式重置

body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,hr{margin:

0;padding:

0}

body,button,input,select,textarea{ font:

12px/1.5 "宋体",arial, verdana, sans-serif}

h1,h2,h3,h4,h5,h6{font-size:

100%;font-weight:

normal}

li{list-style:

none}

fieldset,img{border:

0}

table{border-collapse:

collapse;border-spacing:

0}

q:

before,q:

after{content:

”}

button,input,select,textarea{font-size:

100%}

legend{color:

#000}

small{font-size:

12px}

hr{border:

none;height:

1px}

a{text-decoration:

none}

a:

hover{text-decoration:

underline}

.cle:

after{content:

".";display:

block;height:

0;clear:

both;visibility:

hidden}

.cle{ display:

inline-block}

.cle{ display:

block}

.clear {clear:

 both;}

文件目录

（1）存放其它图片文件夹命名规范：

imgaes

（2）存放广告图的文件夹banner_img

（3）文件名应该全部小写，多个单词以下划线“_”分开

（4）JS文件（非必须，框架、公用js的放到该目录）：

js

（5）确保文档或模板中只包含html，把用到的样式都写到样式表文件中，把脚本都写到js文件中。

这在多人协作时非常重要。

（6）关于活动专题以专题名称命名为文件夹（方便查找修改）

样式规范化（红色为强制，绿色为建议）

01.选择器与{之间必须包含空格。

例：

.selector{

}s

……………………………………………………………………………………………………………………………………………………

02.使用4个空格做为一个缩进层级，不允许使用2个空格或tab字符。

例：

.selector{

margin:

0;

padding:

0;

}

……………………………………………………………………………………………………………………………………………………

03.每行不得超过120个字符，除非单行不可分割

/*不同属性值按逻辑分组*/

background:

transparenturl（aVeryVeryVeryLongUrlIsPlacedHere）

no-repeat00;

/*可重复多次的属性，每次重复一行*/

background-image:

url（aVeryVeryVeryLongUrlIsPlacedHere）

url（anotherVeryVeryVeryLongUrlIsPlacedHere）;

/*类似函数的属性值可以根据函数调用的缩进进行*/

background-image:

-webkit-gradient（

linear,

leftbottom,

lefttop,

color-stop（0.04,rgb（88,94,124））,

color-stop（0.52,rgb（115,123,162））

）;

……………………………………………………………………………………………………………………………………………………

04.属性定义必须另起一行

漂亮统一的代码格式可以提高代码的可读性和可维护性，CSS的最佳代码格式主要有以下几点：

定义顺序以字母序排列，不考虑浏览器前缀；定义以分号结束；属性名称定义的分号后添加一个空格；多个选择器定义时，每个定义单独占一行。

例：

/*推荐*/

.selector{

margin:

0;

padding:

0;

}

例：

/*不推荐*/

.selector{margin:

0;padding:

0;}

……………………………………………………………………………………………………………………………………………………

05.当一个rule包含多个selector时，每个选择器声明必须独占一行

例：

/*推荐*/

.post,

.page,

.comment{

line-height:

1.5;

}

例：

/*不推荐*/

.post,.page,.comment{

line-height:

1.5;

}

06.为每个块级元素或表格元素标签新起一行，并且对每个子元素进行缩进

如：

• Moe
• Larry
• Curly

如果CSS属性的值为0,则后面不要带上单位。

除非真的是需要。

margin:

0;padding:

0;

……………………………………………………………………………………………………………………………………………………

06.CSS书写顺序，以提高代码的可读性。

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等）

……………………………………………………………………………………………………………………………………………………

07.清除浮动

当元素需要撑起高度可以包含内部的浮动元素时，通过对伪类设置clear或触发BFC（blockformattingcontext中文就是“块级格式化上下文”）的方式进行clearfix。

尽量不使用增加空标签的方式。

解释：

触发BFC的方式很多，常见的有：

float非none

position非static

overflow非visible

另需注意，对已经触发BFC的元素不需要再进行clearfix。

……………………………………………………………………………………………………………………………………………………

08.尽量不使用!

important声明。

当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和!

important定义样式。

解释：

必须注意的是，仅在设计上确实不允许任何其它场景覆盖样式时，才使用内联的!

important样式。

通常在第三方环境的应用中使用这种方案。

下面的z-index章节是其中一个特殊场景的典型样例。

09.RGB颜色值必须使用十六进制记号形式#rrggbb。

不允许使用rgb（）。

带有alpha的颜色信息可以使用 rgba（）。

使用 rgba（） 时每个逗号后必须保留一个空格。

颜色值可以缩写时，必须使用缩写形式

/*推荐*/

.success{

box-shadow:

002pxrgba（0,128,0,.3）;

border-color:

#008000;

}

/*不推荐*/

.success{

box-shadow:

002pxrgba（0,128,0,.3）;

border-color:

rgb（0,128,0）;

}

10.使用CSS缩写属性

01）CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。

03）去掉小数点前的“0”

03）16进制颜色代码缩写（能缩写的情况下）

04）连字符CSS选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。

2.不建议使用“_”下划线来命名CSS选择器，为什么呢？

输入的时候少按一个shift键；

浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）

能良好区分JavaScript变量命名（JS变量命名是用“_”）

04）不要随意使用Id

id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。

05）不要随意使用Id

11.必须同时给出水平和垂直方向的位置。

解释：

2D位置初始值为 0%0%，但在只有一个方向的值时，另一个方向的值会被解析为center。

为避免理解上的困扰，应同时给出两个方向的值。

background-position属性值的定义

例：

/*推荐*/

body{

background-position:

centertop;/*50%0%*/

}

/*不推荐*/

body{

background-position:

top;/*50%0%*/

}

12.font-family属性中的字体族名称应使用字体的英文FamilyName，其中如有空格，须放置在引号中。

统一使用推荐的字体定义写法。

说明：

（推荐使用下面字体：

body{ font-family:

”LucidaGrande”,Verdana,Lucida,Arial,Helvetical,宋体,sans-serif; } 字体按照所列出的顺序使用。

其中中LucidaGrande字体适合MacOSX；Verdana字体适合所有的Windows系统；Lucida适合UNIX用户；如果所列出的字体都不能用，则默认的sans-serif字体能保证调用。

）

字体

操作系统

FamilyName

宋体（中易宋体）

Windows

SimSun

黑体（中易黑体）

Windows

SimHei

微软雅黑

Windows

MicrosoftYaHei

微软正黑

Windows

MicrosoftJhengHei

华文黑体

Mac/iOS

STHeiti

冬青黑体

Mac/iOS

HiraginoSansGB

文泉驿正黑

Linux

WenQuanYiZenHei

文泉驿微米黑

Linux

WenQuanYiMicroHei

例：

h1{

font-family:

"MicrosoftYaHei";

}

font-family 不区分大小写，但在同一个项目中，同样的 FamilyName 大小写必须统一。

例：

/*推荐*/

body{

font-family:

Arial,sans-serif;

}

h1{

font-family:

Arial,"MicrosoftYaHei",sans-serif;

}

/*不推荐*/

body{

font-family:

arial,sans-serif;

}

h1{

font-family:

Arial,"MicrosoftYaHei",sans-serif;

}

13.把多媒体元素可知化。

像图片、视频、动画等多媒体元素，要有相关的文字来体现其内容，比如可以使用alt属性来说明图片内容。

标签中，必须包括alt元素。

说明：

W3CXHTML1.0标准中规定，在标签中，必须包括alt元素。

/*推荐*/

/*不推荐*/

14.按照XHTML规范，所有标签名及属性名必须全小写，属性值以双引号包裹，属性的等号两边禁止添加空格。

所有标签必须闭合。

例：

“
”必须写作“”

15.所有被废弃的标签禁止使用，例如：

，，等

16.尽量减少行内CSS的使用，除一些类似规定表格栏位宽度等比较具有特殊性的位置，禁止在元素内使用行内CSS

例：

black;”>