HTML5作业1员⼯信息登记表
⾸先，我们的作业是写个表单，如图所⽰
然后我们开始对它进⾏分析排版
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;
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{html span 居中
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"/>
</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"/>
<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>
运⾏结果如下图