HTML实例?网页登录页面代码编写 _小知识

操作方式 01 如图所示，先编写一个div ， div里面有一个form表单，包罗有两个输入框和登录按钮。 Input中的type的text暗示的是文本框， password暗示的暗码框。
Placeholder暗示的输入框中的默认文字，当我们没有往输入框输入文字就会默认显示，若是我们往输入框输入文字就会主动消逝。 Required暗示必需往输入框输入内容。

文章插图

02 接着我们在style标签里面断根所有标签的margin和padding ，这样元素之间的间距就会消弭。

文章插图

03 【HTML实例?网页登录页面代码编写】设置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 登录界面源代码如图所示，可以本身稍加完美。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
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;
}
</style>
</head>
<body>
<div>
<form>
<input type="text" required="required" placeholder="用户名"/>
<input type="password" required="required" placeholder="暗码"/>
<button type="submit">登录</button>
</form>
</div>
</body>
</html>

以上内容就是HTML实例?网页登录页面代码编写的内容啦，希望对你有所帮助哦！