WEB遮罩层

最新推荐文章于 2023-05-31 19:22:39 发布

退去一身骄傲

最新推荐文章于 2023-05-31 19:22:39 发布

阅读量608

点赞数

本文链接：https://blog.csdn.net/pigZhangBoFei/article/details/100672558

版权

本文主要探讨了WEB开发中遮罩层的实现方法及其在网页交互中的重要作用。通过学习，读者将了解到如何创建和使用遮罩层，提升用户体验。

摘要由CSDN通过智能技术生成

【前言】WEB遮罩层



在这里插入代码片

.nav{
				width: 50vw;
				height: 10vh;
				background: red;
			}
			.main{
				width: 500px;
				height: 500px;
				background: yellow;
				margin: 100px auto;
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				z-index: 1;
			}
			.zhezhao{
				width: 100vw;
				height: 100vh;
				position: fixed;
				top: 0;
				background:rgba(0,0,0,.5);
				display: none;
		
			}
			.btn{
				
				width: 10px;
				height: 10px;
				float: right;
<div class="nav"></div>
		<button>ada</button>
		<div class="main">
			<p class="btn">x</p>
			
		</div>
		<div class="zhezhao"></div>
		<div class="zuoaa" style="height: 1000px;width: 100%;"></div>
		<!--<div class="box">
<script type="text/javascript">
		var but=document.getElemen