CSS规范命名.doc

常用CSS命名参考 在XHTML中定义ID、CLASSS都用得上，主要是方面CSS定义样式时能一眼看穿。所以，CSS命名仅作参考。(1)页面结构类容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper (2)导航类导航：nav 主导航：mainnav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 位置导航： crumb 菜单：menu 子菜单：submenu 面包屑：breadcrumb(即页面所处位置导航提示）(3)网页内容类标题: title 摘要: summary箭头： arrow 商标： label 网站标志： logo 转角/圆角： corner 横幅广告： banner栏目： column 子菜单： subMenu 搜索： search 搜索框： searchBox 登录： login 工具条： toolbar 下拉： drop 标签页： tab 当前的： current 列表： list 滚动： scroll 服务： service 提示信息： msg 新闻： news 小技巧： tips 下载： download 栏目标题： title 热点： hot 加入： joinus 注册： regsiter 指南： guide 友情链接： friendlink 状态： status 版权： copyright 按钮： btn 合作伙伴： partner 投票： vote1. Container “container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“. 2. Header “header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“header” (或 pageHeader). 3. Navbar “navbar“等同于横向的导航栏，是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”. 4. Menu “Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”. 5. Main “Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content” (或“mainContent”)。 6. Sidebar “Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“. 7. Footer “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 三.Photoshop图层结构规范: Photoshop图层命名遵循树形结构，凡某元素组成的图层大于3层，即可形成组，所有图层尽量避免使用默认命名(图层+编号)。 图层命名结构 四．常用命名汇总: 站点：site 首页：homepage 当前位置：currentPath 二级页面/子页面：subpage 布局：layout 搜索：search 网页头部：head/header 登录条:loginbar 标志:logo 侧栏：side/sidebar 广告条:banner 导航:nav 主 导 航：mainNav 顶