用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的命名规则的话,请留言,多多指教.
文章轉載自:http://www.oecp.cn/hi/listly/blog/220
分享到:
相关推荐
所以就开始查一些相关的div+css样式表id和class的常用命名规则,请大家参考一下: 首先讲一下div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar ...
2.8.3 外部样式表 2.9 样式优先权问题 2.9.1 写法优先权 2.9.2 选择符优先权 2.9.3 样式继承 2.9.4 !important语法 2.10 代码注释 2.11 CSS开发环境与调试环境 第3章 CSS网页布局与定位 3.1 认识div 3.1.1 div是什么...
修改栏目排序时,避免ClassID的前面某几位为0时,传递参数过程中会把字符串当作整数传递,导致丢失前面几位,无法实现权重排序 修改总站导航标签荣誉代码造成无法正常显示 修改归档新闻查询链接地址错误 修改新闻...
修改栏目排序时,避免ClassID的前面某几位为0时,传递参数过程中会把字符串当作整数传递,导致丢失前面几位,无法实现权重排序 修改总站导航标签荣誉代码造成无法正常显示 修改归档新闻查询链接地址错误 修改新闻...
修改栏目排序时,避免ClassID的前面某几位为0时,传递参数过程中会把字符串当作整数传递,导致丢失前面几位,无法实现权重排序 修改总站导航标签荣誉代码造成无法正常显示 修改归档新闻查询链接地址错误 修改新闻...
15.3.1 “可替换样式表”和“偏好样式表” 15.3.2 指定外部样式表 15.3.3 样式表的声明语句 15.3.4 使用http消息报头链接到样式表 15.4 层迭样式表 15.4.1 基于介质的层迭 15.4.2 继承和层迭 15.5 隐藏样式数据 15.6...
14.4 常用样式表属性 14.4.1 计量单位 14.4.2 使用颜色 14.4.3 使用字体 14.4.4 使用文本 14.4.5 使用背景和图片 14.4.6 使用边距和边框 14.5 样式表类型 14.5.1 嵌入式...
修改栏目排序时,避免ClassID的前面某几位为0时,传递参数过程中会把字符串当作整数传递,导致丢失前面几位,无法实现权重排序 修改总站导航标签荣誉代码造成无法正常显示 修改归档新闻查询链接地址错误 修改新闻...
修改栏目排序时,避免ClassID的前面某几位为0时,传递参数过程中会把字符串当作整数传递,导致丢失前面几位,无法实现权重排序 修改总站导航标签荣誉代码造成无法正常显示 修改归档新闻查询链接地址错误 修改新闻...
CSS大家很熟悉了,全称是Cascading Style Sheets(层叠样式表),是目前用来在浏览器上显示XML文档的主要方法。 3.Behaviors Behaviors现在还没有成为标准。它是微软的IE浏览器特有的功能,用它可以对XML标识设定...
同时,将ASP.NET中的页面样式代码和逻辑处理代码分离能够让维护变得简单,同时代码看上去也非常的优雅。在.aspx页面中,代码隐藏页模型的.aspx页面代码基本上和单文件页模型的代码相同,不同的是在script标记中的单...