• 字体规范
• 按钮、翻页、标签规范
• icon使用规范
• 日期&搜索标准
• 提示与操作反馈
• 各种修改总结&规范
• 表单规范
• 表格内容规范
• 弹出层&浮动层规范
• 页面布局(一栏)
• 页面布局(二栏/左小右大)
• 页面布局(二栏/左大右小)
• 其它布局(应用文件夹内部)

字体大小、颜色使用规范

超级链接类：	操作	[操作]	链接	回复   引用
使用范围：	表内操作/面包屑导航	表外操作/修改/删除/选择	查看/返回/新增..	不太重要的链接
css：	class="blue"	class="blue"	class="blueLine"	class="C-fontLine"
	进入范例	进入范例	进入范例	进入范例
	需要注意的：所有的链接文字 不带下划线的蓝色链接： 1、面包屑导航能点击的路径，已经整合到breadCrumb 样式中，不需要再用class="blue" 2、Table结构中所有能点击的链接及操作，全部都要带上class="blue" 3、    带下划线的蓝色链接： 查看、链接、添加栏目/分类等。

按钮、翻页、标签使用规范

导航：

整站导航

class="navBut"

<a href="#" class="navBut"><span>导航</span></a>

链接按钮：		有明确导向的	class="button_1"	<a href="#" class="button_1"><span>保存</span></a>
		无明确导向/不太重要	class="button_2"	<a href="#" class="button_2"><span>取消</span></a>
		按钮不可点	class="buttonGray"	<a href="#" class="buttonGray"><span>返回</span></a>
		搜索按钮	class="buttonSer"	<a href="#" class="buttonSer"><span>搜索</span></a>
		功能性/强调、醒目	class="buttonMgr"	<a href="#" class="buttonMgr"><span>关闭</span></a>
		功能性并带有下拉菜单	class="buttonMgr"	进入范例

链接按钮：			class="button_S1"	<a href="#" class="button_S1"><span>开通我的员工秀</span></a>
		需要特别显眼	class="button_4"	<a href="#" class="button_4"><span>点击进入礼品兑换区</span></a>

链接按钮：		添加	class="button_add"	<a href="#" class="button_add"><span>添加新员工</span></a>
		修改	class="button_modify"	<a href="#" class="button_modify"><span>修改员工信息</span></a>
		积分	class="button_jifen"	<a href="#" class="button_jifen"><span>积分充值</span></a>

Input按钮：		添加某某，并有操作引导	class="Add"	<input class="Add" value="添加附件" />
需要取消，新的不再需要，修改以前的应用记得要改掉		关联某某，并有操作引导	class="Relate"	<input class="Relate" value="关联关键字" />
		选择已经上传的图片	class="S_pic"	<input class="S_pic" value="选择图片" />

翻页与按钮：		翻页单独存在	class="page"	<div class="page"> </div>
		按钮与翻页同时存在	class="divButton_2"	<div class="page"> </div><div class="divButton_2"> </div>
		按钮层单独存在,偏中间	class="divButton_1"	<div class="divButton_1"> </div>
		按钮层单独存在,偏中间	class="divButton_5"	<div class="divButton_5"> </div>
		按钮层单独存在,居中	class="divButton_4"	<div class="divButton_5"> </div>
		按钮层单独存在,居左	class="divButton_3"	<div class="divButton_3"> </div>

面包屑导航：		class="breadCrumb"	<div class="breadCrumb">当前位置：<a href="#">BBS</a>﹥设置&管理</div>
		class="breadCrumb"	<div class="breadCrumb"><ul><li> 当前位置：</li><li>...</ul></div> 进入范例

标签：		签内容四周有边线	进入范例
		标签内容左右无边线	进入范例

Icon使用规范

网站导航：	积分管理	注册信息	认证与安全
css：	class="p1"	class="p2"	class="p3"

头部菜单：	应用首页	设置管理	发布内容	个人资料	搜索
css：	class="topMenu_a"	class="topMenu_b"	class="topMenu_c"	class="topMenu_d"	class="topMenu_d"
	导航
	class="topMenu_f"

左边菜单：	管理公告栏	管理文件夹	分类管理	管理员管理	搜索
css：	class="m1"	class="m2"	class="m3"	class="m4"	class="s"

右边菜单：	个人资料	我发布的	我回复的	收藏夹	最近浏览的
css：	class="p1"	class="p2"	class="p3"	class="p4"	class="p5"
	我的论坛币
	class="p6"

操作链接：	新增	手工添加	查询	返回	修改
css：	class="operation_a"	class="operation_b"	class="operation_c"	class="operation_d"	class="operation_e"
	导入	导出	新员工	项目组	设置
	class="operation_f"	class="operation_g"	class="operation_h"	class="operation_i"	class="operation_j"
	删除
	class="operation_k"

回复留言：	顶	踩	收藏	分享
css：	class="div_20_a"	class="div_20_a"	class="div_20_a"	class="div_20_a"

操作性图标：					缩略图显示/列表显示
	class="showSymbol"	class="hideSymbol"	class="showArrow"	class="hideArrow"

上移&下移：	不能下移	下移	不能上移	上移
css：	class="unDown"	class="Down"	class="unUp"	class="Up"

论坛图标：	版块有新回复	版块无新回复	置顶帖有新回复	置顶帖无新回复
css：	class="B1"	class="B2"	class="B3-b"	相关阅读 ·  猜猜，谁从从科幻走进现实了？2012.10.21 ·  在网页设计中应用大照片作背景的52个优秀范例（上篇）2012.10.21 ·  HTML特殊字符编码对照表2012.10.21 ·  常见Web技术之间的关系，你了解多少？2012.10.21 ·  for(var key in object){}语句枚举2012.10.21 联系我们CONTACT 扫一扫 愿景：成为最专业的软件研发服务领航者 中睿信息技术有限公司 广州•深圳 Tel：020-38931912 务实 Pragmatic 广州：广州市天河区翰景路1号金星大厦18层中睿信息 Fax：020-38931912 专业 Professional 深圳：深圳市福田区车公庙有色金属大厦509~510 Tel：0755-25855012 诚信 Integrity 所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。 版权所有：广州中睿信息技术有限公司 粤ICP备13082838号-2