# 网页内容类
-
标题: 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