div命名规范

1、Container、wrapper、wrap、page

将页面中的所有元素包在一起的部分。

2、Header、pageHeader、page-header

网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。

3、Navbar、nav、navigation、navwrapper

横向的导航栏，是最典型的网页元素。

4、Menu、subNav、links、sidebar-main

包含一般的链接和菜单。

5、Main、content、main-content、mainContent

网站的主要区域，如果是博客的话它将包含日志。

6、Sidebar、subNav、side-panel、secondary-content

可以包含网站的次要内容，比如最新更新内容列表、关于网站的介绍或广告元素等。

7、Footer、copyright

包含网站的一些附加信息

 

 

 

二.需要注意的几点:
1.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名.
如:red/left/big等。
2.组合命名规则:
[元素类型]-[元素作用/内容]
如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news
3.涉及到交互行为的元素命名:
凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:
鼠标悬停:：hover   点击：click   已浏览：visited
如:搜索按钮: btn-search、btn-search-hover、btn-search-visited

 

三、分类

(1)导航

 导航：nav　　主导航：mainbav　　子导航：subnav　   顶导航：topnav　　边导航：sidebar　　左导航：leftsidebar     右导航：rightsidebar　　

菜单：menu　　子菜单：submenu

标题: title　　摘要: summary

(2)功能

　　标志：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　　版权：copyright

 

 (3)class的命名

颜色:使用颜色的名称或者16进制代码,如

　　.red { color: red; }

　　.f60 { color: #f60; }

　　.ff8600 { color: #ff8600; }

字体大小,直接使用’font+字体大小’作为名称,如

　　.font12px { font-size: 12px; }

　　.font9pt {font-size: 9pt; }

对齐样式,使用对齐目标的英文名称,如

　　.left { float:left; }

　　.bottom { float:bottom; }

标题栏样式,使用’类别+功能’的方式命名,如

　　.barnews { }

　　.barproduct { }

(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)

 

颜色值的缩写：

当RGB三个颜色值数值相同时，可缩写颜色值代码。如：

.menu{color:#ff3333;}

可缩写为:

.menu{color:#f33;}