# 网页内容类

• 标题: 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