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