DIV企业命名参考


原文链接: DIV企业命名参考

网页内容类

  • 标题: title
  • 摘要: summary
  • 箭头: arrow
  • 商标: label
  • 网站标志: logo
  • 转角/圆角: corner
  • 横幅广告: banner
  • 子菜单: subMenu
  • 搜索: search
  • 搜索框: searchBox
  • 登录: login
  • 登录条:loginbar
  • 工具条: toolbar
  • 下拉: drop
  • 标签页: tab
  • 当前的: current
  • 列表: list

  • 滚动: scroll

  • 服务: service

  • 提示信息: msg

  • 热点:hot

  • 新闻: news

  • 小技巧: tips

  • 下载: download

  • 栏目标题: title

  • 热点: hot

  • 加入: joinus

  • 注册: regsiter

  • 指南: guide

  • 友情链接: friendlink

  • 状态: status

  • 版权: copyright

  • 按钮: btn

  • 合作伙伴: partner

  • 投票: vote

  • 左右中:left right center


注释的写法:

/* Footer /
内容区
/
End Footer */

id的命名:

  • 页面结构

    • 容器: container
    • 页头:header
    • 内容:content/container
    • 页面主体:main
    • 页尾:footer
    • 导航:nav
    • 侧栏:sidebar
    • 栏目:column
    • 页面外围控制整体布局宽度:wrapper
    • 左右中:left right center


  • 导航

    • 导航:nav
    • 主导航:mainbav
    • 子导航:subnav
    • 顶导航:topnav
    • 边导航:sidebar
    • 左导航:leftsidebar
    • 右导航:rightsidebar
    • 菜单:menu
    • 子菜单:submenu
    • 标题: title
    • 摘要: summary


  • 功能

    • 标志: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的命名:

  • 颜色:使用颜色的名称或者16进制代码,如

    • .red { color: red; }
    • .f60 { color: #f60; }
    • .ff8600 { color: #ff8600; }

  • 字体大小,直接使用"font+字体大小"作为名称,如

    • .font12px { font-size: 12px; }
    • .font9px {font-size: 9pt; }

  • 对齐样式,使用对齐目标的英文名称,如

    • .left { float:left; }
    • .bottom { float:bottom; }

  • 标题栏样式,使用"类别+功能"的方式命名,如

    • .barnews { }
    • .barproduct { }


  • 注意事项::

    • 一律小写;
    • 尽量用英文;
    • 不加中杠和下划线;
    • 尽量不缩写,除非一看就明白的单词.


【推荐的 CSS 书写顺序】:

  • 显示属性

    • display
    • list-style
    • position
    • float
    • clear

  • 自身属性

    • width
    • height
    • margin
    • padding
    • border
    • background

  • 文本属性

    • color
    • font
    • text-decoration
    • text-align
    • vertical-align
    • white-space
    • other text
    • content
`