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
- 容器: container
导航
- 导航：nav
- 主导航：mainbav
- 子导航：subnav
- 顶导航：topnav
- 边导航：sidebar
- 左导航：leftsidebar
- 右导航：rightsidebar
- 菜单：menu
- 子菜单：submenu
- 标题: title
- 摘要: summary
- 导航：nav
功能
- 标志：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
- 标志：logo
class的命名:
颜色:使用颜色的名称或者16进制代码,如
- .red { color: red; }
- .f60 { color: #f60; }
- .ff8600 { color: #ff8600; }
- .red { color: red; }
字体大小,直接使用"font+字体大小"作为名称,如
- .font12px { font-size: 12px; }
- .font9px {font-size: 9pt; }
- .font12px { font-size: 12px; }
对齐样式,使用对齐目标的英文名称,如
- .left { float:left; }
- .bottom { float:bottom; }
- .left { float:left; }
标题栏样式,使用"类别+功能"的方式命名,如
- .barnews { }
- .barproduct { }
- .barnews { }
注意事项::
- 一律小写;
- 尽量用英文;
- 不加中杠和下划线;
- 尽量不缩写，除非一看就明白的单词.
- 一律小写;
【推荐的 CSS 书写顺序】：
显示属性
- display
- list-style
- position
- float
- clear
- display
自身属性
- width
- height
- margin
- padding
- border
- background
- width
文本属性
- color
- font
- text-decoration
- text-align
- vertical-align
- white-space
- other text
- content
- color