摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>注册</title> <style type="text/css"> *{ margin: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
<style type="text/css">
*{
margin: 0;
}
#main-box{
position: relative;
margin: auto;
width: 585px;
height: 600px;
padding: 35px 30px;
margin-top: 150px;
margin-bottom: 100px;
box-shadow: 1px 1px 4px #767676;
}
input{
width: 285px;
height: 42px;
border-radius: 4px;
border: 1px solid #DCE4E6;
background: #F3F6F8;
margin-top: 8px;
padding-left: 20px;
font-size: 12px;
margin-bottom: 10px;
}
#btn-register{
background: #31B968;
border: 0;
color: #fff;
width: 115px;
height: 44px;
border-radius: 4px;
}
input::-webkit-input-placeholder{ /*设置placeholder属性中文字的颜色*/
color: #CECFD0;
}
input[type="radio"]{
width: 20px;
height: 20px;
margin-right: 8px;
opacity: 0;
}
.advice{
width: 16px;
height: 16px;
display: inline-block;
background-image: url("images/icon-unchecked.png");
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
margin-top: -4px;
margin-right: 8px;
}
input[type="radio"]:checked+.advice{
background-image: url("images/icon-checked.png");
}
span{
margin-right: 50px;
}
input[type="checkbox"]{
width: 15px;
height: 13px;
margin-bottom: 20px;
margin-top: 30px;
}
tr td:first-child{
width: 385px;
}
p{
color: #666682;
}
#login{
text-decoration: none;
color: #31B968;
}
img{
margin-top: 10px;
width: 36px;
height: 36px;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="main-box">
<form>
<table>
<tr>
<td><input type="text" name="tel" placeholder="请输入手机号码"></td>
<td rowspan="10" valign="top" ><!-- style="border-left: 1px dashed #ccc; " -->
<p>已经注册过？<p>
<a href="#" id="login">直接登录 →</a><br><br>
<p>使用以下账号直接登录</p>
<img src="images/weibo.png"><img src="images/weixin.png"><img src="images/cat.png"><br>
<img src="images/qq.png"><img src="images/cblog.png">
</td>
</tr>
<tr>
<td><input type="text" name="email" placeholder="请输入邮箱地址"></td>
</tr>
<tr>
<td><input type="text" name="username" placeholder="请输入昵称，至少2个字符，至多20个"></td>
</tr>
<tr>
<td><input type="password" name="pwd" placeholder="请输入密码，字符或特殊符号和数字结合"></td>
</tr>
<tr>
<td><input type="password" name="pwd" placeholder="请再次输入密码"></td>
</tr>
<tr>
<td><input type="text" name="code1" placeholder="请输入短信验证码" style="width: 162px;"> <button id="btn-register">获取验证码</button></td>
</tr>
<tr>
<td><input type="email" name="code2" placeholder="请输入邮箱验证码" style="width: 162px;"> <button id="btn-register">获取验证码</button></td>
</tr>
<tr>
<td>
<input type="radio" name="sex" id="adviceRadio1" checked hidden><label for="adviceRadio1" class="advice"></label><span>男士</span>
<input type="radio" name="sex" id="adviceRadio2" hidden><label for="adviceRadio2" class="advice"></label><span>女士</span>
</td>
</tr>
<tr>
<td><input type="checkbox" name="accept" value="1"> <font style="color: #666;font-size: 13.5px;">已阅读并同意</font><font style="color: blue;font-size: 13.5px;">服务条款</font></td>
</tr>
<tr>
<td><button id="btn-register" style="width: 305px;">注册</button></td>
</tr>
</table>
</form>
</div>
</body>
</html>这是一个实用HTML+css实现的一个注册页面。通过web前端HTML基础部分的学习，我了解了HTML基础语法知识，在完成小案例的过程中，发现还有很多要学习的，这只是冰山一角而已。感觉做的不咋样，还有很多东西欠缺，要继续加油。没有加上验证码部分，有点遗憾，会继续完善的。
批改老师：天蓬老师批改时间：2018-11-18 09:46:37
老师总结：用table布局是一种方案，真正考验技术的是使用div+css布局
