DIV+CSS常用的DIV标签命名规则

搜索引擎优化(seo)中，对代码的优化也是一个很关键的步骤。为了更加符合SEO的规范，下面是目前流行的CSS+DIV的命名规则：

DIV ID命名
-----------------------------------------------------
页眉:header
标志:logo
侧栏:sideBar
广告:banner
导航:nav
主导航:mainNav (globalNav)
子导航:subNav
顶导航:topNav
边导航:sideBar
边导航图标:sidebarIcon
左导航:leftsideBar
右导航:rightsideBar
菜单:menu
子菜单:subMenu
菜单1内容:menu1Content
菜单1容量:menu1Container
子菜单:submenu
滚动:scroll
商标:label
面包屑:breadCrumb(即页面所处位置导航提示)
容器:container
搜索:search
登陆:login
登录条:loginBar
用户名：username
密码：password
功能区:shop(如购物车，收银台)
当前的：current

----------------------------------------------------------------------------------------------
页面主体:main
主体左侧：left    col-left      ml(main_left)
主体中间：mid
主体右侧：right     col-auto   mr(main_right)
侧边栏：sidebar
新闻头条：news-hot
幻灯图片：FocusPic
盒子：box
内容:content  cont
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
友情链接:friendLink
图标：icon
------------------------------------------------------------------------------------------
页脚:footer
信息：info
链接：link
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyright

全局通用样式(phpcms v9)：
外套:wrap  wp
内容:content
注释:note
字体大小：f12  f14 f16 f18 f20
标题字高度：lh20  lh22  lh24 lh26 lh28
字加粗：fb{ font-weight:bold}.
字不加粗：fn{ font-weight:normal}
行间距：bk  bk3  bk6  bk8  bk10  bk15  bk20  bk30

样式文件命名
全站通用样式：style.css    common.css    general.css    global.css   public.css   base.css主页样式：index.css
顶部和底部样式：headTail.css
重复使用的样式(phpcms v9)： reset.css
布局版式设计样式：layout.css或container.css
投票页样式：vote.css
用户页样式：member.css
搜索页样式：search.css
专栏/频道样式：columns.css
打印输出样式：print.css
主题模板样式：themes.css

phpcms v9的全局通用样式表文件reset.css文件：
---------------------------------------------------------------------------------------
@charset "utf-8";
/* CSS Document */

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
margin:0;
padding:0;
word-wrap:break-word      /* 内容将在边界内换行*/
}
body, html, input {   
font:12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;       /* 定义body,html及输入框内文字为12号字，1.5倍行距*/
}  
table {
border-collapse:collapse;       /* 表格的两边框合并为一条*/
border-spacing:0;                 /* 相邻单元格的边框间的距离为0*/

}   img {
border:none       /* 定义图片无边框*/
}
pre {
white-space: pre-wrap;               /* css-3 */
white-space: -moz-pre-wrap;      /* Mozilla, since 1999 */
white-space: -pre-wrap;             /* Opera 4-6 */
white-space: -o-pre-wrap;          /* Opera 7 */
word-wrap: break-word;            /* Internet Explorer 5.5+ */
}         /* 定义预格式化的文本*/
h1, h2, h3, h4, h5, h6 {
font-size:100%;
}
input.dialog {
height:0;
height:0;
font-size:0;
line-height:0;
border:none
}
h1 {
font-size:34px;
}
h2 {
font-size:26px;
}
h3 {
font-size:18px;
}
h4 {
font-size:16px;
}
h5 {
font-size:14px;
}
h6 {
font-size:12px;
}
input, label, img, th {
vertical-align:middle;
}        /* 定义表单、标注、图片、表格标题垂直居中*/
.font-fixh {
font-family: Georgia, Arial;
color: #f00;
font-size: 16px;
font-weight: 700;
}
address, cite, dfn, em, var {
font-style:normal;
}       /* 定义此标签内字体正常显示*/
code, kbd, pre, samp {
font-family:courier new, courier, monospace;
}
input.button, input.btn {
padding:0.25em;
width: auto;
_width:0;
overflow:visible !ie;
}         /* 定义表单按钮样式*/
ul, ol, li {
list-style:none;           /* 定义列表不使用项目符号*/
}
a {
text-decoration:none;        /* 去掉下划线*/
}
a:hover {
text-decoration:underline;        /* 有下划线*/
}
.white, .white a {
color:#fff         /* 白色*/
}
.blue, .blue a {
color:#004499        /* 蓝色*/
}
.gray4, a.gray4 {
color:#999      /* 深灰色 */
}
.red, .red a, a.red {
color:red;      /* 红色*/
}
.green {
color:#0E774A      /* 绿色*/
}
select optgroup {
color:#CAC8BB;      /* 定义表单内标签组颜色为浅灰色*/
}
header {
display:block        /* 定义头部标签为块元素*/
}


/*通用样式*/
.hidden {
display:none;    /*不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失*/
}
.invisible {
visibility:hidden;  /*使对象在网页上不可见，但该对象在网页上所占的空间没有改变*/
}
.ib, .ib-a a {
display:inline-block;
zoom:1;
*display:inline;
}
.clear:after, .main:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clear, .main {
display:inline-block;
}                              /* Hides from IE-mac \*/
* html .clear, * html .main {
height:1%;
}
.clear, .main {
display:block;
}
.f12 {
font-size: 12px
}
.f14 {
font-size: 14px
}
.f16 {
font-size: 16px
}
.f18 {
font-size:18px
}
.f20 {
font-size:20px
}
.lh20 {
line-height: 20px               /* 行高*/
}
.lh22 {
line-height: 22px
}
.lh24 {
line-height: 24px
}
.lh26 {
line-height: 26px
}
.lh28 {
line-height: 28px
}
.fb {
font-weight:bold        /* 文字加粗*/
}
.fn {
font-weight:normal        /* 文字不加粗*/
}
.bk, .bk3, .bk6, .bk8, .bk10, .bk15, .bk20, .bk30 {
clear: both;
font-size: 1px;
height: 0;
line-height: 1px
}
.bk3 {
height: 3px;            /* 高度*/
}
.bk6 {
height: 6px
}
.bk8 {
height: 8px
}
.bk10 {
height: 10px
}
.bk15 {
height: 15px
}
.bk20 {
height: 20px
}
.bk30 {
height: 30px
}
.row-2 li {
float:left;
width:50%
}
.row-3 li {
float:left;
width:33%
}
.row-4 li {
float:left;
width:25%
}
.row-5 li {
float:left;
width:20%
}
.cu, .cu-li li, .cu-span span {
cursor: hand;
!important;
cursor: pointer
}
.text-c {
text-align: center            /* 文字居中*/
}
.text-l {
text-align: left            /* 文字左对齐*/
}
.text-r {
text-align: right             /* 文字右对齐*/
}
.lf {
float: left             /* 左浮动*/
}
.rt {
float: right           /* 右浮动*/
}  
.pr {
position:relative              /* 相对定位*/
}
.pa {
position:absolute             /* 绝对定位*/
}
.img-wrap {
border:1px solid #eee;
text-align:center;
overflow:hidden
}
.img-wrap a {
display:table-cell;
vertical-align:middle;
*display:block;
overflow:hidden;
background-color:#fff
}
.img-wrap a:hover {
background-color:#e8eff6
}
.col-left {
float:left     /* 左浮动*/
}
.col-auto {
overflow:hidden;
_zoom:1;
_float:left;
}
.col-right {
float:right         /* 右浮动*/
}
---------------------------------------------------------------------------------------