div+css样式表的id和class常用命名规则

所属分类: 网页制作 / CSS 阅读数: 1896
收藏 0 赞 0 分享
要是就几行或几十行代码吧!就根据英文单词就行了。可是要是多了那就不好写了,有时候就直接用汉语拼音或拼音的首字母代替。可是多了吧,自己写的都看不出是什么意思,别说再让程序员调用这些样式了。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的命名规则的话,请留言,多多指教.

更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

  利用CSS配合JavaScript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先,要搞清楚事件和动作的概念。在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互。例如,当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

  想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:   通过许多实际项目,
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间,但由于它控制参数较多,在实际应用时,为了确定一组合适的参数值,不得不反复调整修改,在编辑窗口和预览窗口来回倒腾,甚是麻烦,本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”,在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程:li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符: ul li{ list-style-type:none; } B).如果你想将列表符换成图像,则: ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位(position)

  使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。   其实,要想控制好层的绝对定位,只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

  如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

  在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果。   相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

  水平对齐(text-align),用以设定元素内文本的水平对齐方式。   1.语法   text-align具体参数如下: 语法:text-align:left|right|center|justify 说明:设定元素内文本的水平对齐方式。 参数:left:左
收藏 0 赞 0 分享
查看更多