DIV+CSS命名规范.docx

DIV+CSS规范命名大全集合页头：header 如：#header属性:属性值;或.header属性:属性值;,也许你需要了解class与id区别及用法登录条：loginBar 标志：logo 侧栏：sideBar 广告：banner 导航：nav 子导航：subNav菜单：menu 子菜单：subMenu 搜索：search滚动：scroll 页面主体：main 内容：content 标签页：tab 文章列表：list 提示信息：msg小技巧：tips 栏目标题：title 加入：joinus指南：guild 服务：service 热点：hot新闻：news 下载：download 注册：regsiter 状态：status 按钮：btn 投票：vote 合作伙伴：partner 友情链接：friendLink 页脚：footer 版权：copyRight 常用配合标签div、h1、h2、h3、h4、span、em、b、strong、font、u1.CSS的 ID 的命名 也许你需要了解class与Id区别外套：wrap 主导航：mainNav 子导航：subnav 页脚：footer 整个页面：content 页眉：header 版 权：copyRight 商标：label 标题：title 主导航：mainNav(globalNav) 顶导航：topnav 边导航：sidebar 左导航：leftsideBar 右导航：rightsideBar 旗志：logo 标语：banner 菜单内容1： menu1Content 菜单容量：menuContainer 子菜单：submenu 边导航图标：sidebarIcon 注释：note 面包屑：breadCrumb(即页面所处位置导航提示) 容器：container 内容：content 搜索：search登陆：login 功能区：shop(如购物车，收银台) 当前：currentDIV+CSS命名小结：无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”(井号)选择符号开头命名都无所谓，但我们最好遵循，主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名，同时考虑命名的CSS选择器在HTML中重复使用调用。通常我们最常用主要命名有：wrap（外套、最外层）、header（页眉、头部）、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1h2h3h4标签使用)、content (内容区)、footer(页脚、底部)、logo（标志、可以配合h1标签使用）、banner（广告条，一般在顶部）、copyRight（版权）。其它可根据自己需要选择性使用。DIVCSS5建议：主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名。css文件命名1)如果是一个小型网站或一个企业网站，只要一个css文件,一般取名为:style.css/main.css/layout.css2)如果是个大型的门户网站，css一般分三个文件区分出来,用的最常用的css和公共部分的css 放在common.css;一些主要的其他css放在 content.css;字体放在font.css主要的:master.css专栏:columns.css主题:themes.css全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；模块 module.css基本共用 base.css表单 forms.css补丁 mend.cssCSS命名规则(1)页面结构首页:homepage二级页面:subpage标签页:tab博客:bolg论坛:forum/bbs外套：wrapper容器：container/box内 容：content页面头部：header页面主体:main页面中部：mainBody页面底部：footer侧 栏：sidebar栏目：column左右中：left right center(2)导航导航:nav主导航：mainnav/globalnav子导航：subnav顶导航：topnav(3)侧栏侧边栏：sidebar左侧栏：leftsidebar右侧栏：rightsidebar左右两栏 sidebar_l/sidebar_r或者leftsidebar/rightsidebar左/中/右三栏 main_left/main_mid/main_right或者main_l/main_m/mian_r(4)菜单菜单：menu菜单内容：menucontent子菜单：subMenu子菜单内容：subMenuContent(5)栏目栏目：column列定义：column_1of3(三列中的第一列) column_2of3(三列中的第二列) column_3of3(三列中的第三列)(6)文章文章列表:list标题：title时间:time日期:data摘要:summary内容：content(7)登录登录条:loginbar登录：login(8)搜索搜索：search热门搜索:hotsearch关键字：keyword搜索范围：range(9)产品产品:products/pro缩略图:screenshot产品价格:pro_prices产品描述:pro_description产品评论:pro_review编辑评论:editor_review最新产品:news_release/newspro生产商:publisher(10)图标图标：icon边导航图标：sidebarIcon(11)标签标签文字：tagTitle标签内容：tagContent当前标签：tagCurrent/currentTag(12)页面底部合作伙伴：partner友情链接：friendlink版权：copyright(13)功能网站标志：logo广告：banner按钮：button/btn滚动：scroll提示信息:message/msg服务：service指南：guid热点：hot新闻：news下载：download会员:member注册:regsiter状态:status忘记密码:foreget_password投票：vote 注释：note面包屑:breadCrumb(即页面所处位置导航提示)功能区：shop(如购物车，收银台)当前的：current当前位置：currentPath小技巧:tips网站信息:siteinfo网站地图:sitemap加入我们:joinus关于我们:aboutus联系我们:contantus网站帮助:sitehelp常见问题:faq法律声明:siteinfolegal信誉:siteinfocredits箭头:arrow/arr工具条:toolbar/tool放大:zoom关于语义化的一些建议:在开始之前，我想推荐两种简单的编写较好的CSS代码的指导方针:为CSS类名定义的时候，尽量使用小写字母，如果有两个以上的单词，在每个单词之间使用”-”符或单词首字母大写(第一个单词除外)。如:”main-content”或”mainContent”。优化CSS代码，仅创建关键主要的CSS类并重新为子元素使用符合HTML标准的标签(h1, h2, p, ul, li, blockquote,)，例如,不要使用这种哦你那个方式: 而要这样写:Web UI 设计命名规范1. Container“container“ 就是将页面中的所有元素包在一起的部分,这部分还可以命名为: “wrapper“, “wrap“,“page“.2. Header“header” 是网站页面的头部区域,一般来讲,它包含网站的logo和一些其他元素。这部分还可以命名为:“page-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-news3.涉及到交互行为的元素命名:凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式,命名可参考以下规则:鼠标悬停:hover 点击:click 已浏览:visited如:搜索按钮: btn-search、btn-search-hover、btn-search-visited图层命名结构四.常用命名汇总:页头:header登录条:loginbar标志:logo侧栏:sidebar广告条:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu下拉菜单:dropMenu工具条: toolbar表单:form栏目:column箭头:arrow搜索:search搜索按钮:btn-search滚动条:scroll内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:title链接