canvas 入门实战–邀请卡生成与下载

2018/01/04 · HTML5 ·
Canvas

原文出处: 守候   

移动端样式小技巧

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

原文出处: 大坚   

等高分栏布局小结

2016/02/06 · CSS ·
等高分栏

原文出处: 流云诸葛   

上一篇文章《圣杯布局小结》总结了几种常见的分栏布局方法,这几个方法都可以实现多栏页面下,所有栏的高度可动态变化,某一栏宽度自适应的布局效果,能满足工作中很多布局需求。后来我在搜集更多关于分栏布局的文章时,发现了一个新的问题,这个问题在前面那篇文章中也有朋友在评论里跟我提起,就是如何在实现分栏布局的同时保证每栏的高度相同。我发现这种等高分栏布局的情况,在网站里面其实也很常见,所以本文总结了几种可用的方法来解决这个新的需求。

1.前言

写了很多的javascript和css3的文章,是时候写一篇canvas的了。canvas是html5提供的一个新的功能!至于作用,就是一个画布。然后画笔就是javascript。canvas的用途非常的广,特别是html5游戏以及数据可视化这两个方面。现在canvas给我的感觉就和css3一样,可以不用太厉害,但是必须要会基础的用法。但是以后对canvas的需求,肯定会越来越大。所以canvas很值得学习,而且学好canvas,就是很好的一个加分项。对于这篇文章,我也是以canvas初学者的角度写的,会有很多改善的地方。如果大家觉得我有什么可以改善的,或者建议,欢迎指点迷津!代码已上传github,需要的欢迎star(downloadImg)。

大家看这篇文章之前,要了解javascript的一些基础,也要看着了解一些canvas的api(canvas-MSN教程,canvas菜鸟教程)

平时在移动端开发拼页面的过程中总会遇到一些问题,主要是各手机webview样式显示效果不一致造成的。以下总结了一些常见坑和一些小技巧,希望对看官有所帮助!

本文只针对两大手机阵营 Android和IOS 中的魅蓝metal 和
iPhone6进行样式对比。

1. 方法一:万能的flex

跟上篇文章不同,这次把flex这种方法放在了第一位,因为相比较起来,它是所有分栏布局方法里面,优点最多的,如果兼容性允许的话,很有必要在任何时候都优先使用它完成页面布局。如果你打开上篇文章,找到倒数第二部分关于flex实现分栏布局的代码,或者把上篇文章提供的代码下载下来,直接预览flex_layout.html,你会发现上篇文章的那段代码其实已经做到了等高分栏布局,同一段代码,可以实现上篇文章中提到的五种分栏布局,还可以实现本文提到的等高布局的情况,这种能力其它方法真的无法比拟。而它之所以能实现等高布局,跟一个flex的css属性有关系,这个属性是:align-item。它的默认值是:stretch,在flex
item元素比如layout__main或layout__aside的高度未定义或者为auto的情况下,会拉伸flex
item元素的高度或宽度,铺满flex的交叉轴,详细的原理可以通过上文提供的flex学习资源去了解,这里只做一个简单的引用说明。

2.邀请卡实例

邀请卡自动生成这个会有的,毕竟有时候,很多邀请卡都是一样的,就是被邀请的人不一样而已,也就是说,整个邀请卡,就是一个名字不一样,那么下面。就写一套代码,根据名字生成邀请卡!

一、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,iPhone文字就会下移,由于我们app的ios用户居多,并且android机型太多,不同机型也会显示不同,所以只能退而求其次了。

line-height的兼容问题不太好解决,容器高度越小,显示效果的差距越明显。稍微大一点的高度,最好把line-height设置为高度+1px,两个平台显示都还不错。


2. 方法二:使用table或者伪table

上篇文章中还有另外两种布局方法没有介绍,第一种就是这里要说的table布局或者伪table布局。table布局用的就是table
tr
td这些元素去实现,相信绝大部分web开发人员在入门html时,首先接触到的布局方法肯定就是table布局了,这种方法简单高效,用它做任何分栏布局都不是问题,只是因为table的嵌套结构太多,html冗杂,又不利于DOM的操作和渲染,用来布局不符合语义,总之缺点较多,所以目前的环境下,用的情况越来越少了。伪table布局其实跟table布局类似,只不过借助于css,可以让我们不直接使用table
tr td这些直接的表格元素,而是通过display: table, display: table-row,
display:
table-cell,改变元素的显示特性,让浏览器把这些元素当成table来渲染,这种渲染的表现跟用真实的table没有啥区别,就连那些table专用的css属性,比如table-layout,border-collapse和border-spacing,都能产生效果。table布局的方法已经很少被采用了,本文也就没必要再去介绍,但是伪table布局的方法值得学习一下,经过这两天的学习,发现伪table的方式相比直接用表格布局,有不少的优点,值得运用到工作中去。不过在说明使用伪table布局的方法之前,得先了解一些伪table相关的知识:

1)可用于伪table表现的display属性值有:

澳门微尼斯人手机版 4

2)当把一个元素的display属性设置成以上列出的值后,就可以把这个元素看成与该属性对应的表格元素,比如table-cell对应的就是td;同时,这个元素会拥有跟表格元素一样的特性,比如display:
table或者inline-table的元素可以使用table-layout,border-collapse和border-spacing这三个原本只有table才能生效的属性;display:table-cell的元素跟td一样,对宽度高度敏感,对margin值无反应,对padding有效。

3)关于table-cell还有一点要说明的就是,它会被其他一些CSS属性破坏,例如float,
position:absolute,所以这些个属性不能同时使用。

4)跟直接使用表格元素不同的是,在使用表格元素的时候需要完全遵守表格元素嵌套结构,也就是下面这种:

<table> <thead> <th></th> </thead>
<tbody> <tr> <td></td> </tr>
</tbody> <tfoot> <th></th> </tfoot>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
<table>
    <thead>
        <th></th>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <th></th>
    </tfoot>
</table>

而使用伪table的那些属性时,可以仅单独使用某一个属性,浏览器会在这些元素的外层包裹缺失的来保证伪table元素框嵌套结构的完整性,这些框跟常提到的行框一样都是不可见的,网上有的文章里也把这种做法叫做匿名表格。下面的这个代码中,tb-cell元素的外层没有加display:
table-row和display: table的元素:

.tb-cell { display: table-cell; padding: 10px; border: 1px solid #ccc;
} <div class=”tb-cell”>这是第1个display:
table-cell;的元素。</div> <div
class=”tb-cell”>这是第2个display: table-cell;的元素。</div>

1
2
3
4
5
6
7
8
.tb-cell {
    display: table-cell;
    padding: 10px;
    border: 1px solid #ccc;
}
 
<div class="tb-cell">这是第1个display: table-cell;的元素。</div>
<div class="tb-cell">这是第2个display: table-cell;的元素。</div>

这是第1个display: table-cell;的元素。这是第2个display:
table-cell;的元素。

1
这是第1个display: table-cell;的元素。这是第2个display: table-cell;的元素。

但是看到的效果是(蓝色背景是它们父层的一个包裹元素: width:
800px;margin-left: auto;margin-right: auto):

澳门微尼斯人手机版 5

因为浏览器自动在这两个元素的外层,加了跟能够跟tr和table起相同作用的框,来包含这两个元素形成的框,所以这两个元素看起来就跟实际的表格效果一样。假如浏览器没有做这个处理,这两个元素之间是不可能没有间隙的,中间会有一个因为换行符显示出来的空格。这种自动添加的框都是行内框,不是块级框。

接下来看看如何通过这些伪table的属性来完成上文的分栏布局以及本文要求的等高分栏布局,玩法有很多:(本文相关源码下载)

玩法一:模拟直接用表格布局(对应源码中table_layout1.html)

这种方法的思路是布局时完全按照表格的嵌套层次来处理,把display: table,
display: table-row, display:
table-cell都用上,相当于就是利用完整的table来做,比如说要实现上文的布局三(3栏布局,2个侧边栏分别固定在左边和右边,中间是主体内容栏),就可以这么干:

<div class=”layout”> <div class=”layout__row”> <aside
class=”layout__col layout__aside
layout__aside–left”>左侧边栏宽度固定</aside> <div
class=”layout__col
layout__main”>内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div>
<aside class=”layout__col layout__aside
layout__aside–right”>右侧边栏宽度固定</aside> </div>
</div>

1
2
3
4
5
6
7
<div class="layout">
    <div class="layout__row">
        <aside class="layout__col layout__aside layout__aside–left">左侧边栏宽度固定</aside>
        <div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div>
        <aside class="layout__col layout__aside layout__aside–right">右侧边栏宽度固定</aside>
    </div>
</div>

<style type=”text/css”> .layout { display: table; width: 100%; }
.layout__row { display: table-row; } .layout__col { text-align:
center; display: table-cell; } .layout__col + .layout__col {
border-left: 10px solid #fff; } .layout__main { background-color:
#4DBCB0; } .layout__aside { width: 200px; background-color: #daf1ef;
} </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style type="text/css">
    .layout {
        display: table;
        width: 100%;
    }
    .layout__row {
        display: table-row;
    }
    .layout__col {
        text-align: center;
        display: table-cell;
    }
    .layout__col + .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        background-color: #daf1ef;
    }
</style>

效果还是那个效果,而且天生支持等高布局:

澳门微尼斯人手机版 6

这个布局原理跟使用table是完全一样的,所以使用起来非常容易(以上提供的是针对上文布局三的实现,其它四个布局的实现不会再一一介绍了,源码里面也不会提供,因为相对比较简单)。

这种伪table布局有什么特点呢:

1)相比直接用表格元素,这种做法不需要考虑语义,表格元素是有语义的,主要是用来显示网页上列表型的数据内容,虽然可以完成布局,但是布局结构都是没有语义的,所以直接用表格不合适,而这种伪table布局的特点就是:它没有语义,但是可以像表格那样布局;

2)html的层次结构相比直接用table元素也要简单一些,我们这里只用到了3层,直接用table元素的话可能还有tbody这一层;

3)相比上文提到的那些布局方法,如圣杯布局和双飞翼布局,这个做法在css方面相对简单,在html方面也只多了一层嵌套;

4)缺点是分栏之间的间隔不能用margin和padding来做,如果用margin,这个属性在display:
table-cell的元素上根本不会生效;如果用padding,那像demo里面各栏的背景色就都会连到一块,做不出间隔的效果,如果在layout__col里面再嵌套一层,在这一层设置背景色的话,又会增加html的层次,也不是很好。我这里是投了个巧,用border处理了一下。

玩法二:去掉display: table-row(对应源码中的table_layout2.html)

前面说过,浏览器会用匿名表格的方式,添加缺失的框,所以玩法一中的代码,把layout-row完全去掉,一点都不影响布局效果:

div class=”layout”> aside class=”layout__col layout__aside
layout__aside–left”>左侧边栏宽度固定aside> div
class=”layout__col
layout__main”>内容栏宽度自适应br>高度增加一点,旁边的高度都会自动增加div>
aside class=”layout__col layout__aside
layout__aside–right”>右侧边栏宽度固定aside> div>

1
2
3
4
5
div class="layout">
    aside class="layout__col layout__aside layout__aside–left">左侧边栏宽度固定aside>
    div class="layout__col layout__main">内容栏宽度自适应br>高度增加一点,旁边的高度都会自动增加div>
    aside class="layout__col layout__aside layout__aside–right">右侧边栏宽度固定aside>
div>

style type=”text/css”> .layout { display: table; width: 100%; }
.layout__col { text-align: center; display: table-cell; }
.layout__col + .layout__col { border-left: 10px solid #fff; }
.layout__main { background-color: #4DBCB0; } .layout__aside {
width: 200px; background-color: #daf1ef; } style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
style type="text/css">
    .layout {
        display: table;
        width: 100%;
    }
    .layout__col {
        text-align: center;
        display: table-cell;
    }
    .layout__col + .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        background-color: #daf1ef;
    }
style>

玩法三:去掉display: table(对应源码中的table_layout3.html)

根据玩法二,可以试想一下是否能再把display:
table这一个属性给去掉,反正浏览器还会再添加框来包裹:

<div class=”layout”> <aside class=”layout__col
layout__aside layout__aside–left”>左侧边栏宽度固定</aside>
<div class=”layout__col
layout__main”>内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div>
<aside class=”layout__col layout__aside
layout__aside–right”>右侧边栏宽度固定</aside> </div>

1
2
3
4
5
<div class="layout">
    <aside class="layout__col layout__aside layout__aside–left">左侧边栏宽度固定</aside>
    <div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div>
    <aside class="layout__col layout__aside layout__aside–right">右侧边栏宽度固定</aside>
</div>

<style type=”text/css”> .layout__col { text-align: center;
display: table-cell; } .layout__col + .layout__col { border-left:
10px solid #fff; } .layout__main { background-color: #4DBCB0; }
.layout__aside { width: 200px; min-width: 200px; background-color:
#daf1ef; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
    .layout__col {
        text-align: center;
        display: table-cell;
    }
    .layout__col + .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        min-width: 200px;
        background-color: #daf1ef;
    }
</style>

效果是:

澳门微尼斯人手机版 7

这个并没有达到我们的效果,因为我需要主体内容栏能够自适应宽度。产生这个效果的原因是什么,就是因为没有加显示display:
table这一层,浏览器自动加了一个框,不过这个框是行内框,导致主体内容栏显示的宽度就跟内容的宽度一致了。为了解决这个问题,可以这么干,html结构不变,css稍加改动:

.layout__main { width: 3000px; background-color: #4DBCB0; }
.layout__aside { width: 200px; min-width: 200px; background-color:
#daf1ef; }

1
2
3
4
5
6
7
8
9
10
.layout__main {
    width: 3000px;
    background-color: #4DBCB0;
}
 
.layout__aside {
    width: 200px;
    min-width: 200px;
    background-color: #daf1ef;
}

关键的代码就是红色新增的那两行,首先给主体内容栏设置一个很长的宽度,而且只能用具体的长度设置,不能用百分比,然后给侧边栏设置一个最小宽度,免得主体内容栏把侧边栏的宽度给挤掉了。这个原理就是因为display:
table-cell的作用,导致layout__main跟layout__aside表现出跟td元素一样的特性,td默认的宽度就是可自动调整的,即使宽度设置的很大,也不会撑破table的宽度,这里虽然那个自动添加的框看不到,但是这个框的最大宽度也就是浏览器的宽度,layout__main不会打破这个宽度的,所以可以放心使用。

玩法四:去掉layout这一层包裹元素(对应源码:table_layout4.html)

如果网站比较简单,去掉layout这一层包裹元素也是可以的:

<header>顶部</header> <aside class=”layout__col
layout__aside layout__aside–left”>左侧边栏宽度固定</aside>
<div class=”layout__col
layout__main”>内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div>
<aside class=”layout__col layout__aside
layout__aside–right”>右侧边栏宽度固定</aside>
<footer>底部</footer>

1
2
3
4
5
<header>顶部</header>
<aside class="layout__col layout__aside layout__aside–left">左侧边栏宽度固定</aside>
<div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div>
<aside class="layout__col layout__aside layout__aside–right">右侧边栏宽度固定</aside>
<footer>底部</footer>

<style type=”text/css”> .layout__col { text-align: center;
display: table-cell; line-height: 50px; } .layout__col +
.layout__col { border-left: 10px solid #fff; } .layout__main {
width: 3000px; background-color: #4DBCB0; } .layout__aside { width:
200px; min-width: 200px; background-color: #daf1ef; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
    .layout__col {
        text-align: center;
        display: table-cell;
        line-height: 50px;
    }
    .layout__col + .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        width: 3000px;
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        min-width: 200px;
        background-color: #daf1ef;
    }
</style>

以上四种做法都能实现我们想要的分栏等高布局,兼容性方面,不考虑IE8及以下,其它浏览器几乎没有问题。

由于匿名表格的作用,导致采用伪table布局的方法变得非常简洁,上文之所以没提到这个做法,是因为完全不知道有匿名表格这回事,我也是写这篇文章才学习到的,学完之后,发现又找到了一个做分栏布局的好办法,希望前面的这些介绍能帮助你掌握好这个用法。实际上伪table的这些属性,尤其是table-cell,用途非常多,本文没有办法一一介绍,但是能提供一个思路,将来工作中也许有很多其它布局场景,我们都可以想想用table-cell来处理。

2-1.运行效果澳门微尼斯人手机版 8

html代码

JavaScript

<html> <head> <meta charset=”utf-8″>
<title>下载图片</title> <style> .set-option { float:
left; width: 400px; } .set-option .text { width: 200px; height: 40px;
padding-left: 10px; border-radius: 4px; border: 1px solid #ccc; }
.set-option td { padding: 10px 0; } .set-option td:first-child {
text-align: right; padding-right: 10px; } .set-option p { margin: 0;
line-height: 16px; } .check-box { width: 16px; height: 16px; margin: 0;
vertical-align: top; } button { width: 200px; height: 50px; border:
none; color: #fff; font-size: 16px; cursor: pointer; display: block;
margin: 10px auto; } button:hover { opacity: .9; } .btn-all {
background: #f90; } .btn-save { background: #09f; } .btn-download {
background: #4CAF50; } </style> </head> <body>
<div> <div class=”set-option”> <table> <tr>
<td>画布尺寸</td> <td><input type=”text”
class=”text” id=”size”/></td> </tr> <tr>
<td>背景图片</td> <td><input type=”file”
id=”file”/></td> </tr> <tr>
<td>用户名</td> <td> <input type=”text”
class=”text” id=”user-name”/> </td> </tr> <tr>
<td>用户名x坐标</td> <td> <input type=”number”
class=”text” id=”text-option-x”/></br> <p><input
type=”checkbox” class=”check-box” value=”1″
id=”is-center-x”>居中显示</p> </td> </tr>
<tr> <td>用户名y坐标</td> <td> <input
type=”number” class=”text” id=”text-option-y”/></br>
<p><input type=”checkbox” class=”check-box” value=”1″
id=”is-center-y”>居中显示</p> </td> </tr>
<tr> <td>用户名字体大小</td> <td><input
type=”number” class=”text” id=”text-size”/></td> </tr>
<tr> <td>文字颜色</td> <td><input type=”text”
class=”text” id=”text-color”/></td> </tr> <tr>
<td>图片类型</td> <td> <select type=”text”
class=”text” id=”img-type”> <option
value=”jpg”>jpg</option> <option
value=”png”>png</option> </select> </td>
</tr> </table> <button id=”save-image”
class=”btn-save”>效果预览</button> <button id=”download-img”
class=”btn-download”>下载当前图片</button> <button
id=”download-all” class=”btn-all”>批量导出</button>
</div> <div class=”show-canvas”> <canvas width=200
height=200 id=”thecanvas”></canvas> </div> </div>
</body> </html>

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<html>
<head>
    <meta charset="utf-8">
    <title>下载图片</title>
    <style>
        .set-option {
            float: left;
            width: 400px;
        }
 
        .set-option .text {
            width: 200px;
            height: 40px;
            padding-left: 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
        }
 
        .set-option td {
            padding: 10px 0;
        }
 
        .set-option td:first-child {
            text-align: right;
            padding-right: 10px;
        }
 
        .set-option p {
            margin: 0;
            line-height: 16px;
        }
 
        .check-box {
            width: 16px;
            height: 16px;
            margin: 0;
            vertical-align: top;
        }
 
        button {
            width: 200px;
            height: 50px;
            border: none;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            display: block;
            margin: 10px auto;
        }
 
        button:hover {
            opacity: .9;
        }
 
        .btn-all {
            background: #f90;
        }
 
        .btn-save {
            background: #09f;
        }
 
        .btn-download {
            background: #4CAF50;
        }
    </style>
</head>
<body>
<div>
    <div class="set-option">
        <table>
            <tr>
                <td>画布尺寸</td>
                <td><input type="text" class="text" id="size"/></td>
            </tr>
            <tr>
                <td>背景图片</td>
                <td><input type="file" id="file"/></td>
            </tr>
            <tr>
                <td>用户名</td>
                <td>
                    <input type="text" class="text" id="user-name"/>
                </td>
            </tr>
            <tr>
                <td>用户名x坐标</td>
                <td>
                    <input type="number" class="text" id="text-option-x"/></br>
                    <p><input type="checkbox" class="check-box" value="1" id="is-center-x">居中显示</p>
                </td>
            </tr>
            <tr>
                <td>用户名y坐标</td>
                <td>
                    <input type="number" class="text" id="text-option-y"/></br>
                    <p><input type="checkbox" class="check-box" value="1" id="is-center-y">居中显示</p>
                </td>
            </tr>
            <tr>
                <td>用户名字体大小</td>
                <td><input type="number" class="text" id="text-size"/></td>
            </tr>
            <tr>
                <td>文字颜色</td>
                <td><input type="text" class="text" id="text-color"/></td>
            </tr>
            <tr>
                <td>图片类型</td>
                <td>
                    <select type="text" class="text" id="img-type">
                        <option value="jpg">jpg</option>
                        <option value="png">png</option>
                    </select>
                </td>
            </tr>
        </table>
        <button id="save-image" class="btn-save">效果预览</button>
        <button id="download-img" class="btn-download">下载当前图片</button>
        <button id="download-all" class="btn-all">批量导出</button>
    </div>
    <div class="show-canvas">
        <canvas width=200 height=200 id="thecanvas"></canvas>
    </div>
</div>
</body>
</html>

效果如图,那么大家细想一下,关于一张邀请卡,有什么东西是需要改变的!看到上图相比不难发现!有如下需要改变的属性:图片的大小,图片,用户名,用户名的坐标(x,y,x轴是否居中,y轴是否居中),用户名字体的大小,用户名字体的颜色,以及下载图片的类型。

这样就得到了如下的参数(大家看到有些参数是有值的,可以想成默认值就行了)

var option = { img: ‘111.jpg’, width: 500, height: 350, fontSize: “20px
Microsoft YaHei”, color: “black”, text: ‘守候’, imgType: ‘jpg’, x: 30,
y: 30, xCenter: false, yCenter: false, };

1
2
3
4
5
6
7
8
9
10
11
12
13
var option = {
    img: ‘111.jpg’,
    width: 500,
    height: 350,
    fontSize: "20px Microsoft YaHei",
    color: "black",
    text: ‘守候’,
    imgType: ‘jpg’,
    x: 30,
    y: 30,
    xCenter: false,
    yCenter: false,
};

二、多行省略

一般我们的产品列表样式,会有标题行数的限制。

澳门微尼斯人手机版 9

怎么实现呢?

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:把标题容器的高度写死,这样写必须要考虑行高的坑,因为容器高度写死以后,不同机型行高实际上显示效果不一样。
澳门微尼斯人手机版 10 高度写少了,有的机型会这样。
澳门微尼斯人手机版 11 写多了可能会这样。

我的做法是,不影响布局的情况下尽量控制line-height值大一些,行与行的间距变大,容器高度的设定需要多测试一些机型,控制文字不多出也不被挡住。


3. 方法三:使用绝对定位

上文没有介绍的另外一种分栏布局方法就是这里要介绍的绝对定位。之所以没介绍这个方法,是因为上文介绍的都是分栏自适应布局的方法,而绝对定位的做法,不能完全做到我们想要的分栏自适应布局,分栏自适应有两个原则:第一是主体内容栏宽度自适应,这点绝对定位是可以做到的;第二点是所有栏的高度都能动态变化,并且不能导致父容器高度塌陷,不能在各栏内部出现滚动或溢出的情况,这点绝对定位不容易做到适用所有场景。而本文又把这种布局方法拿出来介绍,是因为绝对定位做等高布局很容易,所以用绝对定位做等高分栏布局是一种可行的办法,只是这种方法适用的场景有一些限制,需要根据实际情况考虑是否要采用。

做法一:所有栏都采用绝对定位(对应源码中absolute_layout1.html)

<header>顶部</header> <div class=”layout”> <aside
class=”layout__aside
layout__aside–left”>左侧边栏宽度固定</aside> <div
class=”layout__main”>内容栏宽度自适应</div> <aside
class=”layout__aside
layout__aside–right”>右侧边栏宽度固定</aside> </div>
<footer>底部</footer>

1
2
3
4
5
6
7
<header>顶部</header>
<div class="layout">
    <aside class="layout__aside layout__aside–left">左侧边栏宽度固定</aside>
    <div class="layout__main">内容栏宽度自适应</div>
    <aside class="layout__aside layout__aside–right">右侧边栏宽度固定</aside>
</div>
<footer>底部</footer>

<style type=”text/css”> .layout { height: 300px; position:
relative; } .layout__aside, .layout__main { position: absolute; top:
0; bottom: 0; } .layout__main { left: 210px; right: 210px; }
.layout__澳门微尼斯人手机版,aside { width: 200px; } .layout__aside–left { left: 0; }
.layout__aside–right { right: 0; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type="text/css">
    .layout {
        height: 300px;
        position: relative;
    }
    .layout__aside, .layout__main {
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .layout__main {
        left: 210px;
        right: 210px;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside–left {
        left: 0;
    }
    .layout__aside–right {
        right: 0;
    }
</style>

效果:

澳门微尼斯人手机版 12

这种布局方法的特点是:

1)主体内容栏是自适应的;

2)所有栏完全等高,效果跟flex布局和伪table布局的效果一样;

从这两点来看,这种绝对定位的方法还是比较好用的,不过它有一个非常大的使用限制,就是父元素的高度没有办法通过它的内部元素给撑起来,要用的话,必须想办法让父元素有高度,适合做父元素高度可知或者全屏布局。比如以下这个代码就是全屏布局的一个例子(对应源码中absolute_layout2.html):

header>顶部header> div class=”layout”> aside
class=”layout__aside
layout__aside–left”>左侧边栏宽度固定aside> div
class=”layout__main”>内容栏宽度自适应div> aside
class=”layout__aside
layout__aside–right”>右侧边栏宽度固定aside> div>
footer>底部footer>

1
2
3
4
5
6
7
header>顶部header>
div class="layout">
    aside class="layout__aside layout__aside–left">左侧边栏宽度固定aside>
    div class="layout__main">内容栏宽度自适应div>
    aside class="layout__aside layout__aside–right">右侧边栏宽度固定aside>
div>
footer>底部footer>

<style type=”text/css”> html,body { margin: 0; height: 100%; }
footer { position: absolute; bottom: 0; width: 100%; } .layout { width:
100%; position: absolute; top: 50px; bottom: 50px; } .layout__aside,
.layout__main { position: absolute; top: 0; bottom: 0; }
.layout__main { left: 210px; right: 210px; } .layout__aside { width:
200px; } .layout__aside–left { left: 0; } .layout__aside–right {
right: 0; } </style>

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
32
33
34
35
<style type="text/css">
    html,body {
        margin: 0;
        height: 100%;
    }
    footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    .layout {
        width: 100%;
        position: absolute;
        top: 50px;
        bottom: 50px;
    }
    .layout__aside, .layout__main {
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .layout__main {
        left: 210px;
        right: 210px;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside–left {
        left: 0;
    }
    .layout__aside–right {
        right: 0;
    }
</style>

效果:

澳门微尼斯人手机版 13

做法二:侧边栏绝对定位,主体内容栏保持流式布局(对应源码中absolute_layout3.html)

<div class=”layout”> <aside class=”layout__aside
layout__aside–left”>左侧边栏宽度固定</aside> <div
class=”layout__main”>内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div>
<aside class=”layout__aside
layout__aside–right”>右侧边栏宽度固定</aside> </div>

1
2
3
4
5
<div class="layout">
    <aside class="layout__aside layout__aside–left">左侧边栏宽度固定</aside>
    <div class="layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div>
    <aside class="layout__aside layout__aside–right">右侧边栏宽度固定</aside>
</div>

<style type=”text/css”> .layout { position: relative; }
.layout__aside { position: absolute; top: 0; bottom: 0; }
.layout__main { margin: 0 210px; } .layout__aside { width: 200px; }
.layout__aside–left { left: 0; } .layout__aside–right { right: 0;
} </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style type="text/css">
    .layout {
        position: relative;
    }
    .layout__aside {
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .layout__main {
        margin: 0 210px;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside–left {
        left: 0;
    }
    .layout__aside–right {
        right: 0;
    }
</style>

效果:

澳门微尼斯人手机版 14

这个方法的特点是:

1)主体内容栏是宽度自适应的;

2)所有栏也是完全等高的;

上面的代码中,layout__main通过magin来给侧边栏留出空间,其实也可以在layout元素上添加padding来处理,作用是一样的。这个方法相比前一个方法好一点的是,父元素的高度可以通过主体内容栏给撑起来,不过由此也带来了一个新问题,就是内容栏高度不够的时候,侧边栏就会出现溢出或者滚动,解决这个新问题的办法有2个:第一,如果侧边栏的内容都是已知的,并且没有折叠展开这种会改变侧边栏内容高度的功能,那么可以给layout设置一个min-height来处理;第二,如果侧边栏的内容是动态的,除了给layout加min-height之外,还得在每次改变侧边栏内容的时候,主动去调整主体内容栏的高度,如果主体内容栏的高度小于侧边栏的高度,就要更新主体内容栏的高度。不过如果你的内容栏的内容很多,侧边栏内容较少的话,就不用考虑这个新问题了。

绝对定位的做法就是这样,第一种限制较高;第二种稍微强一些,在一些场景下,可能还得借助JS来处理,所以综合起来不算是一个非常好的方式。只有你的布局需求恰好满足它的条件时,可能才会考虑使用它,就像上文中我提出的项目一的需求,就一定要用绝对定位的布局来做。

发表评论

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