abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>注冊(cè)</title> <style type="text/css"> *{ margin: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注冊(cè)</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{ /*設(shè)置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="請(qǐng)輸入手機(jī)號(hào)碼"></td>
<td rowspan="10" valign="top" ><!-- style="border-left: 1px dashed #ccc; " -->
<p>已經(jīng)注冊(cè)過(guò)？<p>
<a href="#" id="login">直接登錄 →</a><br><br>
<p>使用以下賬號(hào)直接登錄</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="請(qǐng)輸入郵箱地址"></td>
</tr>
<tr>
<td><input type="text" name="username" placeholder="請(qǐng)輸入昵稱，至少2個(gè)字符，至多20個(gè)"></td>
</tr>
<tr>
<td><input type="password" name="pwd" placeholder="請(qǐng)輸入密碼，字符或特殊符號(hào)和數(shù)字結(jié)合"></td>
</tr>
<tr>
<td><input type="password" name="pwd" placeholder="請(qǐng)?jiān)俅屋斎朊艽a"></td>
</tr>
<tr>
<td><input type="text" name="code1" placeholder="請(qǐng)輸入短信驗(yàn)證碼" style="width: 162px;"> <button id="btn-register">獲取驗(yàn)證碼</button></td>
</tr>
<tr>
<td><input type="email" name="code2" placeholder="請(qǐng)輸入郵箱驗(yàn)證碼" style="width: 162px;"> <button id="btn-register">獲取驗(yàn)證碼</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;">服務(wù)條款</font></td>
</tr>
<tr>
<td><button id="btn-register" style="width: 305px;">注冊(cè)</button></td>
</tr>
</table>
</form>
</div>
</body>
</html>這是一個(gè)實(shí)用HTML+css實(shí)現(xiàn)的一個(gè)注冊(cè)頁(yè)面。通過(guò)web前端HTML基礎(chǔ)部分的學(xué)習(xí)，我了解了HTML基礎(chǔ)語(yǔ)法知識(shí)，在完成小案例的過(guò)程中，發(fā)現(xiàn)還有很多要學(xué)習(xí)的，這只是冰山一角而已。感覺(jué)做的不咋樣，還有很多東西欠缺，要繼續(xù)加油。沒(méi)有加上驗(yàn)證碼部分，有點(diǎn)遺憾，會(huì)繼續(xù)完善的。
Correcting teacher：天蓬老師Correction time：2018-11-18 09:46:37
Teacher's summary：用table布局是一種方案，真正考驗(yàn)技術(shù)的是使用div+css布局