你对DIV+CSS命名规则是否了解，这里和大家分享一下，首先看一下常用代码结构，div：主要用于布局，分割页面的结构；ul/ol：用于无序/有序列表。
DIV+CSS命名规则
常用代码结构：
div：主要用于布局，分割页面的结构
ul/ol：用于无序/有序列表
span：没有特殊的意义，可以用作排版的辅助，例如：
然后在css中定义span为右浮动，实现了日期和标题分两侧显示的效果
h1-h6：标题
h1-h6 根据重要性依次递减
h1位最重要的标题
◆label：为了使你的表单更有亲和力而且还能辅助表单排版的好东西，例如：
- <label for="user-password">密 码label>
- <input type="password" name="password"
- id="user-password" />
◆fieldset & legend：fildset套在表单外，legend用于描述表单内容。例如：
- <form>
- <fieldset>
- <legend>titlelegend>
- <label for="user-password">密 码label>
- <input type="password" name="password" id="user-password" />
- fieldset>
- form>
◆dl,dt,dd：当页面中出现***行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签，例如：
- <dl>
- <dt>什么是CSS?dt>
- <dd>CSS就是一种叫做样式表（stylesheet）的技术。
- 也有的人称之为层叠样式表（Cascading Stylesheet）。<dd>
- <dt>什么是XHTML？dt>
- < dd>XHTML是一个基于XML的置标语言，看起来与HTML有些想像，
- 只有一些小的但重要的区别。可以这样看，
- XHTML就是一个扮演着类似 HTML的角色的XML。本质上说，
- XHTML是一个桥接（过渡）技术，
- 结合了XML（有几分）的强大功能及HTML（大多数）的简单特性。dd>
- dl>
C #content
S #subcol
M #maincol
X #xcol
这是纵向布局的XHTML结构，c-smx表示网页有三个纵栏, c-sm表示有两个纵栏, c-mx表示有两个纵栏其中一个是附属的, c-m表示一个纵栏。
其中在三纵栏的布局需要分为两层 ***层是#subcol与#main第二层是#main中的#maincol与#xcol。#p#
（一）自定义命名：
根据w3c网站上给出的,***是用意义命名
比如：是重要的新闻高亮显示（像红色）
有两种
◆red{color:red}
◆important-news{color:red}
很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字
(二)注释的写法:
/*Footer*/
内容区
/*EndFooter*/
(三)id的命名:
(1)页面结构
容器:container 页头：header 内容：content/container
页面主体：main 页尾：footer 导航：nav
侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper
左右中：leftrightcenter
(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 版权：copyrigh。t#p#
(四)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
◆DIV排版的核心：即CSS盒子模式
CSS每个div盒子模式包括：内容(content)、填充(padding)、边框(border)、边界(margin)
【编辑推荐】
