1920*1080 750*1336 中文: 微软雅黑 Microsoft Yahei 数字: 宋体SimSun 英文: Arial 中文: 苹方 PingFang SC数字 / 英文: Lato 1440*900 1366*768 1024*768 750*1334 640*1336 中文: 微软雅黑 Microsoft Yahei - 黑体Microsoft Yahei 中文: 苹方 PingFang SC - 华文黑体 STHeiti
目的：
V.1.1 提高工作效率，保证项目进度
V.1.2 便于迭代功能 及 后期优化维护
V.1.3 保证页面性能，在代码简洁、明了、有序时，尽可能的减少服务器的负载，保证最快的解析速度
V.1.4 符合web标准，输出高质量的代码，使用具有语义的标签，使结构、表现、行为分离，兼容性优良
前端作为开发团队中不可或缺的一部分（注：不同公司不同团队具有不同的规范和文档）需按照相关规定进行合理编写（注：某些不良习惯可能给自己或他人造成不必要的麻烦）。
目录
说明 ：因人多不一定就力量大，还有可能一团糟；因此为了提升团队凝聚力，统一团队代码风格，优化团队协作效率，可用来约束不同技术人员的代码风格
准则 ：符合web标准、兼顾结构分明、兼容性优良、页面性能高、代码简洁明了、文件命名统一等等一系列操作
通过代码风格的一致性，降低维护代码的成本以及改善多人协作的效率。同时遵守前端标准，确保页面性能得到最佳优化和高效的代码（注：这篇文章只是起指导作用，除个别条目强制之外，大多数为非强制约束，开发者可根据公司或个人的实际情况自行决定，所有的要求只是为保证在团队配合当中保持大方向一致性和开发配合的协调性，不是结论，可随着时间或更好的规定而变化）
正文
【设计】
布局：固定版式（主体 Width：1200）、响应式（全屏）
>注：尺寸、文字、大小、间距，请为偶数，避免缩放时出现小数点；布局时请平局分配，方便后期调整
>网页端主体区域 width：1200px，一屏 height：700px 左右，字体最小为12px，默认OS为苹方，Win为微软雅黑
>移动端布局区域时，主体中需去掉页头状态栏导航栏和底部标签栏，字体最小为12px，设计时字体最小为24px（默认相除2）
注：移动端底部标签栏这一块，只需要全屏布局时注意
常见屏幕分辨率
台式 & 笔记本 1920*1080 1440*900 1366*768
>浏览器：设计全屏时尺寸宽为1920时 需预留出的位置
状态栏height:24px
菜单栏height:140px
手机 & 平板 1024*768 750*1334 640*1336
>移动端：设计尺寸宽为750或640时 需预留出头尾的高度
状态栏height:40px（页头上电量位置，需减去）
导航栏height:88px（页头）
标签栏height:98px（页尾）
尺寸: 1920 中 1200为主体区域 ** 标准为:1000-1200
>顶部:1920*40
>导航:1920*120
>广告区域:1920*500
>Icon:40*40 60*60
>箭头:20*30
字体: 最小为12px. 行高相对设置1.5~2
Windows: 中文: 微软雅黑 Microsoft Yahei - 黑体Microsoft Yahei 数字: 宋体SimSun 英文: Arial
OS: 中文: 苹方 PingFang SC - 华文黑体 STHeiti 数字 / 英文: Lato
>特大: font-size:64px(字体大小)line-height:78px(行间距)
>标题: font-size:36px.24px.18px.16px(字体大小)line-height:60px.42px.36px.32px(行间距)
>正文 / 按钮: font-size:16px.14px.12px(字体大小)line-height:30px.24px.20px(行间距)
>提示性文字: font-size:12px(字体大小)line-height:18px(行间距)
颜色:
>红:#dc1414
>常规:#000.#333.#666.#999.#aaa.#eee.#fff(标题:#3. 内容:#6. 说明:#9)
>边框:#e5e5e5.#ccc
>背景:#f7f7f7
>按钮背景:
border-radius:4px;
background:linear-gradient(92deg,rgba(253,72,37,1)0%,rgba(220,0,0,1)100%);
图：
>广告：banner 或 背景 或 其他图
>图标：大小一致 或 切图时切成大小一致
>特殊字体：非系统字体
>特殊形状：例：六角形
>特殊效果：例：特殊光影
命名:
>>>>容器: container * wrapper * box * layout * files * house * cover * views * structure * shell
>>>>页头: header & 页脚: footer
>>>>导航: nav
主导航: main-nav * site-nav
子导航: sub-nav
顶导航: top-nav
边导航: side-nav
左导航 / 右导航: left-nav / right-nav
>>>>菜单: menu
菜单项: menu-item * menu-category
子菜单: sub-menu
>>>>内容: content * con * main * inner * section * primary * warp
搜索: search
标题: title * caption * info
副标题: subtitle
提示性标题: destitle & assistive
大：big
小：little
>>>>列表: list * series
等级表：rank-list
说明: illustrate
商标: lable * sign & 引导：bootstrap
编辑: editor * change
规则: rule * alr
注释: note * annotation
描述/详情/文章: des * description * details * articles * intro
当前: active * current * default * init
>>>>切换: tab * slider * toggle
上/左/加/大z：prev * left * add * inc * asc * up * * push
下/右/减/小：next* right * subtract * dec * dsc * down * pull
>>>>弹窗: slide-bubble / toast / popup
关闭：close
>>>>工具条：toolbar
侧边栏: side-bar * aside
汇流：draft
对联：couplet
状态栏: status
面包屑: ashbg
>>>>图: pic * img
图集: prcture * atlas * figure
图标: icon
>>>>按钮: btn
成功: ok * ready
发送: send
支付: pay / payment
修改: modify
密码：password
下载：download
文档：docs
概述：overview * find
参与: partake
评估: assess
抽奖: draw
排名: ranking
评价: appraisal * comment
介绍: introduce
常见问题: faq
参数：parameter
预定：predetermine
交换：exchange
过程：process
记录：record
>>>>提示：msg
错误: error
空的: empty
信息：information
>>>>其他: other
微信: wechat & 空间: qzone & 新浪微博: t-sina & 腾讯微博: t-qq & 博客：blog
赞: praise & 点：spot & 分数: score & 分享：share & 收藏：favorites
姓名/作者: name * author * review
选填: optional * selected
网友评论