软件界面规范V1.0.docx

XXX信息技术标准/运作程序 编号： 适用范围：XXX软件开发处版本： 1.0 密 级： 无 XXX集团软件界面规范版本编 写审 查会 审审 核批 准生效时间1.0主办单位：XXX集团信息办审查发送单位： 此文件属XXX有限公司所有，未经许可，不得以任何方式外传修改记录页版本日期章节页码修改范围及依据1.02011-12-30 首次发布目录1前言41.1编写目的41.2适应环境和对象41.3基本内容42界面设计准则42.1基本准则43目录结构及命名规则53.1目录结构规范53.2文件和目录命名规范63.3图片的命名规范63.4图片的格式选择73.5样式的命名规范73.6其它文件命名规范134界面实施细则134.1颜色134.2字体134.3文字表达164.4控件风格174.4.1文本输入框174.4.2按钮194.4.3单选284.4.4复选284.4.5GridView284.5界面布局294.5.1总体准则294.5.2界面总体布局304.5.3TOP-BANNER页面布局314.5.4LEFT-MENU页面布局324.5.5RIGHT-BODY页面布局334.5.6其它内容355UI界面标准规范管理395.1UI界面标准规范的维护395.2UI界面标准规范的执行396附录1：浏览器兼容问题与解决方案406.1标签样式重置406.2double-margin bug416.3清除浮动436.4img下的留白456.5非链接的hover状态456.6div 的垂直居中问题466.7如何对齐文本、图片与文本输入框466.8png格式的图片透明区域在IE6下显示为灰色476.9需要注意的477附录2：名词解释471 前言1.1 编写目的通过此规范的推广以统一新开发系统的界面风格，提高团队的工作效率，提高用户满意度，同时满足软件产品化的需要。1.2 适应环境和对象本规范适用基于浏览器的B/S版软件项目开发工作。适用对象为开发编码人员、UI设计人员、界面测试人员等。开发流程中的模版页面编写和模板文件套用工作必须遵照此规范执行。1.3 基本内容本规范从目录结构及命名规则、界面设计实施细则两大方面对系统界面设计规范进行说明。旨在规范界面设计过程中，目录结构的建立，目录及文件的命名，图片及样式的命名，以及从颜色、字体、控件风格、位置编排等方面来规范界面的整体风格和总体布局。最后对UI界面标准规范管理和浏览器兼容问题与解决方案进行说明。2 界面设计准则22.1 基本准则系统界面是系统和用户交互的直接载体。“目录层次准确”、“功能布局合理”、“标识图易理解”、“文件容易找到”等准则应该被重视，它影响到用户能否独立轻松完成相关操作。1） 应该让用户了解当前的操作状态，系统状态应该具有可见性。2） 界面控件、文本标示应该保持一致性和标准，让用户有一致性的操作。3） 目标、行为和可见选项具有可识别性，而不是让用户记忆，必要时，提供使用说明或提示信息。4） 提供撤销、重做功能，不必再通过额外的对话就能离开那里，同时可以减少焦虑。5） 一连串的动作应该被组织成开始、中间、结束三部份。当动作结束的时候，要提供反馈让用户知道动作已经完成。在做下个一连串的动作之前，先告知用户整个流程，能够减轻使用者的压力、提高满意度。6） 一个能在第一时间防止犯错的设计，总好过一堆漂亮的错误提示信息。应当在用户行动以前，就消除能诱使犯错的条件，必要时提醒用户确认操作，防患于未然。3 目录结构及命名规则33.1 目录结构规范总体规则：1） 目录建立的原则：以最少的层次提供最清晰简便的访问结构。2） 根目录一般只存放标准框架必须的系统文件。包括default.aspx、FrmHeader.aspx、FrmBottom.aspx、FrmMain.aspx、FrmMenu.aspx、FrmPush.aspx、PageError.aspx、Index.aspx、OverdueLogin.aspx。3） 业务系统的UI层的业务程序代码存放在根目录下的Web文件夹内。其它说明如下：上图所示: 四套皮肤样式，图片的存放位置。皮肤中包括所用到的图片皮肤定义文件Default.css皮肤用到的样式文件Default.css。皮肤中图片的存放位置。子系统用到的JS代码存放位置。标准UI公用组件共用的资源文件位置（不允许修改）。3.2 文件和目录命名规范1） 文件命名的原则：以最少的字母达到最容易理解的意义。2） 文件名称采用驼峰命名法,统一用大小写的英文字母、数字和下划线的组合，不得包含汉字、空格和特殊字符。3） 尽量按单词的英语翻译为名称。例如：FeedBack(信息反馈) 不到万不得已不要以拼音作为目录名称。4） 多个同类型文件使用头部加尾部命名，头尾部开头的第一个英文字母大写。头部表示文件内容，尾部表示文件性质等。例如：a) 新增项目信息：ProjectAdd.aspxb) 修改项目信息：ProjectModify.aspxc) 查询项目信息：ProjectQuery.aspxd) 查看项目信息：ProjectView.aspx5） 控件命名详见“XXX-XX-XX DOTNET编码规范”、 “XXX-XX-XX DOTNET编码规范”。3.3 图片的命名规范1） 名称分为头尾两部分，用下划线隔开。2） 头部表示此图片的大类性质。例如： 放置在页面顶部的横幅、标语、装饰图案等图片我们取名：banner ；标志性的图片我们取名为：logo ；在页面上位置不固定并且带有链接的小图片我们取名为button ；在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu ；装饰用，或者文档插图等图片我们取名：pic ；不带链接表示标题的图片我们取名：title 依照此原则类推。3） 尾部用来表示图片的具体含义，用英文字母表示。例如：banner_IMS.gif menu_nav.gif logo_CNPEC.gif pic_news.jpg。4） 若有多重性质或多重含义时，可用下划线将多个性质或含义隔开。例如：menu_nav_bg.gif 。5） 有onmouse效果的图片，两张分别在原有文件名后加”_on”和”_off”命名。3.4 图片的格式选择1） 对于图片格式的选择，没有固定的限制。选择原则：保证图片清晰的前提下，图片越小越好。2） 选用PNG或GIF格式：图像上颜色较少，并主要以纯色或平滑渐变进行填充；具有较大亮度差异以及强烈对比的简单图像；页面的基本元素（容器背景、按钮等），为保证设计品质，尽量采用PNG或GIF格式。GIF支持动画，也支持半透明（全透明或全不透明），IE6下PNG全透明会显示灰色。3） 选用JPG格式：JPG所能显示的颜色比GIF、PNG多得多，适合用来储存摄影或写实图像；同时能得到很好的压缩（有损压缩），对质量要求不是很苛刻的，如广告图片、Banner等，可采用JPG格式。3.5 样式的命名规范层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 ,样式通常存储在样式表中 ,把样式添加到 HTML中，是为了解决内容与表现分离的问题 ,外部样式表可以极大提高工作效率。 1. 文件调用写法1） 样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。样式通常保存在外部的CSS文件中,尽量采用外部调用，特殊情况才允许使用内置html写法。 2） 一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中D 拥有最高的优先权。A. 浏览器缺省设置 B. 外部样式表 C. 内部样式表（位于 标签内部） D. 内联样式（在 HTML 元素内部）3） 因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。2. 文件结构组织1） 文件提头，文件名称、时间、作者。2） 将不同目的和效果的选择器分别编组（例如将页面不同模块的样式编到不同的组），编组分层级使结构清晰，便于查对。并恰当地成块注释，注释要说明施加的页面文件的对象。/*-注释说明文字开始-*/.headtext font-size: 14px;color: #ffffff;font-weight: bold;.headtext a:link color: #ffffff;text-decoration: none;.headtext a:visited color: #ffffff;text-decoration: none;.headtext a:hover color: FED078;text-decoration:none ;/*-注释说明文字结束-*/*-注释说明文字开始-*/#clientcard align:left;#clientcard th background-attachment: fixed;background:url(images/dot2.gif)background-repeat: no-repeat;background-position: left center;height:20;font-size: 12px;color: #737373;padding-left:10;font-weight: bold;#clientcard td height:20;font-size: 12px;color: #FD783A;padding-right:25;/*-注释说明文字结束-*/3） 选择器分组的顺序是初始化的最先，伪类其次，自定义最后。便于自己和他人阅读。4） 例 如： BODY margin-left: 0px;TD font-size: 12px;a:link color: #484848;text-decoration: none;a:visited color: #484848;text-decoration: none;a:hover color:#BD0800;text-decoration: underline;.ltreename font-size: 14px;5） 书写顺序:样式的书写顺序要符合浏览器的加载顺序：显示属性-自身属性-文字属性。这样的顺序不仅能够提高页面的加载速度，而且能够使代码结构清晰，方便修改，从而提高团队效率。.classname/#IdNamess /显示基本属性DisplayList-stylePositionFloatClear/自身基本属性WidthHeightMarginPaddingBorderBackground/文本基本属性ColorFontText-decorationText-alignLine-heightVertical-alignWhite-spaceOther textContent3. 类选择器和ID选择器命名规则1） 以功能定义“类选择器”和“ID选择器”的名称，而不是外观。例如创建了一个 .smallblue 类，后面将文字改大，颜色变为红色，这个类名就不再有任何意义了。所以，用更有描述性的名字如 .copyright 和.info-list更加合适。2） 常用类选择器/ID选择器命名规范：页面外围控制整体布局宽度：wrapper头 部：header标志：logo导航：nav主导航：mainNav 子导航：subNav内容：content标语：banner标题：title侧边栏：sidebar容器：box图标：icon注释：note搜索：search按钮：btn登录：login链接：link信息框：message左/右/中：left / right / center页脚：footer版权：copyright3） ID选择器和类选择器的灵活运用能使页面布局看上去更有条理：布局外围及各大块区域使用ID选择器（不可重复且具有唯一性） 各区域内部用类选择器（可重复运用）。同一容器内可同时使用一个ID选择器和多个类选择器。例如：4） 类选择器命名全部使用小写字母，ID选择器命名首字母大写，其它内容命名可使用相应的英文单词，如果说需要多个单词，单词间使用“_”分隔，比如class=user_list或者ID=User_ist，不使用拼音或英文单词的简写方式来命名。需要注意的是类选择器和ID选择器名称是区分大小写子母的，即.header与.Header是两个不同的类选择器名称。4. 单位1） 0可不用单位。2） 非零值要指明单位，指定字体、边距或大小时，必须指明所用的单位。例 如： padding: 0 2px 0 1em; 。3） 特例：line-height不需要单位。5. 顺序1） a:link a:visited a:hover a:actived 要按照规范顺序写。2） 边框(border)、边距(margin)和补白(padding)的简写次序为：顺时针方向从上开始，即 Top, Right, Bottom, Left。例如： margin: 0 1px 3px 5px;表示上边距为零，右边距为1px，依此类推。6. 组合选择器保持短小对减少下载时间非常重要，尽量为选择器分组、利用继承(inheritance)以及使用简写(shorthand)来减少冗余。7. 使用图片1） 样式中经常遇到使用图片的情况, 图片的路径一律采用相对路径。例如：.hurdlename font-size: 14px;color: #0B43C2;height:25px;font-weight: bold;background-image: url(images/rbar_bg.gif);background-repeat: repeat-y;text-indent: 12px;.but1background-image: url(./images/but1.gif);font-size: 12px;color: #000000;border: 0;width:85px;height:26px;cursor: hand;2） 使用图片替换技术时要考虑与系统和文件结构的亲和力。如果引用的所有文件不在同一级相对路径，就会出现指定的图片无法显示的问题。在这种情况下不支持使用图片技术，建议采用filter技术。例如：input.buttton filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0,startcolorstr=#CFD1CF, endcolorstr=#EFEFEF);border: #B5B6B5 1px solid;font-size: 12px;color: #000000;cursor: hand;height:24px;background:#ffffff;3.6 其它文件命名规范js的命名原则以功能的英语单词为名。例如：广告条的js文件名为:ad.js 。4 界面实施细则44.1 颜色1） 页面采用深天蓝色的的主题风格，辅助颜色：浅天蓝、浅橙、淡灰蓝、浅灰。2） 页面纯颜色： BODY背景颜色:白色#ffffff 界面主体颜色:深天蓝#2491d6 左侧二级菜单颜色1:浅蓝#edf8fc 左侧二级菜单颜色2:淡灰蓝#e2f1f8 内容页面模块标题背景颜色:淡蓝#d7f8ff 内容页面数据列表行鼠标经过颜色：浅橙#fff5c8内容页面模块按钮栏背景颜色:浅灰#f5f6f84.2 字体1. 字体系列1） font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表，浏览器会使用它可识别的第一个值。2） 在使用字体系列时可按照优先顺序排列，然后用逗号进行连接，一般使用font-family:宋体, Tahoma; 当一个字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，需要在 font-family 声明中加引号。单引号或双引号都可以接受。但是，如果把一个 font-family 属性放在 HTML 的 style 属性中，则需要使用该属性本身未使用的那种引号。2. 字号大小1） 为了保证不同浏览器上字号保持一致，字号像素px 来定义，一般使用中文宋体12px 和13px，黑体字或者宋体字加粗时，一般选用13px 的字号比较合适。例如： font-size: 12px;2） 标题：栏目标题文字大小一般选用13px、行高为180%。3） 正文：页面正文文字标准大小为“12px”；中、英文标准字体分别为“宋体”和“Tahoma”；表单段落标准行高为“220%”，列表段落标准行高为“200%”。 3. 字体颜色第一种：浅黑色（#2a2a2a）-常用于正文颜色说明：页面上常规出现的文字均使用此种颜色文字；表单内容、数据列表中的文字也使用此种颜色。第二种：深青色（#0e5c8c）-辅助颜色 说明： 该颜色应用于模块标题。第三种：纯黑/白字体（#000000/#ffffff）说明：该颜色应用于系统菜单一/二级标题文字、按钮、分页控件等。第四种：提醒标注文字说明：红色，颜色值：#ff0000第五种：系统功能文字说明：颜色值：# e2f0fd；#ffffff第六种：默认链接样式说明：颜色值：# 3558db、 # ce6f00。鼠标经过状态加下划线，其余状态不加下划线。第七种：用于表单中可查看、编辑内容文字说明：颜色值:#0152b6。4.3 文字表达1） 文字的对齐方式一般按默认值（默认为左对齐）或设置text-align：left。文本在左边界对齐，右边界呈锯齿状。2） 中文排版中首行缩进的处理，不要使用全角空格来达到效果，规范的做法是在样式表中定义 p text-indent: 2em; 然后给每一段加上 标记，注意，一般情况下，请不要省略 结束标记。段落文字首行缩近“4个字符（即：2个中文字符、4个英文字符）”。3） 为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中尽量不要使用 来人工干预分段。4） 不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外，汉 字之间的标要用全角标点，英文字母和数字周围的括号应该使用半角括号。避免连续出现多于一个或尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。5） 行距建议用百分比来定义，常用的两个行距的值是line-height:150%; line-height:180%;。4.4 控件风格4.4.1 文本输入框带星号为必填项样式,以淡黄色背景区分，具体样式如下：.form_input /* 输入框样式*/height:16px;border: 1px solid #a6a7ac;background-color: #fdfdfd;behavior: url(./Scripts/Actions/FreeText.htc);margin:0px 2px 0px 3px;line-height:130%; Behavior：.form_input_fill /* 必填项输入框样式*/height:16px;border: 1px solid #a6a7ac;background-color: #fefce9;behavior: url(./Scripts/Actions/FreeText_fill.htc);margin:0px 2px 0px 3px;line-height:130%;Behavior：.form_select /*选择下拉框样式*/height:20px;width:150px;border: 1px solid #a6a7ac;background-color: #fdfdfd;behavior: url(./Scripts/Actions/FreeText.htc);margin:0px 2px 0px 3px;.form_select_fill /* 必填项选择下拉框样式*/height:20px;width:150px;border: 1px solid #a6a7ac;background-color: #fefce9;behavior: url(./Scripts/Actions/FreeText_fill.htc);margin:0px 2px 0px 3px;.form_textarea /* 多行文本输入框样式*/border: 1px solid #a6a7ac;background-color: #fdfdfd;margin:0px 2px 0px 3px;padding:2px;behavior: url(./Scripts/Actions/FreeText.htc);.form_textarea_fill /* 必填项多行文本输入框样式*/border: 1px solid #a6a7ac;background-color: #fefce9;margin:0px 2px 0px 3px;padding:2px;behavior: url(./Scripts/Actions/FreeText_fill.htc);4.4.2 按钮1. 第一级：菜单按钮系统左侧菜单。1） 层级结构一级菜单样式：为原始状态；为鼠标经过、选中状态.NavBarTopItem padding: 4px 0px 3px 10px;background:url(./Images/meun_title_bg.gif) left no-repeat;font-family:微软雅黑,宋体, Tahoma;text-align:left;font-size:13px;font-weight:normal;color:#FFFFFF;white-space:nowrap;cursor:hand;.NavBarTopItemHover padding: 4px 0px 3px 10px; background:url(./Images/menu_item_bg.gif) left no-repeat; font-family:微软雅黑,宋体, Tahoma; text-align:left; font-size:13px; font-weight:normal; color:#FFFFFF; white-space:nowrap; cursor:hand;.NavBarTopItemAcitve padding: 4px 0px 3px 10px; background:url(./Images/meun_title_bg.gif) left no-repeat; font-family:微软雅黑,宋体, Tahoma; text-align:left; font-size:13px;font-weight:normal;color:#FFFFFF;white-space:nowrap;cursor:hand;.NavBarTopItem span, .NavBarTopItemHover span, .NavBarTopItemAcitv span display:block;float:right;margin:5px 4px 0px 0px;二级菜单样式：为原始状态；为鼠标经过、选中状态.NavBarItemTable border:1px solid #268fd0;border-top:0px;background-color:#f2f7fb;padding:4px;.SubItem height:19px;background:url(./Images/SubItem_bg.gif) repeat-x bottom;border: 1px solid #f2f7fb;padding: 4px 0px 4px 17px;text-align:left;color:#2a2a2a;cursor:hand;.SubItemHover height:19px;background:url(./Images/SubItemHover_bg.gif);border: 1px solid #b4c6dd;padding: 4px 0px 4px 17px;text-align:left;color:#2a2a2a;cursor:hand;.SubItemActive height:19px;background-color:#f2f7fb;border: 1px solid #f2f7fb;padding: 4px 0px 4px 17px;text-align:left;color:#2a2a2a;cursor:hand;.SubItem span, .SubItemHover span, .SubItemActive span display:block;float:left;margin:-2px 8px 0px 0px;2） 树形结构说明：用于系统左侧树形菜单。菜单样式：为鼠标经过状态；为选中状态.menu_box adisplay:block;height:22px;color:#505050;font-weight:bold;text-decoration:none;padding-left:14px;.menu_box .selected adisplay:block;background:url(./images/menu_buttonbg.gif) repeat-x bottom;border: solid #cdc9c2 1px;color:#505050;font-weight:bold;text-decoration:none;.menu_box .selected a:hover display:block;background:url(./images/menu_buttonbg2.gif) repeat-x top;border: solid #cdc9c2 1px;color:#505050;font-weight:bold;text-decoration:none;.menu_box a:hover display:block;background:#eaf0fa;.tree_menu,.tree_menu2width:100%;.tree_menu acolor:#505050;font-weight:normal;text-decoration:none;padding-left:28px.tree_menu2 acolor:#505050;font-weight:normal;text-decoration:none;padding-left:42px3） 导航菜单按钮样式：.nav_menuheight:26px;background:url(./Images/nav_menu_bg.gif) repeat-x;a.menu1 display: block;float:left;margin-right:1px;padding:5px 20px 3px 20px;background:url(./Images/nav_menu_btn_bg1.gif) bottom repeat-x;color: #16428b;font-size:13px;font-weight:bold;white-space:nowrap;cursor:pointer;a.menu2 display: block;float:left;margin-right:1px;padding:3px 20px 3px 20px;background:url(./Images/nav_menu_btn_bg2.gif) repeat-x;border:solid #206ab4 1px;border-bottom:0px;color:#ffffff;font-size:13px;font-weight:normal;white-space:nowrap;cursor:pointer;a.menu_on/*鼠标经按钮过样式*/display: block;float:left;margin-right:1px;padding:3px 20px 3px 20px;background:url(./Images/nav_menu_btn_bg2_on.gif) repeat-x;border:solid #afd9f3 1px;border-bottom:0px;color:#ffffff;font-size:13px;font-weight:normal;white-space:nowrap;cursor:pointer;一级下拉列表样式：#apDiv1 position:absolute;left:6px;top:45px;background-color:#0290d5;width:138px;height:130px;z-index:1;.sub_menu1 a:linkdisplay:block;color:#e9f1f9;padding:6px 8px;cursor:pointer;.sub_menu1 a:visiteddisplay:block;color:#e9f1f9;padding:6px 8px;cursor:pointer;.sub_menu1 a:hoverdisplay:block;color:#135b88;padding:6px 8px;cursor:pointer;background:#b4def2 url(./App_themes/DefaultTheme/Images/sub_menu_button_bg.gif) repeat-x bottom;.sub_menu1 a:activedisplay:block;color:#e9f1f9;padding:6px 8px;cursor:pointer;二级下拉列表样式：#apDiv2 position:absolute;left:144px;top:97px;background-color:#deecf9;width:138px;height:130px;z-index:1;.sub_menu2 a:linkdisplay:block;color:#3f3f3f;padding:6px 8px;cursor:pointer;.sub_menu2 a:visiteddisplay:block;color:#3f3f3f;padding:6px 8px;cursor:pointer;.sub_menu2 a:hoverdisplay:block;color:#ffffff;padding:6px 8px;cursor:pointer;background:#69a3db url(./App_themes/DefaultTheme/Images/sub_menu_button_bg2.gif) repeat-x bottom;.sub_menu2 a:activedisplay:block;color:#3f3f3f;padding:6px 8px;cursor:pointer;2. 第二级：突出显示按钮说明：次于第一级按钮的一种强调表现的按钮样式，显示为非激活状态和光标经过状态，表单中常用此功能按钮。按钮的命名统一：名称值名称值btnAdd新建btnQuery查询btnApprove批准btnRefreshCach刷新btnAudit审核btnReset重置btnBack退回btnReturn返回btnBackToMake退回重新制定btnSave保存btnCancel返回btnSaveDraft保存草稿btnClose关闭btnSaveRenew保存并新增btnDelete删除btnSearch搜索btnDispense分发btnSubmit提交btnExport导出btnTransfer转发btnImport导入btnValidate验证btnModify修改btnView查看btnProcess处理默认样式：.button_form display:block;float:left;margin:0px 3px;_margin:0px 2px;background:url(./Images/btn_bg_right.png) right no-repeat;cursor:pointer;white-space:nowrap;text-decoration:none;.button_form span display:block;padding:6px 8px 5px 8px;background:url(./images/btn_bg_left.png) left no-repeat;color:#000000;text-decoration:none;.button_form_hover display:block;float:left;margin:0px 3px;_margin:0px 2px;background:url(./images/btn_bg_right_hover.png) right no-repeat;cursor:pointer;white-space:nowrap;text-decoration:none;.button_form_hover span display:block;padding:6px 8px 5px 8px;background:url(./images/btn_bg_left_hover.png) left no-repeat;color:#000000;text-decoration:none;.button_box width:100%;height:28px;background-color:#f4f6f7;.button_form img, .button_form_hover img margin-right:6px;说明:系统功能按钮, 显示为非激活状态和光标经过状态。.btn_system a:link float:left;display:block; padding:4px 4px 2px 4px;color:#e2efff;.btn_system a:visited float:left;display:block; padding:4px 4px 2px 4px;color:#e2efff;.btn_system a:hover float:left;display:block; padding:4px 3px 2px 3px;background:url(./Images/btn_system_bg.gif) repeat-x;color:#ffffff;border:solid 1px #237ac1;.btn_system a:activefloat:left;display:block; padding:4px 4px 2px 4px;color:#e2efff;.icon_switchdisplay:block;padding-left:18px;background:url(./Images/icon_switch.gif) left no-repeat;.icon_helpdisplay:block;padding-left:18px;background:url(./Images/icon_help.gif) left no-repeat;.icon_log-outdisplay:block;padding-left:18px;background:url(./Images/icon_log-out.gif) left no-repeat;.icon_skindisplay:block