有关背景图片的,App自适应布局探索与总括

七喜图在缩放场景下的特种处理

2016/07/13 · CSS ·
雪碧图

初稿出处: 百度EFE   

追忆n年前刚写前端的时候,在拍卖一个’鼠标hover切换背景图会闪’的难题时,将两张背景图合成一张图片,顺遂解决难点。这应当是我先是次用到Sprite图的意况。

澳门葡京 1

7-Up图作为背景在切换时不会有因为必要拭目以待下载而爆发的闪现

当今,打开一个站点,显示多样的图片资源的页面四处可知。而多数站点更会用一套包蕴几十个作风统一的图标的图标库,加之运动端的占比多如牛毛,七喜图那项技术被拔取的就更是常见。

1、困扰多时的题材

有时会赶上使用背景图如故图片的题材。

  • 背景图:固定不变的始末,必要选择div标签来包裹内容
  • 图表:img 标签的 src
    属性值时后端给的。一般用来可变的(如头像),可点击的。

相似的话,使用到背景图片,会波及到如下 CSS 样式:

  • background-image: url();/背景图的路子/
  • 有关背景图片的,App自适应布局探索与总括。background-position: left top | center;/偏移地点/
  • background-size: contain | cover | width height;/背景图尺寸/
      cover:图片完全覆盖容器(图片可能溢出)。
      contain:容器包裹图片(图片可能无法完全覆盖容器)。
    background-size: 100px 80px;背景图宽度100px,中度80px
  • background-repeat: no-repeat | repeat-x | repeat-y;/背景图重复性/
  • background-attachment: fixed | scroll;
    规定背景图像是还是不是稳定或者趁着页面的其余部分滚动。

多年来干活中创设活动端活动页面的时候,由于图片较多,因而一再利用到CSS
Coca Colas,此时会赶上了一个广泛难题——在不一样分辨率下,background-position定位的图纸的边缘有可能被裁剪,彰显不全。

最简便易行,最实用的拔取办法

得益于伪元素的功德,在不破坏页面结构,不扩大多余标签的动静下,通过::after创造一个您所急需图标大小的伪元素,并将所须要的图标通过background-position定位到指定的长空,对应的图标变顺遂地展现出来。

CSS

.message:after { background: url(../img/sprite.png) scroll 0px -86px
no-repeat transparent; content: ”; text-indent: -9999px; overflow:
hidden; position: absolute; top: 0; left: 50%; margin-left: -10px;
width: 20px; height: 22px; }

1
2
3
4
5
6
7
8
9
10
11
12
.message:after {
    background: url(../img/sprite.png) scroll 0px -86px no-repeat transparent;
    content: ”;
    text-indent: -9999px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -10px;
    width: 20px;
    height: 22px;
}

澳门葡京 2

透过伪元素达成的图标

在那前边做Web
App开发的的时候,在自适应方面一般都是大幅度通过比例,中度以红米6跟HTC5之间的一个平衡值写死,大家的设计稿都是Motorola5的640
*
1136专业,所以低度相似取个大约值,各个图标的宽高也是取平衡值写死,然后部分样式经过媒体询问来设置,例如背景图的多倍图、基础字体大小、图标宽高。

CSS sprite 雪碧图

在线制作Pepsi-Cola图
  因为一个图纸作为logo或者icon浮现时,每一个url,会在页面渲染时发送一条网络请求(浪费网络资源),所以把那一个较小的logo放在同等张图纸上,再经过background-position来举办固定。(那样就只发送五遍呼吁)。
  background-position 使用时和 margin
类似。top使用负值可以把背景图上拉。
  最终,还有一种压缩互联网请求的格局:把小图标转换为based64的字符。(图片—->数据,实时性好一些)

对照二种CSS Sprites的适配方法

近来为止,我清楚并尝试过的适配方法有如下三种:

  • rem
  • 百分比
  • zoom
  • transform scale

透过打造demo,大家对一张CSS
Pepsi-Colas举办体现,通过上述二种方法,在iphone6下就涌出了图片浮现不全的难点(红框中的图片的边缘被裁剪),如下图:

澳门葡京 3

各适配方法结果比较

出于rem、百分比单位最后都会被浏览器解析成px进行渲染,分辨率差别变化的px值一般会存在小数点,而浏览器对小数点的辨析也不雷同。IE7-和safari会对小数点取整,而IE8+、chrome、firefox等浏览器则会四舍五入。由此浏览器对rem、百分比单位转换成px时,很简单因为1px的差而招致CSS
七喜s定位不准而招致边缘被裁剪的现象。

在既往的品种中,用得最多的是比例,其精度绝对于rem较好点,出现图标被裁剪的情事较少。然则在那么些序列中,利用百分比依然不如人意。

比例定位参考小说:http://zhangruojun.com/backgroud-positionde-bai-fen-bi-zhi/?utm\_source=tuicool&utm\_medium=referral

后来尝试了选择zoom的法子,直接对图标进行缩放,效果却和rem大致。

部分标题

看起来貌似是一个两全的化解方案,然则真正是那般么?咱们来看一个例证:

澳门葡京 4

一个界面

当前有诸如此类一个简练的页面(无视它的设计合理吧),获得手后撸起袖子就写。切图切着切着貌似哪个地方不对。。。恩!八个铃铛不是同一个图片大小不一致而已么?显著有优化的余地啊!只要切一个图来个调整下尺寸不就一挥而就了么~~

恩恩恩。在普通的页面中,来个backgroud-size妥妥地化解。

CSS

.message { background: url(../img/message.png) no-repeat; } .large {
background-size: 64px 64px; } .normal { background-size: 32px 32px; }
.small { background-size: 16px 16px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.message {
    background: url(../img/message.png) no-repeat;
}
 
.large {
    background-size: 64px 64px;
}
 
.normal {
    background-size: 32px 32px;
}
 
.small {
    background-size: 16px 16px;
}

当大家依据地把品质设置到7-Up图上时,能够发现,呈现出的效益完全不是事先设想的那么。尺寸、定位完全不对。哪儿出了难题了吧?原理很粗略。background-size并不感知icon的留存,大家想只针对icon举办安插,而这些特性其实是意义于任何Sprite图上的。

那般做的害处很醒目:

rem和zoom的化解方案

针对地点的rem和zoom方法的化解方案是,制作CSS
七喜时图标之间相隔远一些,css中图标尺寸设置大一点,background-position的值相对原值小一些。
诸如,正常设置如下:

// rem
.icon{
      width: 0.2rem;
      height: 0.2rem;
      background-position: -1rem -0.8rem;
}

// zoom
.icon{
      width: 20px;
      height: 20px;
      background-position: -100px -80px;
}

应用解决方案后的安装如下:

// rem
.icon{
      width: 0.24rem;
      height: 0.24rem;
      background-position: -0.98rem -0.78rem;
}

// zoom
.icon{
      width: 24px;
      height: 24px;
      background-position: -98px -78px;
}

作用图如下,基本上解决了图标被裁剪的题材:

澳门葡京 5

只是上述解决方案,我觉得在代码上连接要想着时刻加减原值,而且前期维护的时候若是忽视了该解决方法,很不难又相会世上述难题。其余,在页面布局上,图标在页面中的地方简单并发1px的过错,在要素布局的时候也急需留意这些误差。

随之而来的解决方案

抚今追昔整个渲染执行的流水线:

  1. background-size 功用于整个Coca Cola图,对其尺寸缩放。
  2. background-position 定位。

那就是说要博取不错的法力的话,以推广两倍为例,要求做到:

  1. 将伪元素的尺寸增添2倍
CSS

.message:after { width: originWidth \* 2; height: originHeight \* 2;
}

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6ce3955d4080086130-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6ce3955d4080086130-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6ce3955d4080086130-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6ce3955d4080086130-4">
4
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6ce3955d4080086130-1" class="crayon-line">
.message:after {
</div>
<div id="crayon-5b8f6ce3955d4080086130-2" class="crayon-line crayon-striped-line">
    width: originWidth * 2;
</div>
<div id="crayon-5b8f6ce3955d4080086130-3" class="crayon-line">
    height: originHeight * 2;
</div>
<div id="crayon-5b8f6ce3955d4080086130-4" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 将全方位七喜图的尺寸扩充2倍
CSS

.message:after { background-size: originSpriteWidth \* 2,
originspriteHeight \* 2; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6ce3955d8478968227-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6ce3955d8478968227-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6ce3955d8478968227-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6ce3955d8478968227-1" class="crayon-line">
.message:after {
</div>
<div id="crayon-5b8f6ce3955d8478968227-2" class="crayon-line crayon-striped-line">
    background-size: originSpriteWidth * 2, originspriteHeight * 2;
</div>
<div id="crayon-5b8f6ce3955d8478968227-3" class="crayon-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 将坐标偏移量相应伸张2倍
CSS

.message:after { background-position: originBackgroundPositionX \*
2, originBackgroundPositionY \* 2; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6ce3955db510312506-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6ce3955db510312506-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6ce3955db510312506-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6ce3955db510312506-1" class="crayon-line">
.message:after {
</div>
<div id="crayon-5b8f6ce3955db510312506-2" class="crayon-line crayon-striped-line">
    background-position: originBackgroundPositionX * 2, originBackgroundPositionY * 2;
</div>
<div id="crayon-5b8f6ce3955db510312506-3" class="crayon-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>

澳门葡京 6

图片

综上,如果想在百事可乐图内完结缩放逻辑,必须通过

  • Coca Cola图长宽
  • 该图标原始长宽
  • 该图标在七喜图中的偏移量

一起6个变量去贯彻。用动态样式语言的话,或许能够获得那样一个通用函数:

CSS

/* 百事可乐图icon img: 图片路径 spriteWidth: 合成的Coca Cola图的幅度
spriteHeight: 合成的Coca Cola图的尺寸 originWidth: 使用图片的本来宽度
originHeight: 使用图片的原来长度 width: 需求表现的增幅 height:
须求表现的长度 offsetX: Sprite图中的x轴偏移地点 offsetY:
七喜图中的y轴偏移位置 horizontal: 水平定位 hDuration: 水平定位偏移
vertical: 垂直定位 vDuration: 垂直定位偏移 relativePos: 相对稳定 */
.pseudo-icon-sprite (@img, @spriteWidth, @spriteHeight, @originWidth,
@originHeight, @width, @height, @offsetX, @offsetY, @horizontal:left,
@hDuration:0, @vertical:center, @vDuration:0, @relativePos:relative) {
… }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/*
雪碧图icon
img: 图片路径
spriteWidth: 合成的雪碧图的宽度
spriteHeight: 合成的雪碧图的长度
originWidth: 使用图片的原始宽度
originHeight: 使用图片的原始长度
width: 需要呈现的宽度
height: 需要呈现的长度
offsetX: 雪碧图中的x轴偏移位置
offsetY: 雪碧图中的y轴偏移位置
horizontal: 水平定位
hDuration: 水平定位偏移
vertical: 垂直定位
vDuration: 垂直定位偏移
relativePos: 相对定位
*/
.pseudo-icon-sprite (@img,
    @spriteWidth, @spriteHeight,
    @originWidth, @originHeight,
    @width, @height,
    @offsetX, @offsetY,
    @horizontal:left, @hDuration:0,
    @vertical:center, @vDuration:0,
    @relativePos:relative) {
    …
}

如上,大家做到了把七喜图中的图标缩放后表现在页面上的这一对象。

什么样,看到这些解决方案,有没有一种把代码删光,把大中小八个图标都塞进七喜图的冲动?

做出来的页面在各类手机端看起来的物理大小(中度)是均等的,所以在大屏手机会觉得页面稍小,小屏手机页面稍大

transform scale方法

由zoom缩放自然联想到了transform里的scale缩放方法。
关于zoom和transform scale的分别可以查看那两篇小说:
http://www.zhangxinxu.com/wordpress/2015/11/zoom-transform-scale-diff/
http://www.cnblogs.com/Hchun/p/5291400.html

transform scale方法代码:

.icon{
      width: 20px;
      height: 20px;
      background-position: -100px -80px;
}
//设计稿宽度为640px,所有值均和设计稿取值一致
@media only screen and (max-width: 320px){
     .icon{-webkit-transform:scale(0.5);transform:scale(0.5);}
}

澳门葡京 7

效果图

单独地用transform
scale方法,确实可以较周到地化解边框被裁剪的标题,不过其在页面中的地点却反常了。商量发现有三个原因:

  1. transform scale默许景况下是相对于元素主旨举办缩放的。
  2. transform
    scale只会对元素本身举办缩放,在页面渲染的时候,会先渲染元素原始的分寸,再举行缩放。缩放的时候不会再招惹页面的重绘,因而元素原始尺寸有多大,就会占用页面多大的上空,和缩放无关。

那有没有解决方案,可以保留transform
scale完美表现图标的亮点,又能够达成页面精准布局的方法吗?

冷静一下,再思考方案

不就是缩放么?background-size会扯出这么多难点,不是还有个transform么?会现出同样的难题么?
那么要取得正确的功效的话,以推广两倍为例,要求形成:
恩?好像就加一行代码?

CSS

.message:after { … transform: scale(2); }

1
2
3
4
.message:after {
    …
    transform: scale(2);
}

可以吗,就是那样。两者分别也很简短,因为一个功力在要素上,一个效果在七喜图上,所未来人会带出n多副功用。

那么一旦须要缩放到一定尺寸时,还索要精晓原始尺寸,通过测算获得一个缩放周全,那样才能最后达到所需的效果。

假若要使高度能更好的适应各类手机显示屏,要求写太多的媒体询问样式,功能低下

transform scale & :before方法

一经给元素再装进一层容器,让父容器大小和因素一致,再让要素脱离文档流,始终相对于父容器定位呢?理论上是可以达成的,不过这么会多伸张一层标签。因而,自然想到了伪元素:before和:after,让伪元素体现图标。
现实代码如下:

.icon{
      width: 0.2rem;
      height: 0.2rem;
      position: relative;
}
.icon:before{
      width: 20px;
      height: 20px;
      background-position: -100px -80px;
      position: absolute;
      left: 0;
      top: 0;
      -webkit-transform-origin: 0 0; //让元素相对于左上角进行缩放
      transform-origin: 0 0;
}
@media only screen and (max-width: 320px){
     .icon:before{-webkit-transform:scale(0.5);transform:scale(0.5);}
}

诸如此类基本上就能担保图标完整且岗位准确。

澳门葡京 8

然则那几个方法最大的欠缺,是充实了css里面的代码量。

至于rem、zoom、transform scale两种方法完成移动端的CSS
Coca Colas,其优缺点都是显然的,在品种中可以依照具体意况来衡量接纳哪类格局。

末段的下结论

回首一下,一个大概的缩放需求,出现了二种缓解方案:

  1. 最无脑的百分之百放进Coca Cola图中
  2. 最冗长的修改background-size
  3. 以及最简便的transform变形

澳门葡京 ,貌似情形下,如故无视第三种方案吗。那么在1和3两者中间,则各有取舍。现在回想整个寻求解决方案的进程,个人照旧相比赞同方案1的,毕竟,大概从未什么出错的或是。而且都是均等张雪碧图,并没有越多的伸手数,只是多了点图片大小而已。

全屏背景图片跟页面元素必要耦合时,元素位置的确定进一步困难(可能要求经过百分比去确定因素的横向地点,但一贯会有误差)

相关参考资料

一种百事可乐图自动化方案的设想

MDN:background-size

1 赞 2 收藏
评论

澳门葡京 9

不久前在虎扑上看看流云诸葛总括的一篇文章《从天涯论坛与Tmall的font-size思考前端设计稿与工作流》,其中介绍到的三种Web
App适配方案,大家现在的做法恰恰是跟前程无忧类似的概括方案,当然就会有地方我关系的片段题材,最终经过预研和demo测试,咱们应用了乐乎跟Taobao的方案,其实那二者的方案是相差无几,都是依据rem的适配方案。

2、解决难题的方案

博客园跟Tmall的方案介绍在上头流云诸葛的稿子中一度写的很明亮了,提出可以先看看那篇文章再阅读上面我所说的,可能会越来越清楚。

(1)方案的简便介绍: 基于rem

前提:页面元素的布局尺寸全都以设计稿为尺度等比例设置。

给html根节点设置一个基础font-size值,然后页面的兼具因素布局均相对于该font-size值采纳rem单位设定。那么基础的font-size值该怎么取呢?

倘诺通过媒体询问设置font-size,只好解决部分的意况,而且并不可能不辱职务适配,因为手机屏幕宽度类型实在太多了,所以font-size的取值要通过js总结,取当前viewport的deviceWidth与设计稿的宽

比例值,例如:我们的统筹稿尺寸都是640px的,iphone5的deviceWidth是320px,那么计算出来的font-size值就是
320 / 640 =
0.5,因为得出的font-size太小,不便利总结,且部分浏览器可能不般配太小字号,所以将font-size放大100倍,所以最后总结出来的font-size为
320 / 640 * 100 = 50(px);
当然,这么些值是根据安顿稿来计算的,所以按照测算规则,上边列出两种普遍设计稿相应的font-size值:

deviceWidth = 320,font-size = 320 / 6.4 = 50px

deviceWidth = 375,font-size = 375 / 6.4 = 58.59375px

deviceWidth = 414,font-size = 414 / 6.4 = 64.6875px

deviceWidth = 500,font-size = 500 / 6.4 = 78.125px

可在script标签加上如下代码

(function() {

document.addEventListener(‘DOMContentLoaded’,function() {

varhtml = document.documentElement;

varwindowWidth = html.clientWidth;

html.style.fontSize = windowWidth / 6.4 +’px’;

// 等价于html.style.fontSize = windowWidth / 640 * 100 + ‘px’;

},false);

})();

// 那么些6.4就是根据设计稿的横向宽度来规定的,假诺你的设计稿是750

// 那么 html.style.fontSize = windowWidth / 7.5 + ‘px’;

时至后天,font-size的基本功值就规定好了,而且知道该font-size值是手机deviceWidth跟设计稿的比例值
的 100倍(主要)

(2)那么页面元素该怎么设置宽高、边距

比如:一个布置稿宽高为140px的图标,右边距为50px,那么它的css应该如此写

.icon {

width: 1.4rem;/* 像素换算rem:140px / 100 = 1.4rem */

height: 1.4rem;

margin: 0 0 0 .5rem;

}

因为html的font-size是推广了100倍,所以测算rem时,要用设计稿的骨子里像素除以100,140px
/ 100 = 1.4rem; 最终实际上的像素大小就会由deviceWidth跟设计稿的横向宽 的
比例 自动统计出来。

如图诺基亚5上面的功效:

澳门葡京 10

iPhone6的效果:

澳门葡京 11

可以看出来:html的font-size动态根据deviceWidth改变,图标的宽高、边距等也根据font-size动态按百分比变化,马到功成了?不对,相信机智的你早已见到貌似在BlackBerry6的下有的图标背景错位了。。是的,那暴露出了一个背景使用Pepsi-Cola图的一个害处(由于font-size小数点太多,总结出实际背景图大小background-size跟背景图地点background-position时浏览器精度不够或者就会晤世岗位的不是(我猜的),这几个前边还会详细讲解决方案)

到那里,设置宽高、边距等都OK了,接下来…

(3)其余因素的字体大小该怎么设置?

在流云诸葛的稿子中讲到,搜狐跟天猫商城的做法都是运用额外的传媒询问设置三种字体大小,例如:

@mediascreen and (max-width: 320px) {

body{font-size: 14px;}

}

@mediascreen and (min-width: 321px) and (max-width: 413px) {

body{font-size: 16px;}

}

@mediascreen and (min-width: 414px) and (max-width: 639px) {

body{font-size: 17px;}

}

@mediascreen and (min-width: 640px) {

body{font-size: 18px;}

}

可怎么不用rem呢?后来去查了一番资料,发现有一种叫做点阵字体的存在(什么是点阵字体),也叫作位图字体,位图大家都知情,跟矢量图是有分别的,就是放大会模糊,所以点阵字体也是放大会模糊的,即使依据rem设置字体大小,字体会自由缩放,可能就会造成点阵字体模糊,所以要求设定使用二种固定大小的书体。不过,在常规情形下,系统自带的字体都是矢量字体,所以选择rem为单位是从未难点的,除非您的网页要求选拔特殊的点阵字体。

小结:假若网页没有应用特殊的点阵字体,字体单位接纳rem,即使用到了点阵字体,字体须求经过媒体询问设置两种固定大小的书体

(4)关于背景图片的错位难点

地点已经发现了,通过换算rem设置background-size跟background-position的时候,在有些部手机型号下会油但是生背景图错位的图景,可是一旦不用rem设置的话,又无法达标适配的目标。(background-size、background-position的rem换算方法跟前边讲的宽高设定一样,都是统筹稿尺寸(那时应该是百事可乐图的原始尺寸)除以100倍)

末段通过尝试,得出了三种缓解方案:

1)如图(推荐方案):

澳门葡京 12

图标的样式

.icon {

width: 1.4rem;

height: 1.4rem;

background-image: url(sprite.png);

background-repeat: no-repeat;

background-size: 1.4rem;

}

.icon3 {

background-position: 0 -2.8rem;

}

化解措施,如图:

澳门葡京 13

代码如下:

.icon-fix {

background: none;

position: relative;

overflow: hidden;

}

.icon-fix:after {

content:”;

display: block;

width: 10000%;

height: 10000%;

position: absolute;

left: 0;

top: 0;

background-image: url(sprite.png);

background-repeat: no-repeat;

background-size: 140rem;

-webkit-transform-origin: 0 0;

-webkit-transform: scale(.01);

transform-origin: 0 0;

transform: scale(.01);

}

.icon3:after {

background-position: 0 -280rem;

}

所有相关代码(传送门)。

2)不选用Coca Cola图,使用单个背景图,那些时候就不设有background-position的内需,只需设定background-size:
contain;即可,这样做的流弊就在于不可以使用Coca Cola图,图片请求增多,适用于页面图标较少的图景

3)使用嵌套img标签,通过相对定位模拟background-position,具体请看responsive-sprites,那种做法须要愈来愈多的价签,且img图片只能够放图标尺寸大小同等的Pepsi-Cola图,而且不可以因而媒体询问利用多倍图

以上3中解决方案第一种最优,当然有些非凡情况也许必要按需选拔!

原稿地址:http://www.cocoachina.com/webapp/20151110/14148.html

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website