爱站程序员基地<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><link rel=\"stylesheet\" href=\"css/style.css\" /></head><body><div class=\"box\"><label><strong>用户名</strong></label><div class=\"box1\"><input type=\"text\" placeholder=\" 请设置用户名\"></div><br/><br/><label><strong>手机号</strong></label><div class=\"box2\"><input type=\"text\" placeholder=\" 可用于登录和找回密码\"></div><br/><br/><label><strong> 密码 </strong></label><div class=\"box3\"><input type=\"password\" placeholder=\" 密码\"></div><br/><br/><label><strong>验证码</strong></label><div class=\"box4\"><input id=\"inp\" type=\"text\" placeholder=\" 请输入验证码\"><input id=\"inp1\" type=\"button\" value=\"获取短信验证码\"></div><br/><br/><div class=\"box5\"><input type=\"checkbox\" id=\"inp2\"><label id=\"id1\"> 阅读并接受<span>《百度用户协议》</span>及<span>《百度隐私权保护声明》</span></label></div><div class=\"box6\"><input type=\"button\" id=\"inp3\" value=\"注册\"></div></div></body></html>
*{padding: 0;margin: 0;}body{border:solid 1px #dddddd;width:500px;height: 500px;background-color:#ffffff;margin: 0 auto; /*水平居中*/margin-top: 200px;}.box{/*border: solid 1px red;*/text-align: center;margin-top:80px;position: relative;top: 50%;/*偏移*/margin-top: -180px;}.box1,.box2,.box3,.box4,.box5{position:relative;display:inline;}.box5{/*border: solid 1px red;*/width: 350px;height: 40px;}label{color: #666666;font-size:15px;}input{width: 350px;height: 40px;margin-left: 12px;}#inp{width: 180px;height: 40px;margin-right:1px;}#inp1{width: 151px;height: 40px;background-color: #f7f7f7;color: #666666;}#inp2{width: 12px;vertical-align:middle;margin-left:56px;}#inp3{width: 354px;height: 52px;background-color: #3f89ec;color: white;font-size: 18px;margin-left:54px;}label{font-size: 14px;vertical-align:middle;}span{color: #1b66c7;}input::-webkit-input-placeholder{font-size: 15px;}#id1{font-size: 12px;}
