01
如图所示,先编写一个div,div里面有一个form表单,包罗有两个输入框和登录按钮。Input中的type的text暗示的是文本框,password暗示的暗码框。
Placeholder暗示的输入框中的默认文字,当我们没有往输入框输入文字就会默认显示,若是我们往输入框输入文字就会主动消逝。Required暗示必需往输入框输入内容。
02
接着我们在style标签里面断根所有标签的margin和padding,这样元素之间的间距就会消弭。
03
设置div的宽度和高度为300px,而且上下摆布居中,left和top设置为50%,暗示往右移动50%,往下移动50%。
04
设置input的高度和宽度,边框为1px,然后利用margin-top来让两个输入框离隔必然的距离。
05
同理,设置button的宽度高度和边框,margin-top也是用来拉开与输入框的距离,否则会靠在一路,不美不雅。
box-sizing: content-box;用来设置button撑满整个div,若是不设置的话会溢出div。
Border-radius可以用来设置按钮的圆滑度,好比我设置了10px,四边的角就会变圆一点。
06
最后预览一下结果图。
07
登录界面源代码如图所示,可以本身稍加完美。
Document
*{
margin: 0;
padding: 0;
}
div{
position: absolute;
top: 50%;
left:50%;
margin: -150px 0 0 -150px;
width: 300px;
height: 300px;
}
input{
width:298px;
height: 30px;
border: 1px solid black;
margin-top: 30px;
}
button{
width:298px;
height: 30px;
border: 1px solid black;
margin-top: 30px;
box-sizing: content-box;
border-radius: 10px;
}
登录
End
如果觉得《html实例页面代码编写 HTML实例?网页登录页面代码编写》对你有帮助,请点赞、收藏,并留下你的观点哦!