一、帐号注册：
效果图：
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>帐号注册</title>
<style>
*{
margin: 0;
padding: 0;
/*border: 1px dashed red;*/
}
h1{
margin-left: 150px;
margin-bottom: 30px;
width: 150px;
}
div{
width: 460px;
margin: 50px auto;
}
div input{
width: 430px;
height: 60px;
font-size: 20px;
padding-left: 20px;
margin-bottom: 20px;
}
div input:nth-of-type(2){
width: 280px;
float: left;
}
div input:nth-of-type(3){
width: 150px;
height: 64px;
float: left;
background-color: black;
color: white;
padding-left: 0;
font-weight: 900;
border-style: none;
}
div p{
width: 450px;
height: 30px;
line-height: 30px;
font-size: 20px;
margin-bottom: 20px;
color: red;
}
div input:nth-of-type(6){
width: 453px;
height: 60px;
line-height: 60px;
font-size: 20px;
color: white;
font-weight: 900;
background-color: red;
border-style: none;
}
</style>
</head>
<body>
<div>
<h1>帐号注册</h1>
<form method="post" action="#">
<input type="text" required placeholder="手机号"/>
<input type="text" required placeholder="验证码"/>
<input type="button" value="获取验证码"/>
<input type="password" required placeholder="设置密码"/>
<input type="password" required placeholder="确认密码"/>
<p>点击注册，表示同意《服务协议》</p>
<input type="submit" value="同意协议并注册"/>
</form>
</div>
</body>
</html>
二、用户登录：
效果图：
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>用户登录</title>
<style>
*{
margin: 0;
padding: 0;
/*border: 1px dashed red;*/
}
h1{
margin-left: 150px;
margin-bottom: 30px;
width: 150px;
}
div{
width: 460px;
margin: 50px auto;
position: relative;
}
div input:nth-of-type(1) {
border-style: none;
border: 1px solid #999999;
width: 400px;
height: 60px;
font-size: 20px;
padding-left: 50px;
margin-bottom: 20px;
background: url("image/i_u.png") 10px 10px no-repeat;
background-size: 30px;
}
div input:nth-of-type(2){
border-style: none;
border: 1px solid #999999;
width: 400px;
height: 60px;
font-size: 20px;
padding-left: 50px;
margin-bottom: 20px;
background: url("image/i_pwd.png") 10px 10px no-repeat;
background-size: 30px;
}
div input:nth-of-type(3){
height: 17px;
width: 17px;
margin-left: 20px;
}
div span{
display: inline-block;
font-size: 20px;
color: #999999;
}
div span:nth-of-type(2){
position: absolute;
right: 10px;
}
div input:nth-of-type(4){
border-style: none;
color: white;
background-color: red;
font-weight: 900;
width: 450px;
height: 60px;
font-size: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<div>
<form method="post" action="#">
<h1>用户登录</h1>
<input type="text" required placeholder="邮箱/手机/用户名"/>
<input type="text" required placeholder="密码"/>
<input type="checkbox" value="auto_login"/><span>自动登录</span>
<span>忘记密码?</span>
<input type="submit" value="登录 "/>
</form>
</div>
</body>
</html>