前端|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>

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

图2.1 关键代码截图

图2.2 成果展示

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

END

主编 | 张祯悦

责编 | 陈宇杰

where2go 团队

微信号：算法与编程之美

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

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

前端|CSS信封的制作方法相关推荐

html圆角边框只有左边,border-radius以外的CSS圆角边框制作方法
CSS3的border-radius利用DIV+CSS生成圆角边框,在很多情况下都会用到,目前DIV+CSS的圆角边框,一种是利用CSS3,一种是利用布局模拟出圆角. 先说第一种,利用CSS3,前提是 ...
web前端css清除浮动的方法总结
方法1:祖先加高法 //不常用,不能适应页面的快速变化如果一个元素要浮动,那么它的祖先元素一定要有高度.有高度的盒子,才能关住浮动. 只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元 ...
前端 css 通用css_编写CSS简易方法简易前端
前端 css 通用css If you have just started writing CSS codes it's highly likely that you are having a har ...
前端开发css中怎么让图片居中？css图片居中的方法总结
在进行网页布局的时候,有时候图片的位置可能会影响整个页面的美观程度,所以对于图片的放置位置就得变化,那么,接下来的这篇文章将给大家来介绍关于图片在网页中如何使用css实现居中的方法,对于有需要的朋友来 ...
html局部可复制,截取网页局部区域css样式的方法和系统的制作方法
截取网页局部区域css样式的方法和系统的制作方法 [技术领域] [0001]本发明涉及计算机网络技术领域,特别是涉及一种截取网页局部区域CSS样式的方法和系统. [背景技术] [0002]CSS(Ca ...
移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法
移动端前端笔记 - 遇到的常见JS与CSS问题及解决方法参考文章: (1)移动端前端笔记 - 遇到的常见JS与CSS问题及解决方法 (2)https://www.cnblogs.com/zhaoda ...
黑马程序员前端-CSS练手之学成在线页面制作
前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结黑马程序员前端-CSS之emmet语法黑马程序员前端-CSS的 ...
SpringBoot前后端分离项目中如何制作前端jar包（类似swaggerUI前端jar包制作方法）
SpringBoot前后端分离项目中如何制作前端jar包(类似swaggerUI前端jar包制作方法) 可用于SpringBoot引用的前端UI的Jar包,类似于SwaggerUI包 WABJAR介绍 ...
【前端知识之CSS】CSS提高性能的方法有哪些
前言本系列主要整理前端面试中需要掌握的知识点.本节介绍如果要进行优化,CSS提高性能的方法有哪些. 文章目录前言一.内联首屏关键CSS 二.异步加载CSS 三.资源压缩四.合理使用选择器五. ...

前端|CSS信封的制作方法

前端|CSS信封的制作方法相关推荐

最新文章

热门文章