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>

赞 (0)

相关推荐

  • IE有效避免恶意网页中恶意代码的攻击

    恶意网页成了宽带的最大威胁之一。以前使涌Modem，因为打开网页的速度慢，在完全打开前关闭恶意网页还有避免中招的可能性。现在宽带的速度这么快，所以很容易就被恶意网页攻击。 一般恶意网页都是因为加入了用 ...

  • Axure怎么制作简易的账户密码的登录页面?

    我们经常使用Axure制作网页原型,今天我们就来看看使用axure制作登录页面效果的教程,请看下文详细介绍. 1.首先打开Axure,新建一个空白页面,在空白页面拖入本次要使用的相关元件,如下图所示. ...

  • 怎么打开手机版百度地图的网页登录保护功能

    怎么打开手机版百度地图的网页登录保护功能

    手机版百度地图软件被很多人使用,用来导航等, 有的用户在使用该软件时,为了保护自己的信息安全,因此想要打开网页登录保护功能,但是却不知道如何打开,那么小编就来为大家介绍一下吧.具体如下:1. 第一步, ...

  • 百度网盘中的网页登录保护怎么设置开启

    百度网盘中的网页登录保护怎么设置开启

    今天给大家介绍一下百度网盘中的网页登录保护怎么设置开启的具体操作步骤.1. 首先打开手机,找到桌面上的"百度网盘"APP,打开.2. 进入主页面后,点击右下角的"我的&q ...

  • 如何启用百度地图中的网页登录保护功能

    如何启用百度地图中的网页登录保护功能

    在使用百度地图进行导航的时候,我们可以开启网页登录保护功能来提升账号的安全性,具体应如何操作呢?接下来就由小编来告诉大家.具体如下:1. 第一步,打开手机中的百度地图应用,进入主页后,点击左上角的个人 ...

  • 怎么在谷歌浏览器中查看保存的网页登录密码

    怎么在谷歌浏览器中查看保存的网页登录密码

    我们在使用谷歌浏览器浏览网页的时候,会自动保存网页的登录密码,想要查看该密码,该怎么操作呢?今天就跟大家介绍一下怎么在谷歌浏览器中查看保存的网页登录密码的具体操作步骤.1. 首先打开打开上的谷歌浏览器 ...

  • 做网页怎么获得代码

    做网页的成果不光是只有网页,还有代码可以看. 操作方法 01 打开软件,新建一个网页,如图所示. 02 在页面的左上角有拆分/设计,点开它. 03 在设计面做的动作,在代码页都有会有记录,如图所示. ...

  • 如何查看网页元素的代码和样式

    作为一个网页设计爱好者,经常会发现网页上的一些元素很好看,想down下来保存并使用,这里教你一个简单的方法,下载网页元素的代码和样式. 操作方法 01 以本页"方法/步骤"中的第一 ...

  • 自定义WordPress登录页面

    操作方法 01 如果你看腻了Wordpress默认登录界面,或者想将Wordpress的logo替换为自己网站logo,并改变其外观,可以参考此文,打造一个个性化的登录页面. 一.将下面代码加到主题f ...