收集于网络的Web Standard规范化CSS+XHTML命名参考

CSS命名规则

  头:header 
  内容:content/containe 
  尾: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
 
XHTML文件中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
 
XHTML文件中class的命名

(1)颜色:使用颜色的名称或者16进制代码,如(不建议以表现来命名)
  .red { color: red; } 
  .f60 { color: #f60; } 
  .ff8600 { color: #ff8600; } 
(2)字体大小,直接使用"font+字体大小"作为名称,如 
  .font12px { font-size: 12px; } 
  .font9pt {font-size: 9pt; } 
(3)对齐样式,使用对齐目标的英文名称,如 
  .left { float:left; } 
  .bottom { float:bottom; } 
(4)标题栏样式,使用"类别+功能"的方式命名,如
  .barnews { } 
  .barproduct { } 

其它相关注意事项 

  1.一律小写; 
  2.尽量用英文; 
  3.不加中杠和下划线; 
  4.尽量不缩写,除非一看就明白的单词. 
    主要的 master.css 
    模块 module.css 
    基本共用 base.css 
    布局,版面 layout.css 
    主题 themes.css 
    专栏 columns.css 
    文字 font.css 
    表单 forms.css 
    补丁 mend.css 
    打印 print.css 
 
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值