制作整洁的用户登录页面
2019年10月09日
893
制作整洁的用户登录页面
htmlcss：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.login{
width: 200px;
height: 196px;
border: 1px solid #ccc;
margin-top: 50px;
margin-left: 150px;
}
.login h1{
height: 35px;
background-color: #E8E8E8;
border-bottom: 1px solid #ccc;
font-size: 14px;
line-height: 35px;
padding-left: 5px;
}
.con{
height: 160px;
margin-left: 5px;
font-size: 12px;
}
.con label{
display: block;
margin-top: 5px;
margin-bottom: 3px;
}
.con .itxt{
margin-left: 10px;
width: 147px;
height: 25px;
border: 1px solid #ccc;
padding-left: 23px;
}
.iu{
background-image: url(images/name.gif);
background-repeat: no-repeat;
background-position: left center;
}
.ip{
background-image: url(images/code.gif);
background-repeat: no-repeat;
background-position: left center;
}
.con .ic{
text-align: center;
margin-top: 5px;
margin-bottom: 10px;
}
.con a{
color: #FF3300;
text-decoration: underline;
}
.con .is{
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
}
.subbtn,.resbtn{
width: 54px;
height: 21px;
border: 0;
text-indent: 20em;
cursor: pointer;
}
.subbtn{
background-image: url(images/login.gif);
}
.resbtn{
background-image: url(images/register.gif);
margin-left: 10px;
}
</style>
</head>
<body>
<div class="login">
<h1>用户登录</h1>
<div class="con">
<form action="" method="post">
<p>
<label for="username">用户名：</label>
<input type="text" name="username" id="username" class="itxt iu" />
</p>
<p>
<label for="pwd">密码：</label>
<input type="password" name="pwd" id="pwd" class="itxt ip" />
</p>
<p class="ic">
<a href="">忘记密码</a>
</p>
<p class="is">
<input type="submit" value="登录" class="subbtn" />
<input type="reset" value="注册" class="resbtn" />
</p>
</form>
</div>
</div>
</body>
</html>