[TOC]
## 一些注意
1. 页面编码规范
1.1. 统一使用 UTF-8 编码,用@charset "utf-8"指定页面编码。
1.2. 全局字体设置:
windows 7系统:微软雅黑 Arial;
windows XP及以下:新宋体,宋体,Arial
MAC默认字体:Helvetica Neue和Helvetica Hiragino Sans GB。
font-family:"Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53";
1.3. 中文字体使用编码转换,请参阅下节“中文字体css编码转换”
1.4. 推荐使用216web安全色
2. 属性写在一行内,属性之间、属性名和值之间以及属性与“{}”之间应减少空格,去掉最后一个“;”,例如:.class{width:200px;height:100px}
3. 属性的书写顺序:
3.1. 按照元素模型由外及内,由整体到细节书写,大致分为五组:
位置:position,left,right,float
盒模型属性:display,margin,padding,width,height
边框与背景:border,background
段落与文本:line-height,text-indent,font,color,text-decoration,...
其他属性:overflow,cursor,visibility,...
3.2. 针对特殊浏览器的属性,应写在标准属性之前,例如:-webkit-box-shadow:;-moz-box-shadow:;box-shaow:;
4. 带有前缀的属性,单独一行,通过缩进,让每个属性的值垂直对齐,方便编辑维护。
5. 谨慎添加新的选择符规则,尤其不可滥用 id,尽可能继承和复用已有样式
6. 选择符、属性、值均用小写(格式的颜色值除外),缩写的选择符名称须说明缩写前的全称,例如 .cl -> Clearfix
7. 避免使用各种CSS Hack,如需对 IE 进行特殊定义,请参阅下节“关于 CSS Hack 的说明”
8. 勿使用冗余低效的 CSS 写法,例如:ul li a span{... }
9. 慎用 !important
10. 建议使用具有语义化的classname或id,请参阅下节“css命名规范”。
11.避免使用兼容性不好的使用滤镜
12.开发过程中的未定事项,须用 [!] 标出,以便于后续讨论整理。
13.注释格式,统一使用双斜杠加*。
14.上下模块之间的间距统一使用下一个模块的margin-top来实现,好处是:如果没有下一个模块也不会多出一段空隙。
15.hover,selected,disabled,current等具有特定意义的请勿直接占用。
16.:link :visited :hover :active书写顺序 L-V-H-A,速记:LoVe(喜欢)HAte(讨厌)。
17.不要使用 @import
## 中文字体css编码转换
~~~
微软雅黑 \5FAE\8F6F\96C5\9ED1 或 Microsoft YaHei
黑体 \9ED1\4F53
新宋体 \65b0\5b8b\4f53
宋体 \5b8b\4f53
~~~
**命名**
~~~
1. 内容优先,表现为辅
2. css命名中英文对照
current 当前 hover 悬停 selected 挑选 disabled 禁用 focus 得到焦点
blur 失去焦点 checked 勾选 success 成功 error 出错
header(hd) 头部 content(cnt) 内容 title(tit) 标题 item 项目(条)
cell 单元 image/pic(img) 图片 text(txt) 文字 top 顶部 scrubber 时序菜单
nav 导航 mainbav 主导航 subnav 子导航 topnav 顶部导航
breadcrumb 面包屑导航 flink 友情链接 footer 尾 copyright 版权
menu 菜单 submenu 子菜单 dropdown 下拉菜单
searchBar 搜索条 search 搜索条 searchTxt 搜索框
searchBtn 搜索按钮 search_key 搜索词
member 会员 ucenter 用户中心 loginBar 登陆条
login 登录 loginBtn 登录按钮 regsiter 注册按钮
btn-regsiter注册按钮 name 用户名 password 密码
nickname 昵称 mobilephone/mobile 手机
telephone/tel 电话 defaultavatar 默认头像
hot 热点 news 新闻 banner/AD 广告 download 下载
content 内容 title 标题 summary 摘要 time 时间
share 分享 digg 顶 like 喜欢
list 列表 pList 图片列表 tList 文字列表 tpList 图文列表
table 表格 row 行 column 列 gutter 间隔 viewport 视口
tab 标签 tags 标签 scroll 滚动
sidebar 侧边栏 column 栏目 section 区块 msg 提示信息
status 状态 vote 投票 tips 小技巧 guild 指南 note 注释
icon- 图标 btn- 按钮
goods 商品 goodsList 商品列表 goodsDetail 商品详情 goodsInfo 商品信息
tuan 团购 tuanList 团购列表 tuanDetail 团购详情 tuanInfo 团购信息
transition 动画 shadow 阴影 fade 淡入淡出 flip 翻页效
slide 滑动 slideup 上滑动 slidedown 下滑动 turn 翻页
horizontal 水平 vertical 垂直 collapsible 折叠 corners 拐角
flow 流 reverse 反向 pop 弹窗
count 总数/计数 plus 加号/正 minus 减号/负 controlgroup 控制组
~~~
## 页面命名
~~~
default/index.html 首页
404.html 404错误页
print.html 打印页
header.html 页头
footer.html 页脚
sitemap.html 网站地图
passport.html 通行证
rank.html 排行榜
roll.html 滚动新闻
solution.html 解决方案
joinus.html 加入我们
partner.html 合作伙伴
service.html 服务
aboutus.html 关于我们
contact.html 联系我们
company.html 公司介绍
organization.html 组织结构
culture.html 企业文化
strategy.html 发展策略
honor.html 公司荣誉
aptitudes.html 企业资质
events.html 大事记
business.html 商务合作
contract.html 服务条款
privacy.html 隐私声明
CSR.html 企业社会责任
news-开头.html 新闻相关
article-开头.html 资讯相关
picture-开头.html 图片相关
photo-开头.html 相册相关
product-开头.html 产品相关
goods-开头.html 商品相关
system-开头.html 系统相关
tag-开头.html tag相关
brand-开头.html 品牌相关
help-开头.html 帮助相关
member-开头.html 会员相关
search-开头.html 搜索相关
~~~
## 文件命名
~~~
admin 后台管理
app 应用
article 资讯
common 公共
config 配置
data 数据
digg 顶
en-us 英文
extend 延伸
install 安装
Lang 语言包
Lib 库
mall 商城
picture 组图
product 商品
search 搜索
section 区块
shop 商店
static 静态
system 系统
templates 模版
tuan 团购
ucenter 用户中心
upload 上传
video 视频
vote 投票
zh_tw 繁体中文
zh-cn 简体中文
~~~
## HTTP 状态消息
当浏览器从 web 服务器请求服务时,可能会发生错误。
从而有可能会返回下面的一系列状态消息:
### 1xx: 信息
100 Continue 服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求。
101 Switching Protocols 服务器转换协议:服务器将遵从客户的请求转换到另外一种协议。
### 2xx: 成功
200 OK 请求成功(其后是对GET和POST请求的应答文档。)
201 Created 请求被创建完成,同时新的资源被创建。
202 Accepted 供处理的请求已被接受,但是处理未完成。
203 Non-authoritative Information 文档已经正常地返回,但一些应答头可能不正确,因为使用的是文档的拷贝。
204 No Content 没有新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面,而Servlet可以确定用户文档足够新,这个状态代码是很有用的。
205 Reset Content 没有新文档。但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容。
206 Partial Content 客户发送了一个带有Range头的GET请求,服务器完成了它。
### 3xx: 重定向
300 Multiple Choices 多重选择。链接列表。用户可以选择某链接到达目的地。最多允许五个地址。
301 Moved Permanently 所请求的页面已经转移至新的url。
302 Found 所请求的页面已经临时转移至新的url。
303 See Other 所请求的页面可在别的url下被找到。
304 Not Modified 未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。
305 Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取。
306 Unused 此代码被用于前一版本。目前已不再使用,但是代码依然被保留。
307 Temporary Redirect 被请求的页面已经临时移至新的url。
### 4xx: 客户端错误
400 Bad Request 服务器未能理解请求。
401 Unauthorized 被请求的页面需要用户名和密码。
402 Payment Required 此代码尚无法使用。
403 Forbidden 对被请求页面的访问被禁止。
404 Not Found 服务器无法找到被请求的页面。
405 Method Not Allowed 请求中指定的方法不被允许。
406 Not Acceptable 服务器生成的响应无法被客户端所接受。
407 Proxy Authentication Required 用户必须首先使用代理服务器进行验证,这样请求才会被处理。
408 Request Timeout 请求超出了服务器的等待时间。
409 Conflict 由于冲突,请求无法被完成。
410 Gone 被请求的页面不可用。
411 Length Required "Content-Length" 未被定义。如果无此内容,服务器不会接受请求。
412 Precondition Failed 请求中的前提条件被服务器评估为失败。
413 Request Entity Too Large 由于所请求的实体的太大,服务器不会接受请求。
414 Request-url Too Long 由于url太长,服务器不会接受请求。当post请求被转换为带有很长的查询信息的get请求时,就会发生这种情况。
415 Unsupported Media Type 由于媒介类型不被支持,服务器不会接受请求。
416 服务器不能满足客户在请求中指定的Range头。
417 Expectation Failed
### 5xx: 服务器错误
500 Internal Server Error 请求未完成。服务器遇到不可预知的情况。
501 Not Implemented 请求未完成。服务器不支持所请求的功能。
502 Bad Gateway 请求未完成。服务器从上游服务器收到一个无效的响应。
503 Service Unavailable 请求未完成。服务器临时过载或当机。
504 Gateway Timeout 网关超时。
505 HTTP Version Not Supported 服务器不支持请求中指明的HTTP协议版本。