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
