一、目录结构及规范
-
目录建立的原则：
把静态资源文件分离出来，保证静态资源和内容页面相对独立，所有目录、文件用小写字母命名，所有文件名字母间连线都为下划线，样式的目录和文件名与内容页面的路径对应，样式文件中所引用的图片按照样式的目录对应。如有两类页面用到类似的结构，应提取为公共的。 -
站点根目录及各个子目录的命名规范：
按照页面的结构分类
A.公共的图片文件，文件夹命名规范加common，文件的命名：common-文件名称。样式文件的命名reset.css和common.css,脚本文件的命名：public.js（注：研发已经有了一个common.js文件，避免重复！）。
B.子页面的分类：图片文件夹按功能规范为：list（列表页面），details（详细页面及文章页面），order（提交订单页面，支付页面，我的订单页面及订单详情页面），login（登录、注册页面）。样式文件命名有：list.css，details.css,order.css,login.css,error.css（报错页面）。脚本文件的命名也按功能区分，功能公共原则：有两个或者两个以上的地方要用到该功能，就应该单独出来，放到public.js里面。 -
二、css样式规范
-
对主要的样式加注释，必要时可用一定符号区分，如有多人合作的时候，注释可标注姓名、时间及备注。
-
尽量减小样式表的体积，能缩写就缩写，比如颜色值是成对重复的可以缩写，效果一样，可以写“color:#FFF”，就不写“color:#FFFFFF”。但如果不重复就不可以缩写，例如#FC1A1B必须写满六位。
-
定义字体。web标准推荐如下字体定义方法：body { font-family : “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 。
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推；
Lucida Grande字体适合Mac OS X；Verdana字体适合所有的Windows系统；Lucida适合UNIX用户 ；”宋体”适合中文简体用户; 如果所列出的字体都不能用，则默认的sans-serif字体能保证调用; -
当几个元素样式属性一样时，可以采用群选择器的方式共同调用一个声明，元素之间用逗号分隔： p, td, li { font-size : 12px ; }
-
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active。
-
在自定义CSS中，命名同样遵循文件命名规则。命名要求简单直接、可读性强。
常用的CSS命名规则：
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
命名全部使用小写字母，如果需要多个单词，单词间使用“-”分隔，比如user-list
页面布局使用有意义的英文来命名ID，例如：header、footer、main、content
公用的样式尽可能使用有语义清晰的英文来命名。例如：banner、sidebar、pagebar。
如果语义不清晰或者不确定的情况下使用以下方式命名（元素缩写-字母）：
间距：m-a、m-b、m-c
段落、区块：p-a、p-b、p-c
表单：f-a、f-b、f-c
表格：t-a、t-b、t-c
列表：l-a、l-b、l-c
输入框、下拉框、单选、多选：i-a、i-b、i-c
超链接、按钮：a-颜色代码 或者 按钮 a-a、a-b、a-c，一个项目中所有按钮图片在一张上
圆弧块：r-a、r-b、r-c
选项卡：o-a、o-b、o-c
所有区块下的子元素命名用 区块-字母数字：t-a下的元素 t-a-a、t-a-b，p-a下的元素 p-a-1, p-a-2，有顺序的按数字、无顺序的按照字母
频道栏目样式统一加上c-的前缀，以避免和公用样式文件的冲突。
频道栏目中如果认为该样式可能会公用，请从字面后方开始命名，例如： c-p-z、c-p-y、c-l-z -
布局的区块统一采用id，页面的id必须唯一，其它样式不建议使用id，除非有特殊需要。
-
浏览器差异的问题是客观必然存在的，尽量对数据内容进行合理的分析，严谨的运用样式，大多数不兼容情况还是由于样式运用不合理造成的，如有必要运用hack来解决，请遵照一下规范执行：
.class{ width:100px;*width:200px;-width:300px;}
此样式的宽度在火狐浏览器解释为100px，在IE7浏览器下解释为：200px，在IE6浏览器下解释为：300px -
页面中的区块的样式必须写在一起，区块中的元素必须封装好，以免造成别的样式混乱。例如：
.topnav{background:url(../../../app-images/v10/pingan/header/topnav.gif) repeat-x; height:22px;}
.topnav li{float:right; margin:0 2px;}
.topnav .tll{background:url(../../../app-images/v10/pingan/header/topnav-left.gif) no-repeat left top; padding:0 0 0 10px;}
.topnav .trr{line-height:100%; padding:7px 6px 3px 0;}
.topnav .tophome .tll{background:none;}
.topnav li a{}
.topnav li a:hover{color:#f50; text-decoration:none;} -
每个网站基本的公用文件reset.css、common.css，并为其写好注释。
三、js脚本规范
-
为了项目后期维护的方便，js文件全部采用外部调用的方式，一般不允许在页面里面写js代码，可在页面所在站点下建立js目录，放置js文件。
-
在自定义js文件中，命名同样遵循文件命名规则。命名要求简单直接、可读性强。
-
Js文件调用原则：js文件放在上面，jquery库和公共脚本可放在head里面。
-
编写每个js文件时，需对主要函数做简单描述，可在js里面做注释，或者js目录下添加说明文档，方便开发人员统一应用。
-
每个网站基本的公共脚本文件public.js，新增公共方法的时候写好注释，并且做好判断。
四、控件库的规范
基于以上的分类，每个控件在存放时单独建立一个文件夹，文件夹包含js主文件和skin文件。
如：calender20
-calender.js
-skin
–skin1
–skin2
五、界面原型（html）规范
5.1DOCTYPE文档声明
所有的页面都应该声明文档类型，DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码, DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。
a) XHTML1.0提供了三种DOCTYPE可选择：
-
过渡型（Transitional ）
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> -
严格型（Strict ）
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> -
框架型（Frameset ）
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
对于pingan网站来说，只要选用过渡型的声明就可以了。它依然可以兼容原先的表格布局、表现标识等，不至于觉得变化太大，难以掌握。
同时需要设定一个名字空间（Namespace），直接在DOCTYPE声明下面添加如下代码：
一个namespace是收集元素类型和属性名字的一个详细的DTD，namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。
b) HTML4.0.1提供了三种DOCTYPE可选择：
-
过渡型（Transitional ）
-
严格型（Strict ）
-
框架型（Frameset ）
“http://www.w3.org/TR/html4/frameset.dtd”>
c) HTML5直接做申明。
5.2META标签规范（主要用于SEO）
视具体情况，在页面中加入Meta标签（主要用于SEO）：
-
网页显示字符集
-
网站简介
< meta name=”description” content=”此页面内容的简介”/> -
搜索关键字
< meta name=”keywords” content=”关键词1，关键词2，关键词3…关键词N “/> -
语言设置
<meta Http-Equiv="Content-Language" content"zh-cn" /> -
标注版权
< meta name=” copyright ” content=”本页版权归生命人寿所有。All Rights Reserved”/> -
搜索引擎向导
< meta name=”robots” content=”index,follow”/> -
标注网页的作者或制作组
< meta name=” author ” content=”生命人寿”/> -
编辑器的说明
< meta name=” Generator ” content=” Microsoft FrontPage 4.0 “/> -
兼容IE7
<meta ‘’http-equiv="x-ua-compatible" content="ie=emulateie7" />
5.3样式表链接
为了后期维护的方便，所有的CSS采用外部调用，CSS文件链接，包括link和import两种方式：
-
在页面head区调用css文件，如页面需调用css目录下的product-car.css文件，页面调用代码如下：<link ‘’ type="text/css" rel="stylesheet" href="css/product-car.css">
-
在css文件里面调用上级css文件，如网上门店shop/css/shop.css调用app-css目录下的global.css文件，页面调用代码如下：@import url(../../app-css/global.css);
5.4页面HTML书写规范
-
所有的HTML元素和属性的名字都必须使用小写。
例如下面的代码是不正确的：
<‘TITLE>生命人寿
正确的写法是：<’title>生命人寿 -
每个页面有唯一的<‘’h1>，可以是这个页面的主标题，并让你的关键字出现在<‘’h1>标签中。灵活应用h2,h3,h4,h5,h6，作为每一个区块儿的标题。
-
页面的HTML书写要有良好的语义和可扩展性。为关键的和不可重用的区块定义id，为可重复利用的区块定义class。
-
为Body定义id，相当于定义了命名空间，多页面元素的多样化展示很有好处。
-
所有的属性必须用引号”“括起来，例：height=”100”，而不能是height=100。
-
所有的标记都必须要有一个相应的结束标记，如果是单独不成对的标签，在标签最后加一个”/”来关闭它，例如：<‘’br /> <‘’img src=”webstandards.gif” />
-
用CSS定义元素外观，例如一个<‘’table>表格的背景应该在外部链接的CSS文件里被定义，然后引用class，而不应该在当前页面的<‘’table>标签中直接定义background属性。
-
把所有<和&特殊符号用编码表示
任何小于号（<），不是标签的一部分，都必须被编码为< ;
任何大于号（>），不是标签的一部分，都必须被编码为> ;
任何与号（&），不是实体的一部分的，都必须被编码为&‘’; -
给所有属性赋一个值
HTML规定所有属性都必须有一个值，没有值的就重复本身，如下checkde属性所示：
<‘’input name=”radiobutton” type=”radio” value=”1” checked=”checked” />
六、样式表（CSS）规范及使用规则
6.1 reset.css定义及使用规则
reset.css清除页面标签默认样式，并增加一些字体大小，浮动，颜色等样式的定义。
6.2 common.css定义及使用规则
common.css 整个网站的公共部分的样式，包括公共头部，底部，字体，表单控件元素，列表等。
6.3list.css 定义及使用规则
list.css 网站列表页面的样式，除去common.css样式表中公共的列表外的特定的样式。样式文件按网站的模块分内容，如门票：ticket-list。
6.4 details.css 定义及使用规则
details.css 网站详情页面的样式，包括模块详情页的样式，订单的详情页面，帮助中心，关于我们等文章页的样式，资讯详情页的样式。样式文件按网站的模块分内容，如门票：ticket-details。
6.5 order.css 定义及使用规则
order.css 网站订单提交页面，选择支付方式页面，及支付成功页面。
6.6 login.css 定义及使用规则
login.css 网站登录页面、注册页面、个人资料页面、修改密码页面、忘记密码页面等。
6.7 error.css 定义及使用规则
error.css 网站成功或失败提示页面，报错页面及表单的验证样式等提示样式。
七、脚本（JS）规范及应用
7.1 public.js 定义及应用
public.js网站的整体公共脚本，主要涉及到脚本的调用，函数的实现尽量不要放在改脚本文件里面。
7.2 控件的定义及应用
控件库的存放方式在控件库的规范里面有要求，控件的调用原则上是需要调用的时候引用文件，不需要的时候不引用。
八、图片大小
只需定义一个宽度或者高度，在不同地方调用同一张图片时，可用定位实现，图片大小写在注释里。
其他：
列表页：标题和图片建议加a链接。只给一个详情按钮加链接，用户体验不是很好，不能很快的定位到详情页。
提交订单页：前面名称不建议用label。因为开发那边有个封装好的Js。里面写了label的样式，会冲突。
九、模板化
头部和底部可以模板化。
对于分辨大的页面底部固定在最下面。以免下面留白。
731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
