95992828九五至尊2

前者代码规范总括,前端规范大总计

三月 8th, 2019  |  九五至尊1老品牌值得

标准指标:为了进步级工程师作功用,便于后台职员加上效果及前端前期优化维护,输出高品质的文档,在网站建设中,使组织特别清楚,代码简明有序,有1个更好的前端架构。

正式目标:为了增强工效,便于后台人员加上效果及前端后期优化维护,输出高品质的文书档案,在网站建设中,使组织更为鲜明,代码简明有序,有二个更好的前端架构。

正规基本准则:符合web标准,使用具有语义的价签,使协会、表现、行为分别,包容性卓绝。页面品质优化,代码简洁、明了、有序,尽恐怕的压缩服务器的负荷,保险最快的辨析速度。

规范基本准则:符合web标准,使用全数语义的标签,使协会、表现、行为分别,包容性优良。页面品质优化,代码简洁、明了、有序,尽大概的回落服务器的载荷,保险最快的剖析速度。

 

 

壹 、文件规范

① 、文件规范

1.1
HTML部分

1.1 HTML部分

  1.1.1
建包难点

  1.1.1 建包难点

    文件均归档至约定的目录中,建包格式如下:

    文件均归档至约定的目录中,建包格式如下:

    图片 1

    图片 2

    注意:全数的css文件放在css文件夹中,image放在images文件夹中,js放在js文件夹中

    注意:全体的css文件放在css文件夹中,image放在images文件夹中,js放在js文件夹中

  1.1.2
HTML尾部编写

  1.1.2 HTML尾部编写

    (1) 编码:全数编码均接纳xhtml/html,标签必须关闭,编码统一为UTF-8,在多语言的网站提出添加<html
lang=”zh-CN”>,表明内容是以粤语突显和读书为底蕴的

    (1) 编码:全数编码均使用xhtml/html,标签必须关闭,编码统一为UTF-8,在多语言的网站建议添加<html
lang=”zh-CN”>,表明内容是以中文展现和阅读为根基的

    (2) 语义化:正确利用标签,充足利用无包容性难题的html自个儿标签

    (2) 语义化:正确利用标签,丰盛利用无包容性难题的html本人标签

    (3) 文件底部head内容:

    (3) 文件尾部head内容:

      •
title: 须求加上标题

      • title: 要求丰硕题目

      •
编码: charset=UTF-8

      • 编码: charset=UTF-8

      •
meta: 能够添加description、keywords内容

      • meta: 能够添加description、keywords内容

1.2
CSS部分

1.2 CSS部分

  1.2.1
CSS连串及其命名

  1.2.1 CSS连串及其命名

    能够将CSS样式表分为三类:全局样式表、模块通用样式表和独立样式表

    能够将CSS样式表分为三类:全局样式表、模块通用样式表和单独样式表

      • 全局样式表常用命名:public.css

      • 全局样式表常用命名:public.css

      • 模块通用样式表命名:模块名_basic.css

      • 模块通用样式表命名:模块名_basic.css

      • 独立样式表:模块名_页面名.css

      • 独立样式表:模块名_页面名.css

  1.2.2
CSS引入

  1.2.2 CSS引入

    CSS文件引入可经过外联只怕内联情势引入

    CSS文件引入可通过外联大概内联格局引入

  • 外联格局

  • 外联情势

  • 内联格局

  • 内联格局

    图片 3

    图片 4

    注意:link和style标签都应当放入head中,原则上,差别目的在于html上向来写样式。制止在CSS中运用@import,嵌套不要超越一层。

    注意:link和style标签都应该放入head中,原则上,不容许在html上一贯写样式。制止在CSS中运用@import,嵌套不要跨越一层。

 

 

② 、注释规范

二 、注释规范

2.1
顶部文档注释(推荐应用)

2.1 顶部文书档案注释(推荐应用)

1 /*
2 * @description: 中文说明
3 * @author: name
4 * @update: name(xxxx-xx-xx xx:xx)
5 */
1 /*
2 * @description: 中文说明
3 * @author: name
4 * @update: name(xxxx-xx-xx xx:xx)
5 */

2.2
属性注释 

2.2 属性注释 

1 /*Header*/
2 /*Nav*/
3 /*Container*/
4 ...
5 /*Footer*/
1 /*Header*/
2 /*Nav*/
3 /*Container*/
4 ...
5 /*Footer*/

2.3
功用模块注释

2.3 效能模块注释

1 /* module: module1 by 小王 */
2 ...
3 /* module: module2 by 小李 */
1 /* module: module1 by 小王 */
2 ...
3 /* module: module2 by 小李 */

2.4
特殊注释

2.4 特殊注释

 1 /*Color codes
 2 --------------------------------
 3     Red: #e03d3d;
 4     Dark: #424242;
 5     Light: #c3c5c0;
 6     blue #e03d3d;
 7 */
 8 
 9 /*
10    默认宽度为1128px 
11 */
12 
13 /*@group Reset Css*/
14 /*@group General Definitions*/
15 
16 /*---------------Typography-----------------*/
17 /*------------------Sprite--------------------*/

图片 5

图片 6

 1 /*Color codes
 2 --------------------------------
 3     Red: #e03d3d;
 4     Dark: #424242;
 5     Light: #c3c5c0;
 6     blue #e03d3d;
 7 */
 8 
 9 /*
10    默认宽度为1128px 
11 */
12 
13 /*@group Reset Css*/
14 /*@group General Definitions*/
15 
16 /*---------------Typography-----------------*/
17 /*------------------Sprite--------------------*/

  注意:

图片 7

    •
每一个文书档案对应3个文书档案注释(主要注释内容包蕴:文书档案成立人、创造时间、首要内容叙述等)

图片 8

    •
属性注释表明:能够分CSS属性来拓展命名(如:margin/padding值、CSS
哈克、全局Hover等)

  注意:

    •
功效模块注释表明:分模块来编排CSS样式(如:底部、导航、按钮、页脚等等)

    •
每3个文书档案对应2个文书档案注释(首要注释内容囊括:文书档案成立人、创制时间、首要内容叙述等)

 

    •
属性注释表达:可以分CSS属性来展开命名(如:margin/padding值、CSS
哈克、全局Hover等)

三 、命名规范

    •
功用模块注释表明:分模块来编排CSS样式(如:尾部、导航、按钮、页脚等等)

3.1
怎样命名

 

  • css最好用class来命名,js用id来定名,已做区分

叁 、命名规范

  •
id和class的命名应展现该因素的功能或应用通用名称,而并非用抽象的别扭的命名

3.1 怎么样命名

3.2
命名示例

  • css最好用class来命名,js用id来定名,已做区分

  • .div1{} /*
    不推荐;无意义 */
  • .a_green{} /*
    不推荐;无意义 */
  • .menu{} /*
    推荐;特殊性*/
  • .header{}
    /* 推荐;通用性*/

  •
id和class的命名应体现该因素的作用或使用通用名称,而并非用抽象的生硬的命名

3.3
命名精简

3.2 命名示例

  id和class命名越简单越好,只要丰裕表明意思,那样有助于精通,同时也能增加代码作用

  • .div1{} /* 不推荐;无意义 */
  • .a_green{} /* 不推荐;无意义 */
  • .menu{} /* 推荐;特殊性*/
  • .header{} /* 推荐;通用性*/
  • .navigation{}
    /* 不推荐 */
  • .login_box_inside_con{}
    /* 不推荐 */
  • .nav{} /*
    推荐 */

3.3 命名精简

3.4
命名嵌套难点

  id和class命名越简单越好,只要丰富表明意思,那样有助于明白,同时也能抓实代码效能

  书写css要小心先后顺序和嵌套难点,从品质上考虑尽量减少选取器的层级

  • .navigation{} /* 不推荐 */
  • .login_box_inside_con{} /* 不推荐 */
  • .nav{} /* 推荐 */
  • .nav
    ul.list{} /* 不推荐 */
  • .nav
    .list{} /* 推荐 */

3.4 命名嵌套难点

3.5
注意事项

  书写css要注意先后顺序和嵌套难题,从品质上考虑尽量减弱采用器的层级

  • 平整命名中,一律使用小写加下划线的不二法门
  • 取名中尽量防止使用汉语拼音,应该运用更分明有语义的英文单词进行重组
  • 取名注意缩写,不过不能够盲目缩写
  • 分化意通过壹 、贰 、3等序号实行命名
  • 避免class与id重名
  • id注意用于标识模块或页面包车型客车某二个父容器区域,名称必须唯一,不要私自新建id
  • class用于标识某贰个门类的指标,命名必须切中要害
  • 尽可能升高代码模块的复用,样式尽量用结合的不二法门
  • 规则名称中不该包罗颜色、定位等与现实突显效果相关的消息,应该用意义命名,而不是结果名称
  • .nav ul.list{} /* 不推荐 */
  • .nav .list{} /* 推荐 */

 

3.5 注意事项

肆 、书写规范

  • 平整命名中,一律采用小写加下划线的法子
  • 命名中尽量制止使用粤语拼音,应该利用更简明有语义的英文单词进行整合
  • 命名注意缩写,不过不可能盲目缩写
  • 不容许通过① 、② 、3等序号进行命名
  • 避免class与id重名
  • id注意用于标识模块或页面的某2个父容器区域,名称必须唯一,不要专断新建id
  • class用于标识某1个档次的目的,命名必须切中要害
  • 尽量进步代码模块的复用,样式尽量用整合的办法
  • 规则名称中不该包蕴颜色、定位等与实际呈现效果相关的新闻,应该用意义命名,而不是结果名称

4.1
排版规范

 

  • 使用4tab来缩进
  • 规则能够写成单行。大概多行,但是凡事文件内的平整排版必须统一

四 、书写规范

  书写风格:

4.1 排版规范

  • 每三个属性值必须添加分号
  • 要是六性格格公用叁个样式集,则多少个属性必须写成多行方式
  • 使用4tab来缩进
  • 规则能够写成单行。大概多行,可是总体文件内的规则排版必须联合

4.2
属性编写顺序(一般遵守展现属性 -> 自己属性 -> 文本属性 ->
其余属性的书写格式)

  书写风格:

  • 呈现属性:display/list-style/position/float/clear…
  • 本人性质(盒模型):width/height/margin/padding/border
  • 背景:background
  • 行高:line-height
  • 文本属性:color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
  • 其他:cursor/z-index/zoom/overflow…
  • CSS3属性:transform/transition/animation/box-shadow/border-radius
  • 只要选择CSS3的性质,借使有供给插手浏览器前缀,则遵照-webkit-/-moz-/-ms-/-o-/std的逐条举行添加,标准属性写在结尾
  • 链接的体制请严峻依照如下顺序添加:a:link
    -> a:visited -> a:hover -> a:active
  • 每1个属性值必须添加分号
  • 借使多性子情公用多个样式集,则多个天性必须写成多行方式

  图片 9

4.2 属性编写顺序(一般遵从呈现属性 -> 自个儿属性 -> 文本属性 ->
别的质量的书写格式)

4.3
代码品质优化

  • 突显属性:display/list-style/position/float/clear…
  • 自身性质(盒模型):width/height/margin/padding/border
  • 背景:background
  • 行高:line-height
  • 文本属性:color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
  • 其他:cursor/z-index/zoom/overflow…
  • CSS3属性:transform/transition/animation/box-shadow/border-radius
  • 若是运用CSS3的习性,如若有必不可少加入浏览器前缀,则依据-webkit-/-moz-/-ms-/-o-/std的顺序举行添加,标准属性写在终极
  • 链接的样式请严峻遵守如下顺序添加:a:link -> a:visited ->
    a:hover -> a:active
  • 联合margin、padding、border的-top/-right/-bottom/-left的安装,尽量使用短名称
  • 选取器应该在知足功用的根基上尽心不难,收缩采用器嵌套,查询消耗。不过毫无疑问要幸免覆盖全局样式设置
  • 禁止在css中使用*选择符
  • 0前边不须求单独,比如0px能够省略成0,0.8px能够总结成.8px
  • 即使能够颜色尽量用四个人字符表示,比如#ccc
  • 比方没有边框时,不要写成border:0;应该写成border:none
  • 在保留代码解耦的前提下,尽量合比量齐观复的体裁
  • background、font等能够缩写的性质,尽量使用缩写格局
  • 能以背景情势表现的图形,尽量都写入CSS样式中

  图片 10

4.4 CSS
Hack的使用

4.3 代码质量优化

  尽量少使用浏览器检查和测试和CSS
哈克s,先试试别的消除办法。考虑到代码高成效和易保管,固然这二种方式能便捷消除浏览器解析差别,但应被视为最后的一手。在长期的品类中,允许采纳hack只会推动愈来愈多的hack,所以尽量少用

  • 统一margin、padding、border的-top/-right/-bottom/-left的设置,尽量采取短名称
  • 选用器应该在满足功用的功底上尽大概简单,减弱选拔器嵌套,查询消耗。不过一定要防止覆盖全局样式设置
  • 禁止在css中使用*选择符
  • 0后边不须求单独,比如0px能够简不难单成0,0.8px能够简不难单成.8px
  • 比方可以颜色尽量用几人字符表示,比如#ccc
  • 若果没有边框时,不要写成border:0;应该写成border:none
  • 在保留代码解耦的前提下,尽量合同仁一视复的体裁
  • background、font等足以缩写的本性,尽量使用缩写形式
  • 能以背景形式显示的图纸,尽量都写入CSS样式中
  • IE6:
    _property:value
  • IE6/7:
    *property:value
  • IE6/7/8/9:
    property:value\9

4.4 CSS Hack的使用

4.5
IE兼容性

  尽量少使用浏览器检查和测试和CSS
哈克s,先试试别的解决办法。考虑到代码高效能和易保管,就算那二种艺术能便捷消除浏览器解析差异,但应被视为最后的伎俩。在长期的品种中,允许使用hack只会带来越来越多的hack,所以尽量少用

  IE支持通过一定的<meta>标签来规定绘制当前页面所应当使用的IE版本,除非有拨云见日的独特殊须要要,不然最好是安装edge
mode,从而布告IE采纳其所支撑的流行的格局

  • IE6: _property:value
  • IE6/7: *property:value
  • IE6/7/8/9: property:value\9

    <!–
IE8及以上的本子都会以最高版本IE来渲染页面 –>
    <meta
http-equiv=”X-UA-Compatible” content=”IE=edge”>

4.5 IE兼容性

  注意:X-UA-Compatible那一个是IE8的专用标志,用来钦点IE8浏览器去模拟有些特定版本的IE浏览器的渲染方式

  IE扶助通过一定的<meta>标签来规定绘制当前页面所应当运用的IE版本,除非有强烈的尤其需求,不然最好是安装edge
mode,从而文告IE选拔其所支撑的摩登的格局

    
  <meta http-equiv=”X-UA-Compatible”
content=”IE=edge,chrome=1″>中的chrome=1效果是只要设置了GCF,则采纳GCF来渲染页面,假诺未安装GCF,则应用最高版本的IE内核进行渲染

    <!– IE8及以上的本子都会以万丈版本IE来渲染页面 –>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

4.6
字体规则

  注意:X-UA-Compatible那些是IE8的专用标志,用来内定IE8浏览器去模拟有个别特定版本的IE浏览器的渲染情势

  • 为了防止万一文件合并及编码转换时造成难题,提议将样式汉语字体名字改成对应的英文名字,如:行书(SimHei)、行书(SimSun)、微软雅黑(Microsoft
    Yahei)
  • 字体粗细选拔具体数值,粗体bold写成700,符合规律normal写成400
  • font-size必须以px为单位
  • 为了对font-family取值实行统一,更好的帮忙各类操作系统上挨家挨户浏览器的包容性,font-family不一样意在作业代码中随意安装

       <meta http-equiv=”X-UA-Compatible”
content=”IE=edge,chrome=1″>中的chrome=1效果是只要设置了GCF,则应用GCF来渲染页面,借使未设置GCF,则利用最高版本的IE内核进行渲染

   图片 11

4.6 字体规则

 

  • 为了防患文件合并及编码转换时造成难点,提出将样式普通话字体名字改成对应的英文名字,如:石籀文(SimHei)、钟鼓文(SimSun)、微软雅黑(Microsoft
    Yahei)
  • 字体粗细选用具体数值,粗体bold写成700,寻常normal写成400
  • font-size必须以px为单位
  • 为了对font-family取值实行统一,更好的支撑各类操作系统上种种浏览器的兼容性,font-family不一致目的在于工作代码中肆意安装

⑤ 、其余标准

   图片 12

  • 毫无随便改变全站级CSS和通用CSS库,改动后,要由此完美测试
  • 防止使用filter
  • 避免在CSS中使用expression
  • 防止过小的背景图片平铺
  • 尽心尽力不要在CSS中选用!important
  • 纯属不要在CSS中央银行使”*”选择符
  • 层级(z-index)必须清晰鲜明,页面弹窗、气泡为最高级(最高级为999),区别弹窗气泡之间可在四位数以内调动,普通区块为10-90内10的倍数;区块展开、弹出为日前父层级上个位扩大,禁止层级间盲目攀比
  • 背景图片在情景允许,尽只怕使用sprite技术,减小http请求,考虑到多个人搭档开发,sprite遵照模块、业务、页面来划分
  • 页面内部尽量幸免使用style属性,CSS放在head标签中,由link标签引入,使页面包车型客车结构与表现分离
  • 尽量收缩使用float、position等影响属性的属性,那样可以幸免新手在布局时出现的一塌糊涂
  • 尽量少使用<br
    />来断行
  • 无须总是出现多个(空格),也尽量少使用全角空格(英文字符集下,全角空格会变成乱码),空白应该尽量选用text-indent、maring/padding等情势来促成
  • 排版即便遇上要求首行缩进的处理,能够选择text-indent:2em;
  • 图片即使急需加载就在页面上用img标签写出,并指明宽高,首要的图形必须加上alt属性,给关键的因素和截断的因素上加上title
  • 如若有跳转的地点,统一运用a标签,<a
    href=”#”></a>,需求跳转到新页面,则还供给丰盛targent=”_blank”属性,倘若点击的是空链接(#),则会自行将日前页面重置到首端,能够使用”javascript:void()”来代替原先的”#”
  • 分掌握怎么状态下jpg/gif/png图片

 

 

⑤ 、其余标准

⑥ 、自适应页面布局(响应式布局,暂不考虑低版本IE包容性)

  • 决不任意改变全站级CSS和通用CSS库,改动后,要通过全面测试
  • 幸免选择filter
  • 避免在CSS中使用expression
  • 防止过小的背景图片平铺
  • 尽量不要在CSS中采取!important
  • 相对不用在CSS中央银行使”*”选择符
  • 层级(z-index)必须清晰明显,页面弹窗、气泡为最高级(最高级为999),不一样弹窗气泡之间可在四位数以内调动,普通区块为10-90内10的倍数;区块展开、弹出为近期父层级上个位扩大,禁止层级间盲目攀比
  • 背景图片在情景允许,尽大概使用sprite技术,减小http请求,考虑到四人搭档开发,sprite根据模块、业务、页面来划分
  • 页面内部尽量避免使用style属性,CSS放在head标签中,由link标签引入,使页面包车型大巴构造与表现分离
  • 尽量收缩使用float、position等影响属性的质量,那样能够幸免新手在布局时出现的眼花缭乱
  • 尽量少使用<br />来断行
  • 无须总是出现多少个(空格),也尽量少使用全角空格(英文字符集下,全角空格会变成乱码),空白应该尽大概选取text-indent、maring/padding等格局来达成
  • 排版假使赶上要求首行缩进的处理,能够运用text-indent:2em;
  • 图形如若急需加载就在页面上用img标签写出,并指明宽高,首要的图样必须加上alt属性,给关键的因素和截断的因素上加上title
  • 万一有跳转的地点,统一运用a标签,<a
    href=”#”></a>,须要跳转到新页面,则还亟需丰裕targent=”_blank”属性,如若点击的是空链接(#),则会自行将日前页面重置到首端,能够应用”javascript:void()”来代表原先的”#”
  • 分精晓如何情状下jpg/gif/png图片

6.1
布局细节

 

  • 率先尾部head中进入meta新标签 

⑥ 、 自适应页面布局(响应式布局,暂不考虑低版本IE包容性)

    <!–
让viewport的上升幅度等于物理设备上的真实性分辨率,不一致意用户缩放,一般主流的web
app都以这么设置 –>

6.1 布局细节

    <meta name=”viewport” content=”width=device-width,
initial-scale=1″>

  • 先是尾部head中参与meta新标签 
  • position:无法选用相对化定位
  • width/height/margin/padding:
    不可能采用px,应该选取比例、auto或em
  • font:
    无法接纳相对化大小,应选择em

    <!–
让viewport的肥瘦等于物理设备上的实事求是分辨率,不容许用户缩放,一般主流的web
app都以那般设置 –>
    <meta name=”viewport” content=”width=device-width,
initial-scale=1″>

6.2
CSS3引入的Media Query模块,可活动探测显示屏宽度

  • position:不能够采用相对化定位
  • width/height/margin/padding: 无法利用px,应该使用比例、auto或em
  • font: 不能够动用绝对化大小,应选用em
  • 加载相应的CSS文件,提议遵照分化的荧屏分辨率,选拔使用分歧的CSS规则,如:@media
    screen and (max-width:799px) {…}
  • 图片自适应:img{max-width:百分之百;}

6.2 CSS3引入的Media Query模块,可自行探测荧屏宽度

 

  • 加载相应的CSS文件,建议依照分化的显示器分辨率,采纳使用不相同的CSS规则,如:@media
    screen and (max-width:799px) {…}
  • 图形自适应:img{max-width:百分百;}

七 、援救文档

 

7.1
全局样式写法(reset css)

七 、援助文书档案

图片 13

7.1 全局样式写法(reset css)

7.2
清浮动

图片 14

  供给排除浮动的地点有:

7.2 清浮动

  • 若子成分浮动,而父成分内容塌陷(也正是没有包住)
  • 布局出现混乱,譬如下一层的跑到上一层去了

  要求免去浮动的地点有:

  消除办法(四种艺术)

  • 若子成分浮动,而父成分内容塌陷(也正是没有包住)
  • 布局现身紊乱,譬如下一层的跑到上一层去了
  • 给父成分同样适用浮动,保障子成分与父成分浮动后要么在相同层
  • 科学行使overflow:hidden;总所周知,overflow:hidden首要意思是溢出隐藏的意思,但是同样有清浮动的效应
  • 在需求的成分上边添加<div
    class=”clear”></div>,CSS中:clear{clear:both;}(不引进,扩充代码,冗余)
  • 运用clearfix来清除浮动(推荐),相当于成立贰个藏身的内容为空的块的对象成分来祛除浮动

  消除办法(八种办法)

    .clearfix{*zoom:1;}
/* 针对IE7 hack,触发IE7的haslayout,以排除浮动 */
    .clearfix:before,.clearfix:after{display:table;content:””;line-height:0;}
    .clearfix:after{clear:both;}

  • 给父成分同样适用浮动,有限帮助子成分与父元素浮动后恐怕在同等层
  • 正确使用overflow:hidden;总所周知,overflow:hidden首要意思是溢出隐藏的情趣,不过同样有清浮动的职能
  • 在急需的因素下边添加<div
    class=”clear”></div>,CSS中:clear{clear:both;}(不引进,扩展代码,冗余)
  • 行使clearfix来解除浮动(推荐),也正是创立3个掩蔽的内容为空的块的目的成分来排除浮动

7.3
各大网站的书体样式:

    .clearfix{*zoom:1;} /* 针对IE7
hack,触发IE7的haslayout,以清除浮动 */
    .clearfix:before,.clearfix:after{display:table;content:””;line-height:0;}
    .clearfix:after{clear:both;}

  • Google:
    font-family:arial, sans-serif;
  • Yahoo:
    font:13px/1.25 “Helvetica Neue”,Helvetica,Arial;
  • Apple:
    font:12px/18px “Lucida Grande”, “Lucida Sans
    Unicode”,Helvetica,Arial,Verdana,sans-serif;
  • Baidu:
    font:12px arial;
  • taobao: font:12px/1.5
    tahoma,arial,’Hiragino Sans GB’,\5b8b\4f53,sans-serif;
  • Weibo:
    font:12px/1.125 Arial,Helvetica,sans-serif;
  • Tencent:
    font:12px “宋体”,”Arial Narrow”,HELVETICA;
  • Sina
    Weibo: font:12px/1.3 “Arial”,”Microsoft YaHei”;
  • Sina:
    font:12px/20px “SimSun”,”宋体”,”Arial Narrow”,HELVETICA;
  • JD: font:12px/150%
    Arial,Verdana,”宋体”;
  • zhihu:
    font-family:’Helvetica Neue’, Helvetiva,Arial,Sans-serif;

7.3 各大网站的书体样式:

  私下认可字体样式:

  • Google: font-family:arial, sans-serif;
  • Yahoo: font:13px/1.25 “Helvetica Neue”,Helvetica,Arial;
  • Apple: font:12px/18px “Lucida Grande”, “Lucida Sans
    Unicode”,Helvetica,Arial,Verdana,sans-serif;
  • Baidu: font:12px arial;
  • taobao: font:12px/1.5 tahoma,arial,’Hiragino Sans
    GB’,\5b8b\4f53,sans-serif;
  • Weibo: font:12px/1.125 Arial,Helvetica,sans-serif;
  • Tencent: font:12px “宋体”,”Arial Narrow”,HELVETICA;
  • Sina Weibo: font:12px/1.3 “Arial”,”Microsoft YaHei”;
  • Sina: font:12px/20px “SimSun”,”宋体”,”Arial Narrow”,HELVETICA;
  • JD: font:12px/150% Arial,Verdana,”宋体”;
  • zhihu: font-family:’Helvetica Neue’, Helvetiva,Arial,Sans-serif;
  • 包容性好:font-family:Helvetica,Tahoma,Arial,Sans-serif;
  • 更接近设计:font-family:Geogia,”Times
    New 罗曼”,Times,serif;

  暗许字体样式:

7.4 文本多行显示添加省略号(文本溢出简约)

  • 包容性好:font-family:Helvetica,Tahoma,Arial,Sans-serif;
  • 更类似设计:font-family:Geogia,”Times New 罗曼”,Times,serif;

  给急需的竹签添加具体上涨幅度限制、white-space:nowrap;text-overflow:ellipsis;overflow:hidden;

7.4 文本多行显示添加省略号(文本溢出大约)

7.5
input框的有血有肉样式

  给急需的竹签添加具体上涨幅度限制、white-space:nowrap;text-overflow:ellipsis;overflow:hidden;

  input框行高难题,一般不必要写line-height,不过在IE8/IE7必要写hack

7.5 input框的切切实实样式

  input框行高难题,一般不必要写line-height,可是在IE8/IE7要求写hack

 

 

 

 

相关文章

Your Comments

近期评论

    功能


    网站地图xml地图