常用的CSS命名规则:

头:header  内容:content/container 尾:footer 导航:nav 侧栏:sidebar
栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center
登录条:loginbar  标志:logo  广告:banner  页面主体:main  
热点:hot
新闻:news  下载:download  子导航:subnav  菜单:menu
子菜单:submenu  搜索:search  友情链接:friendlink  页脚:footer
版权:copyright  滚动:scroll  内容:content  标签页:tab
文章列表:list  提示信息:msg  小技巧:tips  栏目标题:title
加入:joinus  指南:guild  服务:service  注册:regsiter
状态:status  投票:vote  合作伙伴:partner
(二)注释的写法:
  /* Footer */
  内容区
  /* End Footer */
(三)id的命名:
(1)页面结构
  容器: container  页头:header  内容:content/container
  页面主体:main  页尾:footer  导航:nav
  侧栏:sidebar  栏目:column  页面外围控制整体布局宽度:wrapper
  左右中:left right center
(2)导航
  导航:nav  主导航:mainbav  子导航:subnav
  顶导航:topnav  边导航:sidebar  左导航:leftsidebar
  右导航:rightsidebar  菜单:menu  子菜单:submenu
  标题: title  摘要: summary
(3)功能
  标志: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
(四)class的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
  .red { color: red; }
  .f60 { color: #f60; }
  .ff8600 { color: #ff8600; }
(2)字体大小,直接使用’font+字体大小’作为名称,如
  .font12px { font-size: 12px; }
  .font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
  .left { float:left; }
  .bottom { float:bottom; }
(4)标题栏样式,使用’类别+功能’的方式命名,如
  .barnews { }
  .barproduct { }
注意事项::
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写,除非一看就明白的单词.
主要的 master.css  模块 module.css  基本共用 base.css
布局,版面 layout.css  主题 themes.css  专栏 columns.css
文字 font.css  表单 forms.css  补丁 mend.css  打印 print.css

DIV+CSS 命名规范的更多相关文章

  1. div+css命名规范大全

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率, 我们开发DIV+CSS网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么 ...

  2. [转]HTML DIV+CSS 命名规范大全

    原文链接 常用DIV+CSS命名大全集合,即CSS命名规则 我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. ...

  3. DIV+CSS命名规范-转载1

    命名规则说明: 1).所有的命名最好都小写 2).属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divc ...

  4. DIV+CSS命名规范-转载2

    一.CSS文件及样式命名1.CSS文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.c ...

  5. [html] 有利于seo优化的div+css命名规范

    搜索引擎优化(seo)对命名规范有很多要求,下面是我收集的一些当下主流的命名(还是比较常用的): CSS样式命名 说明 网页公共命名 #wrapper 页面外围控制整体布局宽度 #container或 ...

  6. Div+CSS命名规范

    注意事项:1.命名遵循驼峰式  2.尽量用中文  3.不加中杠和下划线   4.尽量不缩写,除非一看就明白的单词 头:header   标志:logo  友情链接:friendlink    内容:c ...

  7. div,css命名规范!

    命名规则说明: 1).所有的命名最好都小写 2).属性的值一定要用双引号("")括起来,且一定要有值如class="pcss5",id="pcss5& ...

  8. web前端开发CSS命名规范参考

    做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...

  9. 网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容如下:

    页头:header  如:#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法登录条:loginBar         标志:logo      ...

随机推荐

  1. python学习笔记——

    python线程的GIL GIL (全局解释器锁)python --- > 支持多线程 ----> 同步和互斥 --->加锁 --->解释器加锁 ————> 解释器同一时 ...

  2. bash 基本功能

    1 shell概述 shell是一个命令解释器,为用户提供了一个向Linux内核发送请求以便运行程序的界面系统级程序.用户可以用shell启动.挂起.停止甚至是编写一些程序. shell是一个功能强大 ...

  3. redhat 6.4 安装VirtualBox自动增强功能功:unable to find the sources of your current Linux kernel

    redhat 6.4 安装VirtualBox自动增强功能功能的时候提示: building the main Guest Additions module FAILED unable to find ...

  4. Workflow_标准控件Wait_For_Flow和Contiune_Flow的用法(案例)

    2014-06-04 Created By BaoXinjian

  5. explore your hadoop data and get real-time results

    deep api integration makes getting value from your big data easy 深度api集成使你大数据訪问更加easy Elasticsearch ...

  6. 兔子--eclipse设置编码格式

    设置编码格式 a:设置eclipse的默认编码格式:window->preferences->Workspace->Text File Encoding b:设置单个项目的编码格式: ...

  7. DataGridView在Cell编辑状态响应回车键下的KeyPress/KeyDown/KeyUp事件

    我们知道由于DataGridView的单元格DataGridCell处于编辑的时候,当你按Enter键,那么DataGridView是不会激发KewPress/KeyDown/KeyUp这些事件的,因 ...

  8. python标准库介绍——24 traceback 模块详解

    ==traceback 模块== [Example 2-18 #eg-2-18] 展示了 ``traceback`` 模块允许你在程序里打印异常的跟踪返回 (Traceback)信息, 类似未捕获异常 ...

  9. svn导出历史版本

    svn导出历史某一个版本,有时候想拷贝出项目某个版本的代码,又不希望覆盖现在的代码,需要用到导出历史版本 1.浏览历史版本    鼠标移到项目上右击显示: 2.选择显示日志,出现版本历史记录: 3.选 ...

  10. node-inspector调试报错问题处理

    使用node-inspector调试的时候,提示下面的异常,我的node版本是6.9.2出现下面的异常,我同事的版本4.2.1就没有这个问题. C:\Users\dzm>node-inspect ...