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

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

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

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

<body>
<header>用户登录</header>
<div>
<input type="text" name="username" placeholder="请输入账号..." />
<input type="password" name="password" placeholder="请输入密码...">
</div>
<div>
<input type="button" value="登录"/>
</div>
</body>

接下来我放置一下效果图

看起看起来不太美观…
那
不如
加点样式吧

<style type="text/css">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;}
</style>
/*样式最好写在head标签后面body标签前面*/

效果图来啦

看起来似乎还可以

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

写一个简单的登录页面!!!(html)相关推荐

小白教程——Windows下用PHP写一个简单的登录注册页面（二）
哈喽,看到这里希望小伙伴们都把wampserver环境安装好了,如果还没有安装或创建数据表就移步去看我上一篇文章吧.OK~接下我们将进入代码实现部分,首先我们需要一个文本编辑器,可以是电脑自带的not ...
用 Flutter 写一个精美的登录页面（最新版）
用 Flutter 写一个精美的登录页面(最新版) 主体结构标题输入框登录按钮其他登录方式注册按钮完整源码参考了博客:用flutter写一个精美的登录页面.但是那篇文章是 18 年的,较 ...
实现一个简单的登录页面
实现一个简单的登录页面设计了一个登录页面,感觉还挺不错的实现效果设计的还是挺好看的吧分析需要的功能一个登录页面一个注册页面翻转效果输入后的正则判断,给用户提示信息翻转要清空页面的全部信 ...
html写一个简单的浏览页面
html写一个简单的浏览页面模仿百度百度百科来写一个浏览页面效果图如下第一步:安装编程软件编写html文件可以用很多软件甚至记事本都可以,由于记事本使用不方便,这里使用比较常用的vscode, ...
利用cookie和jsp写一个简单的登录判断的网页，并获取上次的登录的时间。
要求:因为只是简单制作,没必要连数据库,直接用确定值去判断.然后就是第一次登录的时候需要获取到登录的时间,然后在下次登录的时候将上次获取到的时间输出. 思路:首先第一个,第一次登录的jsp(姑且当做注 ...
element ui登录界面_Vue和Element-UI做一个简单的登录页面
如下所示,是vue+ElementUI写的一个登录页面: Login.vue部分 class="demo-ruleForm login-container"> 登陆界面记住 ...
用javascript写一个简单的登录表单，包含用户名、密码和手机号码。提交数据时验证用户名、密码和手机号输入格式。
题目:写一个用于登录的表单,包含用户名.密码和手机号码.提交数据的时候,要求验证: 1. 用户名必须输入汉字: 2. 密码总共6位,前2位为字母,后4位为数字: 3. 手机号码符合中国大陆手机号码格式 ...
Vue实现一个简单的登录页面【自定义】
创建一个自定义插件 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
PERL-MOJO写一个简单的登录验证页面
PERL果然是很牛掰的东西... 失业三年半了.还是想keep一下perl的兴趣. use Mojolicious::Lite;my $password='1253';get '/login' = ...

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

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

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

写一个简单的登录页面!!!(html)相关推荐

最新文章

热门文章