🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[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协议版本。