首先,我们的作业是写个表单,如图所示
然后我们开始对它进行分析排版
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