css3技术

css命名规则:图片切图转网页的代码规范_div+css教程

字号+ 作者:H5之家 来源:H5之家 2015-09-15 14:19 我要评论( )

css命名规则:图片切图转网页的代码规范,学习css命名规则:图片切图转网页的代码规范,css命名规则:图片切图转网页的代码规范,查看css命名规则:图片切图转网页

  网上整理的比较好的css命名规则,为css代码的规范化做参考,增加代码的可读性。


  id的命名:


  (1)页面结构


  容器: container 页头:header 内容:content/container


  页面主体:main 页尾:footer 导航:nav


  侧栏:sidebar 栏目:column 左右中:left right center


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


  (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进制代码,如


  .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.不使用大写形式的类名和id名;


  2.尽可能使用描述性的英文单词的组合作为类名和id名;


  3.id名及类名的多个英文单词之间使用“_”短横线分隔;


  4.按区域进行描述编号 例:main01_div01_ul01 (可以理解为主体第一区域 第一DIV下的第一个UL)


  附:一些CSS框架的命名参考


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


  主题 themes.css 专栏 columns.css 打印 print.css


  文字 font.css 表单 forms.css 补丁 mend.css


  布局,版面 layout.css

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评