![HTML实例?网页登录页面代码编写](http://img.yunnanlong.com/221108/0G00432Q-0.png)
操作方法
- 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【HTML实例?网页登录页面代码编写】最后预览一下效果图 。
- 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;}
推荐阅读
- 怎么登录网页腾讯微博
- 教你抖音网页版在哪里看关注的人
- 教你抖音网页版可以看直播吗
- 小编教你抖音网页版上传视频怎么设置地点
- 分享抖音网页版好用吗
- 教你学习通网页版怎么登录
- 小编教你抖音网页版如何取消定时发布
- 分享抖音网页版如何添加音乐
- 小编教你抖音网页版在哪里修改个人资料
- 网页设计中margin怎么用