写一个简单的登录页面!!!(html)

2023-05-20 01:08| 来源: 网络整理| 查看: 265

写一个简单的登录页面!!!

大家好,我是伍柒. 今天我又双叒叕发现了一个好东西. 那就是用html做一个登录页面那,该如何做呢? 在这里插入图片描述

首先现在html里的body里写一个头部header标签(双标签) 然后在header标签里写登录就像这样 < header>用户登录< /header> 然后再写一个div标签 < div> < input type=“text” name=“username” placeholder=“请输入账号…” />(这是密码部分) 然后再添加登录按钮.如下: < input type=“button” value=“登录” /> 整理一下,总效果如下:

用户登录

接下来我放置一下效果图在这里插入图片描述看起看起来不太美观… 那不如加点样式吧

header{ width: 100%;/*这是设置宽,100%的意思是撑满屏幕*/ height: 35px;/*这是设置高*/ background-color: black;/*这是header标签的背景颜色*/ color: white;/*这是字体颜色*/ text-align:center;/*这是文字居中*/ line-height: 35px; } input[type="text"],input[type="password"]{ line-height: 48px; margin-top: 10px; width: 100%; }/*这是设置账号框和密码框的样式,具体的需要说的太多, 嗯...., 那就请你们动动你们的小手去百度搜一下叭*/ input[type="button"]{ width: 100%; margin-top: 10px; } /*样式最好写在head标签后面body标签前面*/

效果图来啦在这里插入图片描述

看起来似乎还可以在这里插入图片描述

好了,今天的内容就到这里了,喜欢的一键三连,下期更精彩!!!

【本文地址】

公司简介

联系我们