简洁注册表单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册</title><link rel="stylesheet" href="public.css"><link rel="stylesheet" href="style.css">
</head><body>
<!--表单 -->
<form action=" " method="get" class="form"><div class="head"><label>注册</label></div><input type="text" class="name" placeholder="请输入你的名字" required /><input type="email" class="email" placeholder="Email" required /><input type="tel" class="tel" placeholder="请输入你的手机号码" required /><input type="password" class="pw" placeholder="密码" required /><input type="password" class="pw1" placeholder="确认密码" required /><br><span class="check"><label><input type="checkbox" name="checkbox"/><!--拟标签--><i class="check_i"></i><!--拟标签end-->我同意相关协议</label><br></span><input type="submit" value=" 注册" class="login"/>
</form>
<!--表单end-->
</body>
</html>
##public. css
@charset "utf-8";
*{padding: 0;margin:0;
}
ul,li,ol{list-style: none;
}
a,span{font-size: 16px;text-decoration: none;
}
body{font-family: "Microsoft YaHei";
}
input,button {vertical-align: center;outline: none;
}
image{border: none;
}
.clears{clear: both;height: 0;line-height: 0;overflow: hidden;font-size: 0;
}
style.css
.form{width: 640px;height: 536px;margin-left: auto;margin-right:auto;margin-top: 50px;background: #ffffff;box-shadow: 0px 0px 10px 7px rgba(0,0,0,0.1);
}.head{margin-left: 94px;padding-top: 49px;font-size: 31px;
}
.name,
.email,
.tel,
.pw,
.pw1 {width:354px;height: 45px;padding-left: 20px;padding-right: 20px;background-color: #fff;border-radius: 4px;border: 1px solid #ebebeb;font-size: 16px;color: #9e9e9e;margin-top:15px ;
}
input {margin-left: 94px;
}
.check{display: block;margin-top: 25px;margin-left: 94px;border-radius: 4px;
}
.check .check_i {cursor: pointer;width: 20px;height: 18px;background: url("image/af_03.png") no-repeat;display:inline-block;vertical-align:middle;
}
.check input{display: none;
}
.check input:checked + .check_i{background: url("image/be_06.png") no-repeat;
}
label {color: #616161;cursor: pointer;}
.login{border: 0;border-radius: 2px;width: 134px;height: 35px;background-color: #92a8d1;letter-spacing: 20px;color: white;font-size: 16px;margin-top: 24px;
}
