0

    今日用html写登录界面代码(HTML实例网页登录页面代码编写)

    2023.06.07 | admin | 134次围观

    摘要 大家好,小吃来为大家解答以上问题。用html写登录界面代码,HTML实例网页登录页面代码编写很多人还不知道,现在让我们一起来看看吧!1、如

    大家好,小吃来为大家解答以上问题。用html写登录界面代码,HTML实例网页登录页面代码编写很多人还不知道,现在让我们一起来看看吧!

    1、如图所示,先编写一个div,div里面有一个form表单,包括有两个输入框和登录按钮。

    2、Input中的type的text表示的是文本框,password表示的密码框。

    3、Placeholder表示的输入框中的默认文字,当我们没有往输入框输入文字就会默认显示用html做登陆界面,如果我们往输入框输入文字就会自动消失。

    4、Required表示必须往输入框输入内容。

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

    6、设置div的宽度和高度为300px,并且上下左右居中,left和top设置为50%,表示往右移动50%,往下移动50%。

    7、设置input的高度和宽度,边框为1px用html做登陆界面,然后使用margin-top来让两个输入框隔开一定的距离。

    8、同理,设置button的宽度高度和边框,margin-top也是用来拉开与输入框的距离,不然会靠在一起,不美观。

    9、box-sizing: content-box;用来设置button撑满整个div,如果不设置的话会溢出div。

    10、Border-radius可以用来设置按钮的圆滑度,比如我设置了10px,四边的角就会变圆一点。

    11、最后预览一下效果图。

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

    13、

    版权声明

    本文仅代表作者观点。
    本文系作者授权发表,未经许可,不得转载。

    发表评论