HTML实例?网页登录页面代码编写优质
操作方法
- 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
登录界面源代码如图所示，可以自己稍加完善。 <!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>
- End
免责声明：
本页搜狗指南内容仅代表作者本人意见，若因此产生任何纠纷由作者本人负责，概与搜狗公司无关。本页搜狗指南内容仅供参考，请您根据自身实际情况谨慎操作。尤其涉及您或第三方利益等事项，请咨询专业人士处理。
