移动端样式小技巧
分类:前端技术

移动端样式小手艺

2016/08/13 · CSS · 1 评论 · 移动端

原作出处: 大坚   

Ba la la la ~ 读者对象们,你们好啊,又到了冷锋时间,话非常的少说,发车!

平常在运动端支付拼页面包车型地铁进度中总会碰到有个别标题,首若是各手提式有线话机webview样式展现效果不平等导致的。以下计算了部分常见坑和部分小工夫,希望对看官有所扶植!

正文只针对两大手提式有线话机阵营 Android和IOS 中的魅蓝metal 和 小米6举办体制比较。


一、line-height

line-height平日用来文字居中,当然也可以有同伙会用上下padding去写.but!不管您用padding照旧line-height,分化手机显示效果依旧…区别样。

平时会如此写

CSS

.demo{ height:16px; line-height:14px; font-size:9px; border:1px solid #ff6815; }

1
2
3
4
5
6
.demo{
    height:16px;
    line-height:14px;
    font-size:9px;
    border:1px solid #ff6815;
}

图片 1

嗯,在大家的chrome由于字体小于9px已经看不出边框和字中间的闲暇了,再来看看Android和IOS的

图片 2 魅蓝文字已经飞起~
图片 3 ios符合规律展现

如果把line-height加1px,One plus文字就能够下移,由于大家app的ios客户居多,并且android机型太多,区别机型也会展示差别,所以只能退而求其次了。

line-height的宽容难题不太好化解,容器高度越小,显示效果的歧异越鲜明。稍微大学一年级些的冲天,最棒把line-height设置为中度 1px,多少个阳台突显都还不易。


一、line-height

二、多行省略

貌似大家的成品列表样式,会有题目行数的限制。

图片 4

怎么落到实处啊?

CSS

.demo{ display: -webkit-box; //1.设置display类型为-webkit-box font-size: 14px; line-height: 18px; overflow: hidden; //2.设置元素超过遮盖text-overflow: ellipsis; //3.设置超过样式为简易号 -webkit-line-clamp: 2; //4.设置2行应用省略 -webkit-box-orient: vertical; }

1
2
3
4
5
6
7
8
9
.demo{
    display: -webkit-box;    //1.设置display类型为-webkit-box
    font-size: 14px;
    line-height: 18px;
    overflow: hidden;        //2.设置元素超出隐藏
    text-overflow: ellipsis; //3.设置超出样式为省略号
    -webkit-line-clamp: 2;   //4.设置2行应用省略
    -webkit-box-orient: vertical;
}

那般设置还要缅怀贰个最佳的图景,正是标题不足两行。具体要看PM的需要,一是空出第二行的离开,二是让标题上边包车型地铁因素顶上去。假使是率先种需要,有2种缓慢解决的方案。
1:把上边的成分都利用position:absoulte固定到一定的地点,不受题目行数影响。
2:把题目容器的惊人写死,那样写必须求考虑行高的坑,因为容器中度写死未来,差别机型行高实际上展现效果不雷同。
图片 5 高度写少了,有的机型会如此。
图片 6 写多了恐怕会这样。

本身的做法是,不影响布局的事态下尽大概调节line-height值大片段,行与行的间距变大,容器中度的设定要求多测量试验一些机型,调整文字非常少出也不被屏蔽。


line-height平时用于文字居中,当然也许有同伙会用上下padding去写.but!不管您用padding照旧line-height,区别手提式有线话机显示效果还是…分化样。

三、角标的兑现

图片 7
有的是项目ui会须要大家画这种梯形角标。难题来了

1.大家不明确角标内容的长度
2.角标的底色无法定死,能定死(能定死的话平素切个小身形就行了)

平日就是一段文案前边拼接一个三角,三角形很好写

CSS

.script { width: 0; height: 0; //调控宽高为0,用border宽度撑出贰个三角形形 border-right: 10px solid transparent; border-top: 15px solid #c59c53; }

1
2
3
4
5
6
.script {
    width: 0;
    height: 0;        //控制宽高为0,用border宽度撑出一个三角形
    border-right: 10px solid transparent;
    border-top: 15px solid #c59c53;
}

自个儿看来的率先种写法是把三角形直接拼在前头的文案后边,当然那在iphone上是没非凡的。但在一些安卓机型上却会有1像素的间隙,就好像这么:
图片 8 我前日感受到安卓阵营浓烈的恶意
案由或者是固定在各安卓手提式有线电话机上会有例外的效果。。好像大家都以猕猴,长的却都不相同。

对此有个好的减轻方案:

XHTML

<p class="rongqi"> <span class="wenan">跟团游</span> <span class="script"></span> </p>

1
2
3
4
<p class="rongqi">
    <span class="wenan">跟团游</span>
    <span class="script"></span>
</p>

CSS

.rongqi {//容器 height: 15px; overflow: hidden;//设置超过遮掩 position: absolute; top: 0; left: 0; } .wenan{//文案 float: left; position: relative; //设置相对固定 z-index: 3; //设置层级不被三角形挡住 height: 15px; padding-left: 4px; line-height: 16px; color: #fff; font-size: 10px; } .script { width: 0; height: 0; border-right: 20px solid transparent; border-top: 30px solid #c59c53; //这里的30px实际上远远不仅仅容器的莫斯中国科学技术大学学 float: right; //正是为了中度超越被遮挡做出梯形的意义,包容各类机型 margin-left: -9px; }

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
.rongqi {//容器
    height: 15px;
    overflow: hidden;//设置超出隐藏
    position: absolute;
    top: 0;
    left: 0;
}
.wenan{//文案
    float: left;
    position: relative;    //设置相对定位
    z-index: 3;            //设置层级不被三角形挡住
    height: 15px;
    padding-left: 4px;
    line-height: 16px;
    color: #fff;
    font-size: 10px;
}
.script {
    width: 0;
    height: 0;
    border-right: 20px solid transparent;
    border-top: 30px solid #c59c53;    //这里的30px实际上远远超出容器的高度
    float: right;                      //就是为了高度超出被挡住做出梯形的效果,兼容各种机型
    margin-left: -9px;
}

如若剔除容器的overflow:hidden就能够看的更清楚:

图片 9


常常会如此写

四、图像和文字标题

图片 10

某些左近的布局举个例子图 文案的,有多种主意得以去写,比如padding-left background或者position padding-left或者before伪元素。
前三种格局都能够把图片做到相对的垂直居中,但是它们都以相对整行的容器进行一定的,由于line-height宽容难题的坑,图片实际上不肯定会和文字对齐。若是有图像和文字对齐的必要的话,个人提议才用before伪元一直布局,before能够相对文案来牢固。

CSS

p{ height:44px; line-height:45px; padding-left:40px; } p::before{ content: ''; display: inline-block; background: url("../img/xxx.png") center center no-repeat; background-size: contain; //这里把背景图片尺寸设置成contain,无需考虑图片拉伸的标题 width: 14px; height: 18px; margin: 0 5px -4px 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
p{
    height:44px;
    line-height:45px;
    padding-left:40px;
}
p::before{
    content: '';
    display: inline-block;
    background: url("../img/xxx.png") center center no-repeat;
    background-size: contain;    //这里把背景图片尺寸设置成contain,不需要考虑图片拉伸的问题
    width: 14px;
    height: 18px;
    margin: 0 5px -4px 0;
}

再有一种情形,我们的图文布局,是从数组中遍历出来的,类似下图:
图片 11
这种处境更合乎position去写,所以写样式必供给依附不一样情形去选取分外的章程。


.demo{
height:16px;
line-height:14px;
font-size:9px;
border:1px solid #ff6815;
}

五、左右小幅度自适应

第三个小才具结尾,图中的布局实际上是分左右两块的,根据ui的须要,文案是要左对齐,数字是要右对齐的。你也许首先想到的是把左臂的数字定位依旧退换到那,侧面的器皿加上个margin-right或者padding-right。这样能够兑现,不过两边的文案有无比情形出现。

意义大概是那般的:
图片 12
也可能是那般的
图片 13

因为您一贯不通晓两侧文案的尺寸到底是稍稍。
自家的方案是用box布局,侧面的容器设置box-flex:1,右边不管它:

XHTML

<li class="ent-li"> <img class="ent-img" src="img/1.png"> <div class="left">主题门票</div> <div class="right">10</div> </li>

1
2
3
4
5
<li class="ent-li">
    <img class="ent-img" src="img/1.png">
    <div class="left">主题门票</div>
    <div class="right">10</div>
</li>

CSS

.ent-li { margin-left: 45px; height: 44px; display: -webkit-box; //box布局并搞好同盟 display: box; position: relative; } .ent-li .left { -webkit-box-flex: 1; //box-flex:1决定宽度自适应 box-flex: 1; text-align: left; line-height: 45px; font-size: 16px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ent-li .right { //右边啥都不要管 text-align: right; line-height: 45px; font-size: 12px; color: #999; padding-left: 10px; }

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
.ent-li {
    margin-left: 45px;
    height: 44px;
    display: -webkit-box; //box布局并做好兼容
    display: box;
    position: relative;
}
.ent-li .left {
    -webkit-box-flex: 1; //box-flex:1控制宽度自适应
    box-flex: 1;
    text-align: left;
    line-height: 45px;
    font-size: 16px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ent-li .right {    //右侧啥都不用管
    text-align: right;
    line-height: 45px;
    font-size: 12px;
    color: #999;
    padding-left: 10px;
}

让大家看看最后可是条件下的呈现效果:
图片 14
或者:
图片 15

因为pm感到数字更注重,所以让文案去自适应,数字有多少长度就多少长度


图片 16

六、display:inline-block

光天化日,成分有3种为主显示框类型,block块级,inline-block行内块级,inline行内。
inline-block是一种奇特存在,能够安装宽高也得以使成分在一行排列。

我在付出中会境遇以下三种布局:

图片 17

图片 18

那三种布局都可以用float:left来写,可是变化完了还亟需知道浮动。所以能够间接把成分设置成inline-block大同小异能够自行排列

CSS

.rongqi{//每块容器 display: inline-block;//设置行内块级 width: 十分三; //设置宽度为三分之二 font-size: 12px; text-align: center; }

1
2
3
4
5
6
.rongqi{//每块容器
    display: inline-block;//设置行内块级
    width: 25%;           //设置宽度为1/4
    font-size: 12px;
    text-align: center;
}

此地会有个小坑,正是行内元素在档期的顺序和垂直排列的时候会有间距。形成这种结果

图片 19图片 20
左侧是暗许情况下的功用,左侧是改正后的遵循,左边第二行和第一行中间有段莫名的间距,那并非我们真正想要的。
解决的法子很简单:

CSS

.father{ font-size:0;//父容器字体大小设置成0,具体的字体大小应用在文案上 }

1
2
3
.father{
    font-size:0;//父容器字体大小设置成0,具体的字体大小应用在文案上
}

嗯,在我们的chrome由于字体小于9px已经看不出边框和字之内的茶余用完餐之后了,再来看看Android和IOS的

七、模拟滚动

图片 21
模仿滚动也是在类型中遭遇的科学普及布局。布局要求弹层出来后,弹层中的内容可以滚动,弹层背后的列表无法随弹层滚动而滚动。何况在弹层上海滑稽剧团动的时候,整个页面也不能够跟着滚动。
一贯上代码:

XHTML

<section class="father"> <section class="content-body"> <!--页面内容、蒙层、蒙层中的内容互为兄弟节点,防止点击时页面穿透--> </section> <section class="layout"> <!--页面内容、蒙层、蒙层中的内容互为兄弟节点,幸免点击时页面穿透--> </section> <section class="layout-body"> <!--页面内容、蒙层、蒙层中的内容互为兄弟节点,幸免点击时页面穿透--> </section> </section>

1
2
3
4
5
6
7
8
9
10
11
<section class="father">
    <section class="content-body">
    <!--页面内容、蒙层、蒙层中的内容互为兄弟节点,防止点击时页面穿透-->
    </section>
    <section class="layout">
    <!--页面内容、蒙层、蒙层中的内容互为兄弟节点,防止点击时页面穿透-->
    </section>
    <section class="layout-body">
    <!--页面内容、蒙层、蒙层中的内容互为兄弟节点,防止点击时页面穿透-->
    </section>
</section>

CSS

.father{ height: 533px; overflow-y: scroll;//页面中度设置为显示器高度,平时意况下超越滚动 } .content-body{ height: 533px; overflow-y: scroll;//内容中度设置为显示器中度,平常境况下超过滚动 } .layout{ height: 百分百; width: 100%; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); overflow: hidden; z-index: 1000000; } .layout-body{ height: 53%; width: 百分百; position: fixed; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); overflow: hidden; z-index: 一千001; }

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
28
29
30
31
.father{
    height: 533px;
    overflow-y: scroll;//页面高度设置为屏幕高度,正常情况下超出滚动
}
.content-body{
    height: 533px;
    overflow-y: scroll;//内容高度设置为屏幕高度,正常情况下超出滚动
}
.layout{
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    z-index: 1000000;
}
.layout-body{
    height: 46%;
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    z-index: 1000001;
}

当大家接触蒙层弹出时调控样式

CSS

.father{ height: 533px; overflow-y: hidden;//设置超过掩盖,那么页面不会触发滚动 } .content-body{ height: 533px; overflow-y: hidden;//设置超出掩饰,那么页面不会触发滚动 }

1
2
3
4
5
6
7
8
.father{
    height: 533px;
    overflow-y: hidden;//设置超出隐藏,那么页面不会触发滚动
}
.content-body{
    height: 533px;
    overflow-y: hidden;//设置超出隐藏,那么页面不会触发滚动
}

其一法子尽管完成了页面模拟滚动的效应,不过当蒙层弹出的时候设置了overflow:hidden会形成页面scrollTop产生0,页面相当于被滚到最上部了。假诺UI恐怕PM不甘于,请与他们撕逼。

2 赞 19 收藏 1 评论

图片 22

图片 23

魅蓝文字已经飞起~

图片 24

常规呈现

假诺把line-height加1px,三星文字就能够下移,由于大家app的ios顾客居多,并且android机型太多,区别机型也交易会示分歧,所以只可以退而求其次了。

line-height的包容难题不太好消除,容器中度越小,展现效果的反差越刚烈。稍微大学一年级点的中度,最棒把line-height设置为中度 1px,七个阳台展现都还不易。

二、多行省略

相似大家的出品列表样式,会有标题行数的限定。

图片 25

怎么落到实处啊?

.demo{
display: -webkit-box; //1.设置display类型为-webkit-box
font-size: 14px;
line-height: 18px;
overflow: hidden; //2.设置成分超过遮掩
text-overflow: ellipsis; //3.设置超过样式为简便号
-webkit-line-clamp: 2; //4.设置2行应用省略
-webkit-box-orient: vertical;
}

与此相类似设置还要思考叁个最棒的状态,便是标题不足两行。具体要看PM的需要,一是空出第二行的偏离,二是让标题上面包车型地铁成分顶上去。倘若是首先种须求,有2种缓和的方案。

1:把上面包车型客车成分都接纳position:absoulte定位到牢固的职位,不受标题行数影响。
2:把标题容器的莫斯中国科学技术大学学写死,那样写必需要挂念行高的坑,因为容器高度写死今后,不一样机型行高实际上展现效果差别。

图片 26

可观写少了,有的机型会这么。

图片 27

写多了或许会如此。

自己的做法是,不影响布局的景色下全力以赴调整line-height值大学一年级部分,行与行的间距变大,容器中度的设定要求多测量试验一些机型,调整文字相当少出也不被遮挡。

三、角标的落到实处


图片 28

成都百货上千项目ui会供给大家画这种梯形角标。难题来了

1.我们不鲜明角标内容的长度
2.角标的底色不能够定死,能定死(能定死的话平素切个小身材就行了)
管见所及正是一段文案前边拼接三个三角形,三角形很好写

.script {
width: 0;
height: 0; //调控宽高为0,用border宽度撑出多个三角
border-right: 10px solid transparent;
border-top: 15px solid #c59c53;
}

本身看出的首先种写法是把三角形间接拼在眼下的文案后面,当然那在iphone上是绝非难题的。但在一部分安卓机型上却会有1像素的茶余用完餐之后,就像是那样:

图片 29

自家后天感受到安卓阵营浓郁的恶心
由来可能是确定地点在各安卓手机上会有两样的效率。。好像大家都是猕猴,长的却都分化样。

对此有个好的实施方案:

<p class="rongqi">
<span class="wenan">跟团游</span>
<span class="script"></span>
</p>

.rongqi {//容器
height: 15px;
overflow: hidden;//设置超过掩盖
position: absolute;
top: 0;
left: 0;
}
.wenan{//文案
float: left;
position: relative; //设置相对固定
z-index: 3; //设置层级不被三角形挡住
height: 15px;
padding-left: 4px;
line-height: 16px;
color: #fff;
font-size: 10px;
}
.script {
width: 0;
height: 0;
border-right: 20px solid transparent;
border-top: 30px solid #c59c53; //这里的30px实际上远远不仅容器的冲天
float: right; //正是为了高度抢先被屏蔽做出梯形的作用,包容各样机型
margin-left: -9px;
}

假如剔除容器的overflow:hidden就能够看的更了解:

图片 30

四、图像和文字标题

图片 31

有个别广阔的布局比方图 文案的,有两种措施得以去写,比方padding-left background可能position padding-left恐怕before伪元素。
前三种格局都足以把图片做到相对的垂直居中,但是它们都是周旋整行的容器进行固定的,由于line-height包容难题的坑,图片实际上不料定会和文字对齐。假若有图像和文字对齐的急需的话,个人提出才用before伪成分来布局,before能够相对文案来牢固。

p{
height:44px;
line-height:45px;
padding-left:40px;
}
p::before{
content: '';
display: inline-block;
background: url("../img/xxx.png") center center no-repeat;
background-size: contain; //这里把背景图片尺寸设置成contain,没有须要思索图片拉伸的标题
width: 14px;
height: 18px;
margin: 0 5px -4px 0;
}

再有一种情景,大家的图像和文字布局,是从数组中遍历出来的,类似下图:

图片 32

这种场地更相符position去写,所以写样式一定要依赖差别意况去接纳非常的秘诀。

五、左右小幅度自适应

第八个小本领结尾,图中的布局实际上是分左右两块的,依照ui的须要,文案是要左对齐,数字是要右对齐的。你恐怕首先想到的是把左侧的数字定位依旧变化到那,左侧包车型大巴容器加上个margin-right或然padding-right。那样能够兑现,不过两边的文案有极致情形出现。

作用兴许是这么的:

图片 33

也说不定是这么的

图片 34

因为您根本不知情两边文案的长短到底是某些。
自身的方案是用box布局,侧面的容器设置box-flex:1,左侧不管它:

<li class="ent-li">
<img class="ent-img" src="img/1.png">
<div class="left">核心门票</div>
<div class="right">10</div>
</li>

.ent-li {
margin-left: 45px;
height: 44px;
display: -webkit-box; //box布局并做好合营
display: box;
position: relative;
}
.ent-li .left {
-webkit-box-flex: 1; //box-flex:1垄断宽度自适应
box-flex: 1;
text-align: left;
line-height: 45px;
font-size: 16px;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ent-li .right { //侧面啥都无须管
text-align: right;
line-height: 45px;
font-size: 12px;
color: #999;
padding-left: 10px;
}

让我们看看末领悟而条件下的彰显效果:

图片 35

或者:

图片 36

因为pm感觉数字更首要,所以让文案去自适应,数字有多少长度就多少长度

六、display:inline-block

大庭广众,成分有3种为主展现框类型,block块级,inline-block行内块级,inline行内。
inline-block是一种分外存在,能够设置宽高也得以使成分在一行排列。

自身在付出中会蒙受以下两种布局:

图片 37

图片 38

那二种布局都能够用float:left来写,不过变化完了还亟需明白浮动。所以能够一向把成分设置成inline-block一样能够自行排列

.rongqi{//每块容器
display: inline-block;//设置行内块级
width: 十分之四; //设置宽度为十分四
font-size: 12px;
text-align: center;
}

此处会有个小坑,就是行内成分在档期的顺序和垂直排列的时候会有间隔。形成这种结果

图片 39

图片 40

左侧是暗许意况下的作用,左边是革新后的功效,左边第二行和率先行中间有段莫名的间距,那实际不是我们实在想要的。
缓和的秘技相当粗略:

.father{
font-size:0;//父容器字体大小设置成0,具体的字体大小应用在文案上
}

七、模拟滚动

图片 41

效仿滚动也是在品种中相见的宽广布局。布局需求弹层出来后,弹层中的内容可以滚动,弹层背后的列表不能够随弹层滚动而滚动。况兼在弹层上海滑稽剧团动的时候,整个页面也不能够随着滚动。
直白上代码:

<section class="father">
<section class="content-body">

</section>
<section class="layout">

</section>
<section class="layout-body">

</section>
</section>

.father{
height: 533px;
overflow-y: scroll;//页面高度设置为显示屏高度,符合规律情形下当先滚动
}
.content-body{
height: 533px;
overflow-y: scroll;//内容惊人设置为显示屏中度,平常意况下抢先滚动
}
.layout{
height: 100%;
width: 100%;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
overflow: hidden;
z-index: 1000000;
}
.layout-body{
height: 46%;
width: 100%;
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
overflow: hidden;
z-index: 1000001;
}

当大家接触蒙层弹出时间调整制样式

.father{
height: 533px;
overflow-y: hidden;//设置超过遮蔽,那么页面不会触发滚动
}
.content-body{
height: 533px;
overflow-y: hidden;//设置超过遮蔽,那么页面不会触发滚动
}

以此格局尽管完成了页面模拟滚动的效力,可是当蒙层弹出的时候设置了overflow:hidden会促成页面scrollTop产生0,页面相当于被滚到最上部了。


以上为个体意见,如有雷同,纯属巧合,款待我们多提意见!Bey 了 个 Bey ~

本文由pc28.am发布于前端技术,转载请注明出处:移动端样式小技巧

上一篇:20款实用便捷的CSS3工具库及实例分享,二零一六 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • 又不理解怎么命名class了
    又不理解怎么命名class了
    怎么样鬼,又不驾驭怎么命名class了 2015/10/25 · CSS ·class 原稿出处:结一(@结一w3cplus)    信任写css的人都会遇见下边的标题:  糟糕,怎么命名这一个
  • 在行内元素前注入一个换行,right的使用说明
    在行内元素前注入一个换行,right的使用说明
    在行内元素前注入一个换行 2016/06/28 · CSS ·行内元素 原文出处: ChrisCoyier   译文出处:众成翻译    我遇到了一个小问题,我有一个 span 在 header 中,而
  • 标签的用法,标签区别
    标签的用法,标签区别
    考虑 pre 标签的样式 2016/06/02 · CSS ·标签 原文出处: ChrisCoyier   译文出处:众成翻译    你可能正在使用 pre 标签。这是一个 HTML中非常特别的标签,它
  • 异步JavaScript的进步历程,函数简化异步代码
    异步JavaScript的进步历程,函数简化异步代码
    异步JavaScript进化史 2015/10/14 · CSS 本文由 伯乐在线 -cucr翻译,唐尤华校稿。未经许可,禁止转载! 英文出处:GergelyNemeth。欢迎加入翻译组。 async函数近在
  • Canvas完毕监察和控制种类页面呈现,json工控风机
    Canvas完毕监察和控制种类页面呈现,json工控风机
    传说 HTML5 Canvas 达成客车站监察和控制 2017/11/21 · HTML5 ·Canvas 初稿出处: hightopo    陪伴国内经济的长足发展,大家对安全的渴求更为高。为了防卫下列景