刘雷的个人博客

欢迎使用Z-Blog,有问题或意见请到Zblogger.BBS社区反馈,谢谢您的参与使用。

« 名片解决IE6下png图片半透明问题 »

网页标准化-CSS命名规划整理

一) 常用的CSS命名规则:
头:header


内容:content/container


尾:footer

导航:nav
侧栏:sidebar
栏目:column

页面外围控制整体布局宽度:wrapper


左右中:left\right\center 
登录条:loginbar


标志:logo
广告:banner 
页面主体:main


热点:hot
新闻:news

下载:download 
子导航:subnav


菜单:menu 
子菜单:submenu


搜索:search 
友情链接:friendlink
页脚:footer 
版权:copyright

滚动:scroll

内容:content


标签页:tab

文章列表:list 
提示信息:msg

小技巧:tips
栏目标题:title


加入:joinus 
指南:guild

服务:service


注册:regsiter


状态:status

投票:vote
合作伙伴:partner 
(二) 注释的写法:


/*Footer*/
内容区 
/*EndFooter*/ 
(三) id的命名:


(1)页面结构


容器:container
页头:header


内容:content/container

页面主体:main

页尾:footer

导航:nav

侧栏:sidebar 
栏目:column
页面外围控制整体布局宽度:wrapper

左右中:left\right\center


(2)导航:

导航:nav 
主导航:mainbav


子导航:subnav 
顶导航:topnav


边导航:sidebar
左导航:leftsidebar

右导航:rightsidebar
菜单:menu 
子菜单:submenu
标题:title


摘要:summary
(3)功能:

标志:logo 
广告:banner

登陆:login
登录条:loginbar
注册:regsiter 
搜索:search 
功能区:shop
标题:title 
加入:joinus

状态:status


按钮:btn

滚动:scroll
标签页:tab

文章列表:list 
提示信息:msg 
当前的:current
小技巧:tips


图标:icon


注释:note

指南:guild

服务:service
热点:hot 
新闻:news


下载:download

投票:vote
合作伙伴:partner

友情链接:link
版权:copyright 
(四) class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如:
Copy code
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600;} 


(2)字体大小,直接使用“font+字体大小”作为名称,如:
Copy code
.font12px { font-size: 12px; }
.font9pt { font-size: 9pt; }


(3)对齐样式,使用对齐目标的英文名称,如:
Copy code
.left { float: left; }
.bottom { float: bottom; }


(4)标题栏样式,使用”类别+功能”的方式命名,如:
Copy code
.barnews {}
.barproduct {}


(五) 文件名命名:

主要的:master.css 
模块:module.css
基本共用:base.css


布局,版面:layout.css
主题:themes.css 
专栏:columns.css
文字:font.css
表单:forms.css 
补丁:mend.css


打印:print.css
(六) 注意事项:
(1)一律小写。

(2)尽量用英文。

(3)不加中杠和下划线。
(4)尽量不缩写,除非一看就明白的单词。
  • 相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

Powered By Z-Blog 1.7 Laputa Build 70216

Copyright 2007.