如何设定网页的浮层?

收藏
CSS/CSS3
5
Mar 12, 2018

当点击网页登录时,弹出一个登录框,同时,登录框的后面有一个灰色的浮层,笼罩整个网页。

回答

云松回答

问题分析:

这个效果其实就是使用div给网页设定一个浮层,在浮层中间放置登录内容。同时设定浮层div的样式即可实现。

问题答案:

以下代码可以实现浮层,浮层可以放置任何内容:

html, body {
	 /*只有父元素设置宽高为100%子元素设置宽高100%时才能撑满整个页面*/
	  width: 100%;
	  height: 100%; 
	  margin:0;
	  padding:0;
	}
	.shade {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  left: 0;
	  top: 0;
	  background: #000;
	  opacity: 0.3;
	}
	.logo{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 300px;
		height: 300px;
		background: #fff;
	}
	.logo form{
		margin:15px;
		text-align: center;
	}

	.logo input{
		margin-bottom: 20px;
	}
</style>

<div class="shade">
		<div class="logo">
			<form>
					<h2>登录</h2>
					昵称:<input type="text" value=""  name="user" /><br/>
					密码:<input type="password" value=""  name="user" /><br/>
					<input type="submit" value="登录" />
			</form>
		</div>
</div>

 

 

 

(0)

提交成功