遮罩层的制作

                 遮罩层的制作

开发工具与关键技术：DW  专题技术
作者：彭春怡
撰写时间：2019/1/26

1. 下面是通过DW开发工具，完成遮罩层的代码。
   Html 源代码：
   
   使用一个大盒子，里面放两个盒子，一个制作遮罩层的按钮，一个制作遮罩层。制作遮罩层的盒子里面再套个大盒子，大盒子里面再放两个小盒子，制作遮罩层里面的内容。
   Css 样式代码：
   
   简单的设置自己想要的颜色以及结构。
   JS 代码：
   
   “openBtn”：打开遮罩层按钮，“closeBtn”：关闭遮罩层按钮，“so_i”:遮罩层。
2. 接下来便是完成的效果：
   图1：
   
   图1 用红色笔标记出来的是遮罩层的按钮，点击，遮罩层便会出现。
   图2：
   
   图2 便是点击遮罩层按钮实现的结果。用红色笔标记出来的蓝色海心是关闭遮罩层的按钮。
   总结：第一次考试时，遮罩层对于我来说一个字难，经过课后尝试自己制作，终于可以制作出简单的效果了。