需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中，输入html代码：<div style="border-top: 3px solid #0b93d5border-bottom: 3px solid #0b93d5">123</div>。
3、浏览器运行index.html页面，此时仅仅在层的上边框和下边框显示了蓝色。
HTML语言三层结构的概念将应用划分为三层(可以有更多层，但三层最常见): 用户界面层，商业逻辑层，数据库层。 用户界面层负责处理用户的输入和向用户的输出，但并不负责解释其含义(出于效率的考虑，它可能在向上传输用户输入前进行合法性验证)，这一层通常用前端工具(VB，VC，ASP等)开发商业逻辑层是上下两层的纽带，它建立实际的数据库连接，根据用户的请求生成SQL语句检索或更新数据库，并把结果返回给客户端，这一层通常以动态链接库的形式存在并注册到服务器的注册簿(Registry)中，它与客户端通讯的接口符合某一特定的组件标准(如COM，CORBA)，可以用任何支持这种标准的工具开发数据库层负责实际的数据存储和检索。 有了这样的结构，上面的问题迎刃而解:还是以考试系统中的合格标准为例，在客户端所有需要显示合格人员名单的地方，调用这样一个函数GetQualifiedList，至于这个函数如何编写，如何与数据库打交道，以至访问的是何种数据库都与其无关(你一定有过这样的经历，在一种数据库系统上运行得很好的SQL语句，有时换到另一种数据库系统上必须加以修改)在中间层DLL中实现这个GetQualifiedList函数，如果用户对"合格"的定义变了，只需要修改这个函数就可以了，只要此函数的入口参数和返回内容不变，在客户端不需作任何改动。在这里，我们看到了面向对象编程的特性之一封装性的优点，而这一点在开发大型应用时尤其有用--我们可以把开发人员分成两组，一组负责开发界面层，另一组负责开发商业逻辑层，双方只要按照事先商定的函数接口，并行地开发就可以，而不必向从前那样，后面的工作必须等前面的工作完成后才能开始。当然，这样的开发模式需要很好的项目协调和文档作支持。
你也许会问，如果我把这些函数些在一个单独的文件中，再在需要调用的地方把它包含进来，不是同样能达到目的吗? 第一，这种方法效率不高，无论你把这些函数分散到多少个文件中，当你需要调用其中一个时，总会包含进一些实际上并不需要的函数，这无疑加重了服务器的负担，对服务器性能要求较高的Web应用尤其如此。 而DLL只在需要时才调入内存且只调入需要的函数，并且多个应用程序实例可以共享同一个DLL实例；第二，设想一个员工，有20个属性(工号，姓名，年龄，性别......)，现在给定某工号，要求返回此员工所有信息。此时如果单纯用函数，只能定义20个全局变量，在函数中改变这些变量值，或者定义一个有20个传参(by reference)参数的函数。显然，第一种方法很麻烦而一旦增加一个属性后一种方法就需要更改函数接口。而在一个对象里，既包含成员方法(即函数和过程)，也包括成员属性。如果我们采用对象的方法，则在函数中只需要改变对象的属性，在函数外可以直接引用改变了的对象属性值。 这种方法有些类似第一种方法，但1.属性值无需在函数外逐一说明；2.这些属性值只属于对象，与对象无关的代码不会无意地改变属性值；3.一旦对象被释放，这些值会被一起释放。
第一步：新建一个html页面页面中先做出一个【领红包】的按钮，如图（图中左侧是效果右侧是代码），点击这个按钮就会d出一个红包的活动消息，即我们要的遮罩效果
css遮罩层怎么做
css遮罩层怎么做
第二步：做出遮罩层
遮罩层的作用就是将层后面的内容都遮住，覆盖全屏，所以：
宽高都设为：100%；
位置 position：absolute；left：0； top:0
背景色 一般都设为透明的 background: rgba(0,0,0,0.5)
层的顺序 z-index:100 (设置一个比较大的数值)
css遮罩层怎么做
第三步：做出遮罩层上的内容
1、在遮罩层上添加活动效果图
2、关闭活动信息d出框的【关闭】按钮
注意:遮罩层上的内容也要添加上z-index且数值要比遮罩层的大，z-index:101
如图（左侧效果，右侧代码）
css遮罩层怎么做
css遮罩层怎么做
第四步：用js实现遮罩效果演示
首先我们看到的页面上是没有遮罩层的，只有一个【领红包】的按钮在页面中；
然后我们点就【领红包】按钮，就d出遮罩效果；再要关闭遮罩层时点击右上角的关闭按钮，就退出了遮罩成的活动信息。具体 *** 作如下：
1、将遮罩层隐藏起来 display：none；
2、点击【领红包】时，遮罩层显示 display：block
3、点击关闭按钮，遮罩层消失 display：none；
如图
css遮罩层怎么做
css遮罩层怎么做
css遮罩层怎么做
css遮罩层怎么做
css遮罩层怎么做
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）