HTML部分
<!-- 登錄彈窗 -->
<div id="login">
<div class="mask"></div>
<div class="content">
<span><i class="shutdown" ></i></span>
<form action="">
<p>登錄網(wǎng)易云課堂</p>
<p><input class="id" type="text" placeholder="帳號(hào)"></p>
<p><input class="pw" type="text" placeholder="密碼"></p>
<p><input class="btn" type="button" value="登錄" ></p>
</form>
</div>
</div>
CSS部分
/* 登錄彈窗 */
#login{
height: 100%;
width: 100%;
}
#login .mask{
height: 100%;
width: 100%;
position: fixed;
top: 0;z-index: 1000;
}
#login .mask{
background-color: #000;
opacity: 0.5;
}
#login .content{
width: 387px;
height: 298px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1001;
background-color: #fff;
box-sizing: border-box;
padding: 30px 53px 18px 38px;
}
#login .content .shutdown{
position: absolute;
top: 10px;
right: 9px;
}
#login .content p{
font: 18px/28px 微軟雅黑;
color: #444444;
font-weight: 600;
}
#login .content .shutdown{
display: inline-block;
background: #fff url(../images/icon.jpg) no-repeat -16px 0;
width: 10px;
height: 12px;
padding-right: 6px;
overflow: hidden;
vertical-align: text-bottom;
cursor: pointer;
}
#login .content .id{
margin-top: 20px;
}
#login .content input{
width: 295px;
height: 45px;
margin-bottom: 15px;
border: 1px solid #dfdfdf;
padding-top: 5px;
padding-left: 10px;
font: 18px/28px 微軟雅黑;
color: #ccc;
background: #fafafa;
}
#login .content .btn{
margin-top: 13px;
margin-bottom: 10px;
background: #2db352;
font-size: 16px;
color: #fff;
}
效果預(yù)覽
彈窗.jpg
