01
如图所示，首先创建div。 div有一个表单，其中包含两个输入框和登录按钮。 输入类型的文本表示文本框，密码表示密码框。
如果未在输入框中输入字符，Placeholder隐含的输入框中的默认字符将默认显示；如果在输入框中输入字符，默认字符将自动消失。 Required提示您必须在输入框中输入。
02
然后断开style标签中所有标签的边距和填充，使元素之间没有间距。
03
建议将div的宽度和高度设置为300px，上下左右居中，将left和top设置为50%，然后向右移动50%，向下移动50%。
04
将input的高度和宽度设置为边框为1px，然后使用边距顶部将两个输入框分开必然的距离。
05
同样，设置button的宽度、高度和边框。 margin-top也用于拉开与输入框的距离。 否则，就会靠在一起，不美丽。
盒装： content-box； 将button设置为支撑整个div。 如果不设定，div会溢出。
边框-半径可用于设置按钮的圆度。 例如，我设定10px的话，四角的角会稍微变圆。
06
最后预览结果图。
07
登录界面的源代码可以稍微完善一下本身，如图所示。
文档* {
margin: 0；
padding: 0；
}
div{
位置： absolute；
top: 50%；
left:50%；
margin: -150px 0 0 -150px；
width: 300px；
高： 300 px；
}
输入{
width:298px；
高： 30px；
border : 1px固态黑；
margin-top: 30px；
}
button{
width:298px；
高： 30px；
border : 1px固态黑；
margin-top: 30px；
盒装： content-box；
border-radius: 10px；
}
登录
结束