div+css3中id和class的命名

文章来源:http://www.jb51.net/css/22091.html

      用div+css样式表写页面有一段时间了,起初写div+css样式表的时候,最让我头疼的不是怎么写样式,而是给div+css样式起名,怎么样起才合适呢?要是就几行或几十行代码吧!就根据英文单词就行了。可是要是多了那就不好写了,有时候就直接用汉语拼音或拼音的首字母代替。可是多了吧,自己写的都看不出是什么意思,别说再让程序员调用这些样式了。div+css样式表的id和class的区别:就一句来概括, class可以定义多个值并且可以应用到多个标签上,但id只能是一个。所以就开始查一些相关的div+css样式表id和class的常用命名规则,请大家参考一下:

  首先讲一下div+css样式表的id的常用命名规则如下表所示:

页头 header 登录条 loginBar 标志 logo
侧栏 sideBar 广告 Banner 导航 nav
子导航 subNav 菜单 menu 子菜单 subMenu
搜索 search 滚动 scroll 页面主体 main
内容 content 标签页 tab 文章列表 list
提示信息 msg 小技巧 tips 栏目标题 title
加入 joinus 指南 guild 服务 service
热点 hot 新闻 news 下载 download
注册 regsiter 状态 status 按钮 btn
投票 vote 合作伙伴 partner 友情链接 friendLink
页脚 footer 版权 copyRight    

   实际上上面的 div+css样式表 的id命名也会经常用大小写和_来区分,比如主导航就是MainNav,如果还有必要在区分就是MainNav_1,MainNav_2等等。也可以使用"类型+变量名称"的规则来命名,比如写一个红色字体的class,可以.f_red {}(f是font 字体的缩写)。总之原则是:大小写、_、缩写,大大增强代码的可读性。


  再讲一下div+css样式表的class的常用命名规则如下表所示:

 外 套 wrap 主导航 mainNav 子导航 subnav
页 脚 footer 整个页面 content 页 眉 header
商 标 label 标 题 title 主导航 mainNav
边导航 sidebar 左导航 leftsideBar 右导航 rightsideBar
旗 志 logo 标 语 banner 菜单内容 menu1Content
菜单容量 menuContainer 子菜单 submenu 边导航图标 sidebarIcon
注释 note 面包屑 breadCrumb 容器 container
内容 content 搜索 search 登陆 login
功能区 shop 当前的 current    

  当然像 div+css样式表 的id和class的命名远远不止这些,可能还会有更多的命名,你可以用一些通俗的易懂.容易理解的一些来命名,如果您有更好的 div+css样式表 的id和class的命名规则的话,请留言,多多指教.
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值