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;}