首先，我們的作業是寫個表單，如圖所示
然后我們開始對它進行分析排版
1、一般來說表單位置應當居中，我們可以在外部利用margin: 0 auto;position: relative;內部利用left: 50%;margin-left:來達到居中的目的。
2、標題可使用h標簽，主體部分明顯行高相同，可使用有序標簽ul>li達到排版的目的
3、由於在li行列只有最后一行不同，其他都是三列，故li下級標簽我選擇用span input i,在設置span寬度，但由於span是行內標簽，需要將其轉換為行內塊標簽才能使其設置寬度
4、默認值使用的是placeholder
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>員工登記表</title> <style type="text/css"> *{ padding: 0px; margin: 0px; list-style: none; } .main{ width: 100%; margin: 0 auto; position: relative; } .box{ width: 650px; height: 400px; border: 4px solid aqua ; background: pink; position: relative; left: 50%; margin-left: -329px; top: 50px; } h2{ text-align: center; line-height: 60px; } ul{ left: 50px; position: relative; } ul li{ height: 30px; font-size: 14px; } ul li span{ display: inline-block; width: 86px; } ul li input{ border: 1px solid aqua; } ul li i{ font-style: normal; } ul li:nth-last-child(2) .x_color{ border: 1px solid aqua; display: inline-block; padding: 4px; width: 100px; line-height: 18px; background: buttonface; } ul li:nth-last-child(2) .x_color input{ width: 96px; height: 14px; top: -2px; border: 1px solid #999; background: #000; } ul li:last-child{ margin-top: 10px; } ul li:last-child input{ display: inline-block; text-align: center; line-height: 20px; width: 75px; margin-right: 75px; } </style> </head> <body> <div class="main"> <div class="box"> <form action="" method="post"> <h2>員工信息登記表</h2> <ul> <li> <span>用戶登錄名 : </span> <input type="text" placeholder="wcz@ 163.com" /> </li> <li> <span>真實姓名 :</span> <input type="text" placeholder="王五" /> <i>(必埴,只能輸入漢字)</i> </li> <li> <span>真實年齡 :</span> <input type="text" placeholder="34" /> <i>(必埴)</i> </li> <li> <span>出生日期 :</span> <input type="text" placeholder=" 年 / 月 / 日" /> <i>(必埴)</i> </li> <li> <span>電子郵箱 :</span> <input type="text" placeholder="123456@ 126.com" /> <i>(必埴)</i> </li> <li> <span>身份證號 :</span> <input type="text" placeholder="34" /> <i>(必埴)</i> </li> <li> <span>真實年齡 :</span> <input type="text" /> <i>(必埴,能夠以數字、字母x結尾的短身份證號)</i> </li> <li> <span>手機號碼 :</span> <input type="text" /> <i>(必埴)</i> </li> <li> <span>幸運顏色 :</span> <div class="x_color"> <input type="button" value="||"/> </div> <i>(選擇你喜歡的顏色)</i> </li> <li> <span></span> <input type="submit" value="提交"/> <input type="reset" value="重置" /> </li> </ul> </form> </div> </div> </body> </html>
運行結果如下圖
