HTML login page design
Write your user login page, the effect is as follows:
code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<style type="text/css">
*{margin: 0;padding: 0}
html,body{height: 100%}
.outer-wrap{
height: 100%;
position: relative;
background-color: rgba(232, 255, 250, 0.5);
}
.login-panel{
width: 400px;
height: 255px;
background-color: #fffbd4;
position: absolute;
top: 364px;
left: 866px;
margin-top: -150px;
margin-left: -260px;
}
</style>
</head>
<body>
<div class="outer-wrap">
<div class="login-panel"><form>
<fieldset>
<legend>登录页面</legend>
<center>
<label>用户名<input type="text" placeholder="用户名"/></label>
<br />
<br />
<label>密码<input type="password" placeholder="密码" /></label>
<!-- 输出空格-->
<br />
<br />
<label>类型<input type="radio" name="lx"/>管理员</label>
<input type="radio" name="lx"/>普通用户
<br />
<br />
<input type="checkbox" />记住密码
<input type="checkbox" />自动登录
<br />
<br />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<br />
<br />
<br />
</center>
</fieldset>
</form>
</div>
</div>
</body>
</html>
