前端|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: 40px;">陈XX 收******************</p> <p style="font-size: 20px; margin-left: 50px;">四川省凉山州西昌市*********</p> <p style="font-size: 20px; margin-left: 60px;">林XX **********************</p> </u> <p style="margin-top: 30px;margin-left: 280px;font-size: 30px;">邮政编码:*****</p> </div> |
|---|
由代码可看出，可先设计出除小边框以外的文字，控制字的大小、边距来使得输入的内容达到信封的效果。具体代码截图及设计成品如下
图2.1 关键代码截图
图2.2 成果展示
在本次设计使用中，首先应特别注意的是浮动（float）再小边框设计中的使用，没有浮动的使用无法无法达到理想的设计效果。除此之外，文字在这里的使用也应特别注意文字输入后的大小及位置，每一个文字都影响着信封样式的还原。