H5实现之登录模版的实现 原
html代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="login_box">
<div class="login_title">
<a href="#">忘记密码?</a>
</div>
<ul class="input_group">
<li>
<span class="input_group_icon">
<img src="images/user.png">
</span>
<div class="input_fgline">
<input name="user-name" placeholder="用户名" type="text">
</div>
</li>
<li>
<span class="input_group_icon">
<img src="images/password.png">
</span>
<div class="input_fgline">
<input name="user-name" placeholder="密码" type="text">
</div>
</li>
</ul>
<div class="login_btn">
<input type="button" value="登录">
</div>
</div>
</div>css代码
body{
background-image:url(../images/login_bgi.jpg);
}
.login_box{
position: absolute;
top: 50%;
left: 50%;
width: 520px;
height: 326px;
margin-top: -163px;
margin-left: -260px;
background-color: #fff;
}
.login_title{
background-color:#2a4b7f;
height:40px;
padding-top:20px;
background-image:url(../images/logo_login.png);
background-repeat: no-repeat;
background-position: 15px center;
text-align: right;
line-height: 40px;
}
.login_title a{
margin-right:10px;
color: #6988b7;
font-size: 14px;
text-decoration:none;
}
.login_box ul{
padding: 43px 118px 0;
}
.login_box ul li{
border-bottom: 1px solid #d4d4d4;
overflow: hidden;
padding-top: 20px;
}
.input_group_icon{
float:left;
margin-top:4px;
}
.input_fgline{
padding-left:20px;
border:none;
}
input {
border: 0 none;
color: #666;
font-size: 13px;
height: 30px;
line-height: 30px;
width: 100%;
}
.login_btn{
padding: 0 148px;
}
.login_btn input{
background-color: #85c034;
border-radius:20px;
height:40px;
font-size:18px;
color:#FFFFFF;
}效果图
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2016/12/19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
