摘要:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>注册页面</title></head><style> &nbs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<style>
*{margin:0px;padding:0px;}
body{background:#3C8DBC;}
.box{
width:350px;
height:400px;
background: white;
border:1px solid #ccc;
border-radius: 8px;
margin:250px auto;
/*margin-left: 800px;*/
/*margin-top:250px;*/
}
form{
padding-top:20px;
/*padding-left:5px;*/
/*margin: 20px 0px;*/
}
input{
width:200px;
height: 30px;
margin: 10px auto;
}
.button{
margin-left:40px;
}
button{
width: 260px;
height:40px;
background:#0B5A87;
border: 1px solid #ffffff;
color:#ffffff;
margin-bottom:10px;
}
.zcym{
font-size: 30px;
font-weight:bold;
margin:auto 100px ;
}
</style>
<body>
<div class="box">
<form action="" method="post">
<div class="zcym">
<label >注册页面</label>
</div>
<hr style="margin-top:10px;">
<p style="float:right; margin-top: 15px;margin-right:20px;color:red;">*必填</p>
<div>
<label>用 户 名:</label>
<input type="text" name="username" placeholder="请输入帐号"><br>
<p style="float:right; margin-top: 15px;margin-right:20px;color:red;">*必填</p>
</div>
<div>
<label>密 码:</label>
<input type="password" name="password" placeholder="请输入密码"><br>
<p style="float:right; margin-top: 15px;margin-right:20px;color:red;">*必填</p>
</div>
<div>
<label>确定密码:</label>
<input type="password" name="password" placeholder="确定密码"><br>
<p style="float:right; margin-top: 15px;margin-right:20px;color:red;">*必填</p>
</div>
<div>
<label>邮 箱:</label>
<input type="email" name="email" placeholder="邮箱@php.cn"><br>
</div>
<p style="float:right; margin-top: 15px;margin-right:20px;color:red;">*必填</p>
<div >
<label>验 证 码:</label>
<input type="text" name="verification" placeholder="验证码" style="width:80px;"><br>
</div>
<hr style="margin-bottom:10px;">
<div class="button">
<button type="submit">注册</button>
</div>
</form>
</div>
</body>
</html>
批改老师:西门大官人批改时间:2019-01-05 19:45:44
老师总结:大体上的效果出来了,最好给form加个内边距,这样会好看些,另外,css样式最好写到一起,不要即有header中的css,也有元素上的css