UI命名规范100124.docx

1、UI命名规范100124UI部门命名规范北京神州数码思特奇信息技术股份有限公司二一一年八月1 文档的目录结构1.1 门户型网站的目录结构DEMO根目录npagesnjsnresourcesuisicommonyellowbluecssimagescssiconimagescssimagespictureblue.csscommon.csslayout.cssdtree.cssfenye.cssyellow.css1.2 产品线系统的目录结构DEMO根目录npagesnjsnresourcesuiIIsidefaultskin1/或其他名字cssimagescssimagesicon图标文件夹基

2、于控件或模块的导入样式.csslogin.cssportal.cssframework.csscommon.css以控件命名的样式.cssloginportalvalidatortree其他通用图片2 DEMO布局方式2.1 封装在一个WRAP层里：头部主体内容底部封装在一个层里一般适用于门户型网站，对层的操作比较少的情况下2.2 头部、主体、底部各自独立头部主体内容底部一般适用于公司产品线系统3 CSS样式命名3.1 CSS 文件命名3.1.1 CSS文件命名CSS文件命名全部采用小写；不要使用拼音作为文件的名称；门户型网站的CSS文件命名按照现有的命名方式即可；产品线系统的CSS命名：除了

3、公用的common.css 、 framework.css、reset.css等通用的样式以外，其他的样式文件以控件命名；3.1.1.1 门户型网站样式命名在nresourcescommoncss目录下common.css ：通用的样式，包括一些样式的重定义，链接的样式，表单的样式，字体的样式，通用分页的样式，通用的树样式等等；layout.css ：主要布局样式，网站主框架的布局，每个模块页面的布局样式等等；layout.css.head-panel.menu-panel.content-panel.content-panel .left-col.content-panel .center-

4、col.content-panel .right-col.search-panel.location.foot-panel.foot-panel .footlink.foot-panel .copyright.foot-panel .friendlinkdtree.css：网站通用树的样式fenye.css：网站通用分页的样式在 nresources yellow css 或者 nresources blue css 目录下yellow.css 或者 blue.css： 相对于布局样式的外观样式，yellow.css是以黄色或橘黄色为主色系的样式、blus.css是以蓝色为主色系的样式注：ye

5、llow.css与blue.css对比：两者的主要区别在于风格的不同，大部分类的名称相同。3.1.1.2 产品线系统结构样式命名在nresourcesdefaultcss目录下common.css ：通用的样式，包括，链接的样式，表单的样式，字体的样式，通用分页的样式，通用的树样式，通用表格样式等等；common.csshtmlbodyh1, h2, h3, h4, h5, h6tablethtda:linka:visiteda:hovera:active通用的表单元素样式其他通用的样式，例如：.loading.more-link.menuframework.css ：系统主框架样式frame

6、work.css.top-panel.top-panel .menu-panel .top-panel .menu-panel .tabs-nav.toolbar-panel. content-panel. content-panel .nav-panel. content-panel .work-panel. content-panel .work-panel .tabs-panelreset.css：一些通用标签样式的重定义，例如：reset.cssbody, h1, div, li, ul, img, span, p ,h1,h2,h3,h4,h5,h6 margin: 0; paddi

7、ng: 0;注：如果在common.css下重定义了通用标签，就不需要reset.css文件了其他功能模块样式.css：按功能模块页面命名的样式，例如：portal.csslogin.cssmercury.cssxxxxx.cssportal模块的样式登录的样式mercury.模块的样式xxxxx组件的样式在nresources default目录下main.css调用 nresources default css目录下的主要样式，main.css代码如下：main.cssimport url(css/reset.css);import url(css/common.css);import u

8、rl(css/framework.css);import url(css/tree.css);针对本项目的样式.类名1.类名2.portal.css调用 nresources default css目录下portal模块所用到的样式main.cssimport url(css/reset.css);import url(css/common.css);import url(css/portal.css);针对本项目的样式.类名1.类名2.注：在 nresources default目录下建立的样式文件都是导入的样式，那个模块用到哪个样式就调用哪个即可3.2 CSS 类名、ID命名3.2.1 C

9、SS类名、ID命名结构样式命名方式：采用该版块的英文单词或组合命名，方位+(作用)+类型描述，例如：网站头部的容器：.head-area 、左侧列：.left-col；样式名全部采用小写，用“-”号链接单词，例如：.head-area、.add-tab-panel；新版网站、新增类名采用类名方法书写，不采用ID书写，例如：class=”top-panel”，以便与ID区分，ID可以用于JS中；类名的英文单词尽量不缩写，使用缩写时必须要有约定，避免其他人看不懂；在样式命名时从大类往小类命名，例如tab ,横向命名为.tab-horizontal ，纵向命名为.tab-vertical在产品线系统

10、总CSS文件（import多个样式）里书写个性化的样式3.2.1.1 门户型网站结构样式命名主框架：.main-frame、wrap头部区域：. head-panel最顶部 登陆 退出区 .top-menu、toplogo区域：.logo或者.logo-panel地市导航：.city-nav菜单导航区域：.nav-area、nav、nav-panel 或者.menu- panel、menu内容区域：.content-panel （页面主体） 根据具体的布局结构命名，比如：三列 .left-col（左侧列）.center-col (中侧列) .right-col（右侧列）两列 .left-col

11、 (左侧列) .right-col（右侧列）left-col左侧列通常包括：登录区login-area、子导航sub-navcenter-col中列通常包括：flash轮播区flash-area、帮助区help-panel客户品牌专区brand-panel、新闻动态news-panel、推荐专区recommend-panel底部区域：. foot-panel主要包括： .footlink（底部链接区域） .copyright（版权区域） .friendlink（友情链接）top-menulogocity-navhead-areacontent-area三列left-colcenter-colr

12、ight-colfoot-areafriendlinkfootlinkcopyrightcontent-area两列left-colright-col注：具体布局视情况而定3.2.1.2 产品线系统主要结构样式命名主框架：.main-frame主框架头部区：.top-panel主框架菜单与布局切换区： .menu-panel主框架内容区： .content-panel主框架左侧导航区：.nav-panel主框架右侧工作区：.work-panel主框架底部区：（如果需要添加）.foot-panel主框架布局切换区：.layerout主框架菜单区如果有下一级菜单：. sub-menu 主框架wor

13、kPanel查询区域：.add-tab-panelfoot-paneltop-panelmenu-panelcontent-panelnav-panelwork-panelsub-menulayeroutadd-tab-panel3.2.1.3 内容样式命名规则结构样式和内容样式尽量分开书写遇到多个内容样式的时候，先判断其从属关系(以menu为例)如果是子孙关系，则命名为.menu.style1，. menu.style2，. menu.style3如果是同级关系，则命名为.menu-style1，.menu-style2，.menu-style33.2.1.4 其他常用样式的命名或简写常用模

14、块的类名面包屑（当前位置区域）：.location table列表区大体可以分为两种类型：输入列表区：.import-table显示查询结果列表区：.result-table更多：.more-link(多于一种形式可以使用.more-link01,more-link02)。模块需要单独写“更多链接”的样式，则利用子选择关系.XXXX . more-link一些常用模块名的缩写文本输入框； txt， 标签 ； lab， 图象 img， 图片；pic， 列表框lst， 搜索:search滚动:scroll标签页:tab文章列表:list提示信息:msg小技巧:tips友情链接:friendlink加入:joinu