前端|CSS信封的制作方法

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

1.边框的设计

利用Hbuilder来制作一个信封，此处使用的是先制作信封边框再进行文字加入的方法来设计。

观察常用的普通信封，不难看出需要在css中设计的边框就只有两个（一个是信封总的一个大边框，而另一个则为贴邮票处的小框）。从大框开始着手，先是在界面中引入边框代码如下：

.box1 {

margin: 100px auto;

width: 480px;

height: 300px;

padding: 10px;

border: 5px solid beige;

font-size: 30px;

border-style: solid; background: darkgoldenrod;

}

这样就能够大概设计出一个信封比例的原型（包括背景色）。之后再进行小边框的设计，与大边框类似

.box2 {

margin: 0px auto;

width: 60px;

height: 60px;

padding: 10px;

border: 3px solid black;

font-size: 30px;

border-style: solid; background: darkgoldenrod;

float: right;（**）

}

与大边框的代码使用大同小异，只是在此处为了能使得小边框镶入大边框中加入了浮动（float）的使用。

2.文字的加入

文字的加入相对较为简单，具体使用代码如下

<div>

61500

<div>

贴邮票处

</div>

<u>

<p style="font-size: 20px; margin-left: 30px;">四川省成都市龙泉驿区459号</p>

<p style="font-size: 20px; margin-left: 50px;">四川省凉山州西昌市*********</p>

</u>

</div>

由代码可看出，可先设计出除小边框以外的文字，控制字的大小、边距来使得输入的内容达到信封的效果。具体代码截图及设计成品如下

前端|CSS信封的制作方法

图2.1 关键代码截图

前端|CSS信封的制作方法

图2.2 成果展示

在本次设计使用中，首先应特别注意的是浮动（float）再小边框设计中的使用，没有浮动的使用无法无法达到理想的设计效果。除此之外，文字在这里的使用也应特别注意文字输入后的大小及位置，每一个文字都影响着信封样式的还原。

END

主编 | 张祯悦

责编 | 陈宇杰

where2go 团队

微信号：算法与编程之美

前端|CSS信封的制作方法

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！

前端|CSS信封的制作方法

相关推荐