UI命名规范(10.01.24)

《UI命名规范(10.01.24)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、UI部门命名规范北京神州数码思特奇信息技术股份有限公司二〇一一年八月UI命名规范第22页共22页目录1文档的目录结构51.1门户型网站的目录结构51.2产品线系统的目录结构62DEMO布局方式72.1封装在一个WRAP层里：72.2头部、主体、底部各自独立73CSS样式命名83.1CSS文件命名83.1.1CSS文件命名83.2CSS类名、ID命名113.2.1CSS类名、ID命名114图片的命名规则184.1图片文件夹命名规则184.1.1门户型网站图片文件夹命名规则：184.1.2产品线系统的图片文件夹

2、命名规则184.2图片命名规则195注释的规则205.1Html注释205.2CSS样式注释205.3需要大量注释说明则建议采用：215.4JS的注释216JS命名规则226.1JS文件目录规则226.2JS文件命名规则226.3JS函数命名规则23UI命名规范第22页共22页UI命名规范第22页共22页1文档的目录结构1.1门户型网站的目录结构DEMO根目录npagesnjsnresourcesuisicommonyellowbluecssimagescssiconimagescssimagespictu

3、reblue.csscommon.csslayout.cssdtree.cssfenye.cssyellow.cssUI命名规范第22页共22页1.1产品线系统的目录结构DEMO根目录npagesnjsnresourcesuiIIsidefaultskin1/或其他名字cssimagescssimagesicon图标文件夹基于控件或模块的导入样式.csslogin.cssportal.cssframework.csscommon.css……以控件命名的样式.cssloginportalvalidatortr

4、ee其他通用图片UI命名规范第22页共22页1DEMO布局方式1.1封装在一个WRAP层里：头部主体内容底部封装在一个层里一般适用于门户型网站，对层的操作比较少的情况下1.2头部、主体、底部各自独立头部主体内容底部一般适用于公司产品线系统UI命名规范第22页共22页1CSS样式命名1.1CSS文件命名1.1.1CSS文件命名lCSS文件命名全部采用小写；l不要使用拼音作为文件的名称；l门户型网站的CSS文件命名按照现有的命名方式即可；l产品线系统的CSS命名：除了公用的common.css、framewor

5、k.css、reset.css等通用的样式以外，其他的样式文件以控件命名；1.1.1.1门户型网站样式命名在resourcescommoncss目录下lcommon.css：通用的样式，包括一些样式的重定义，链接的样式，表单的样式，字体的样式，通用分页的样式，通用的树样式等等；llayout.css：主要布局样式，网站主框架的布局，每个模块页面的布局样式等等；layout.css.head-panel{}…….menu-panel{}…….content-panel{}.content-panel.

6、left-col{}.content-panel.center-col{}.content-panel.right-col{}…….search-panel{}.location{}UI命名规范第22页共22页.foot-panel{}.foot-panel.footlink{}.foot-panel.copyright{}.foot-panel.friendlink{}……ldtree.css：网站通用树的样式lfenye.css：网站通用分页的样式在resourcesyellowcss或者r

7、esourcesbluecss目录下lyellow.css或者blue.css：相对于布局样式的外观样式，yellow.css是以黄色或橘黄色为主色系的样式、blus.css是以蓝色为主色系的样式注：yellow.css与blue.css对比 ：两者的主要区别在于风格的不同，大部分类的名称相同。1.1.1.1产品线系统结构样式命名在resourcesdefaultcss目录下lcommon.css：通用的样式，包括，链接的样式，表单的样式，字体的样式，通用分页的样式，通用的树样式，通用表格样式等

8、等；common.csshtml{……}body{……}h1,h2,h3,h4,h5,h6{……}table{}th{}td{}a:link{}a:visited{}a:hover{}a:active{}通用的表单元素样式其他通用的样式，例如：.loading{}.more-link{}.menu{}UI命名规范第22页共22页……lframework.css：系统主框架样式framework.css.top-p