您的位置：首页>要闻 >内容

用html写登录界面代码（HTML实例网页登录页面代码编写）

2022-06-02 15:25:25来源：

导读今天小风给大家收集了一些用html写登录界面代码，HTML实例网页登录页面代码编写方面的信息来分享给大家，如果大家感兴趣的话就接着看下面得

今天小风给大家收集了一些用html写登录界面代码，HTML实例网页登录页面代码编写方面的信息来分享给大家，如果大家感兴趣的话就接着看下面得文章吧

1、CSS实例网上的比较少，今天我就来分享一下关于登录界面的实例吧！大家可以参考哦。方法

1、1、如图，先编写一个div，div里面有一个form表单，包括有两个输入框和登录按钮。Input中的type的text表示的是文本框，password表示的密码框。Placeholder表示的输入框中的默认文字，当我们没有往输入框输入文字就会默认显示，如果我们往输入框输入文字就会自动消失哦。Required表示必须往输入框输入内容。

1、2、接着我们在style标签里面清除所有标签的margin和padding。这样元素之间的间距就会消除。

1、3、设置div的宽度和高度为3、00px，并且上下左右居中，left和top设置为5、0%，表示往右移动5、0%，往下移动5、0%。

1、4、设置input的高度和宽度，边框为1、px，然后使用margin-top来让两个输入框隔开一定的距离。

1、5、同理，设置button的宽度高度和边框，margin-top也是用来拉开与输入框的距离，不然会靠在一起，不好看。box-sizing: content-box;用来设置button撑满整个div,如果不设置的话会溢出div。Border-radius可以用来设置按钮的圆滑度，比如我设置了1、0px，四边的角就会变圆一点。

1、6、最后预览一下效果图。

1、7、登录界面源代码如图所示，可以自己稍加完善。

1、<!doctype html>

2、<html lang="en">

3、<head>

4、<meta charset="UTF-8、"/>

5、<title>Document</title>

6、<style type="text/css">

7、*{

8、margin: 0;

9、padding: 0;

10、}