<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><img src="img/aaa.ico" />用户登录</title>
<style type="text/css">
body{
background:url(img/timg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
#user_name{
background-image: url(img/tmg.jpg);
background-size: 15px;
background-repeat: no-repeat;
background-position: 0px 0px;
padding: 0px 0px 0px 23px;
}
#user_pwd{
background-image: url(img/tim1g.jpg);
background-size: 15px;
background-repeat: no-repeat;
background-position: 0px 0px;
padding: 0px 0px 0px 23px;
}
#checkword{
background-image: url(img/timeg.jpg);
background-size: 15px;
background-repeat: no-repeat;
background-position: 0px 0px;
padding: 0px 0px 0px 23px;
}
.login_container{
position: absolute;
box-sizing: border-box;
margin:0 auto;
left:40%;
top:30%;
}
</style>
</head>
<body>
<div class="login_container" >
<div id="login_title" >
<font style="color: green;font-size: 30px;font-weight: bold;">小a陪诊</font>
<font style="color: green; float: right;" ><a href="">首页</a> <a href="">用户注册</a></font>
</div>
<div class="login_contain" style="background-color: white; width: 400px; height: 200px;">
<div id="login" style="color: white ;background-color: green;"/>
<h2>登陆</h2>
</div>
<form method="post">
<font style="color: gray">用户名：</font>
<input type="text" name="user_name" placeholder="输入用户名" id="user_name"/><br />
<font style="color: gray;"> 密码：</font>
<input type="password" name="user_pwd" placeholder="输入密码" id="user_pwd"/><br />
<div id="">
<font style="color: gray;">验证码：</font>
<input type="text" name="checkword" id="checkword"/>
<img src="img/u=2864876585,2204991927&fm=26&gp=0.jpg" width="80px" height="20px" />
</div>
<button style="background-color: green; width: 200px;height: 40px;display:block;margin:0 auto">登陆</button>
<font><a href="" style="color: gray;font-size: 5px;">忘记密码？</a</font>
</form>
</div>
</div>
</body>
</html>
成品图：
图片.png
