常用的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. 如何利用JConsole观察分析JAVA程序的运行

    今天在CSDN看到一朋友说关于对JVM的研究,正好看到有关于jconsole的文章,特意找了下资料,留着备用 ps:jconsole建议用JDK1.6的1.5的界面太简陋了,另外还有增强版jvisua ...

  2. OGG_GoldenGate数据传递文件Trial(案例)

    2014-03-05 Created By BaoXinjian

  3. Eclipse编译快捷键

    从C#转学Java,总结了一些Eclipse跟Microsoft Visual Studio 向对应的快捷键: 1. Run Ctrl+F11    (VS对应的是F5) 2. Debug F11 ( ...

  4. ES6 class setTimeout promise async/await 测试Demo

    class Person { async getVersion () { return new Promise((resolve, reject) => { setTimeout(functio ...

  5. selenium grid2 使用远程机器的浏览器

    下载 selenium-server-standalone-3.4.0.jar包 在selenium-server-standalone-3.4.0.jar包目录下面执行cmd 命令 java -ja ...

  6. 使用国内镜像composer安装laravel

    1.安装 Laravel,创建blog项目 首先先说一下直接安装的方法,要想使用这个方法,首先要FQ(这是我们的基本国情决定的).这样的安装方式有两种: ①.全局安装 使用命令Laravel Inst ...

  7. cocos2dx 3.x ccPositionTextureColor_vert与ccPositionTextureColor_noMVP_vert

    在cocos2dx 2.x中,如果我们要对sprite更换片段shader,写成: myProgram->initWithByteArrays(ccPositionTextureColor_ve ...

  8. FreeBSD搭建SVN服务器

    我最喜欢使用的OS就是FreeBSD,而且现在刚好有一台FreeBSD服务器,所以我想把我的SVN服务器迁移到FreeBSD上,再配合hudson和ant就可以自动编译了. 第一步:安装svn: 在安 ...

  9. kafka工作原理简介

    消息队列 消息队列技术是分布式应用间交换信息的一种技术.消息队列可驻留在内存或磁盘上, 队列存储消息直到它们被应用程序读走.通过消息队列,应用程序可独立地执行--它们不需要知道彼此的位置.或在继续执行 ...

  10. Mac 下的矢量图设计工具

    Mac 下的矢量图设计工具 一图胜千言.一张清晰的示意图无论对于系统设计,流程梳理,还是其他的方方面面,都非常重要. 曾经亲见一位老同事把 FreeHand 这个矢量绘图工具用得出神入化,并且非常成功 ...