Display属性打开你的专属红包

Display属性打开你的专属红包

开发工具与关键技术:DW 、JavaScript
作者:张赵敏
撰写时间:2019/2/6

下面,我们来了解下disply的属性,利用它的属性创建普通的微信红包样式

热闹的春节,怎能少了红包呢?如今电子产品发达的时代,微信、支付宝成了人们熟知的软件,带来很多的便利之处。随之而来的各种红包,节日红包、拜年红包、普通红包,增添了各种色彩。

利用传统的盒模型布局,利用position点位达到位置的固定,margin外边距进行位置的调整以及对边距大小的控制。话不多说了,看下布局页代码,如下截图:
在这里插入图片描述
在截图中我们看到,盒子套盒子却盒子并排,是不是很奇怪。利用盒子的并排重叠通过disply的属性none、block,进行盒子隐藏,显示,达到领红包的效果;alert弹出提示框。布局内容,见截图
在这里插入图片描述
通过disply的属性none进行红包页面的隐藏,JavaScript实现动态控制点击開红包,点击事件写在页面加载完成时触发的window.onload事件里进行调用触发页面。onclick单击事件很简单的写法调用到了单击事件,在事件中利用style.display的关键字就可以轻松实现開红包、收红包的动作。
看那,一大波代码正在向你奔来,如截图:一些css代码

在这里插入图片描述
一些js代码在这里插入图片描述
通过上述的例子是不是也觉得很好玩呢,赶快动起来吧小伙伴们,打造一专属你的红包吧。

猜你喜欢

转载自blog.csdn.net/weixin_44519188/article/details/86768609