当点击网页登录时,弹出一个登录框,同时,登录框的后面有一个灰色的浮层,笼罩整个网页。
回答
云松回答
问题分析:
这个效果其实就是使用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)