zoukankan      html  css  js  c++  java
  • 常用的CSS命名规则 (web标准化设计)

    常用的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
     
     

  • 相关阅读:
    Effective Java 第三版——26. 不要使用原始类型
    Effective Java 第三版——25. 将源文件限制为单个顶级类
    Effective Java 第三版——24. 优先考虑静态成员类
    Effective Java 第三版——23. 优先使用类层次而不是标签类
    Effective Java 第三版——22. 接口仅用来定义类型
    Effective Java 第三版——21. 为后代设计接口
    Effective Java 第三版——20. 接口优于抽象类
    Effective Java 第三版——19. 如果使用继承则设计,并文档说明,否则不该使用
    Effective Java 第三版——18. 组合优于继承
    Effective Java 第三版——17. 最小化可变性
  • 原文地址:https://www.cnblogs.com/xugang/p/837653.html
Copyright © 2011-2022 走看看