【编程入门】使用 HTML CSS 制作登录页面 (零基础菜鸟必看) | How to create a login form in html css
本期视频教你使用HTML CSS制作前端登录页面，零基础的同学也可以快速上手网页设计。登录页面是网络应用必备的功能，所以每一个程序员都应该知道怎么制作登录页面。
我们会使用HTML Form（表单）和HTML Input (输入元素) 去构建登录页面。
————————————————————
你想学习怎么制作网页？想拥有属于自己的网站？不论你是学生，白领又或者是追梦者，欢迎你加入这个专门为零基础同学们打造的免费网页编程教程。
我们会在教程里一起动手写代码，让你以最快的速度上手网页编程。在教程里我们会学到HTML, CSS和JavaScript。这是制作网页的必备工具。除此之外，我们也会学到怎么使用代码编辑器(Code Editor)去编写代码。
记得要关注频道，那样你就不会错过类似这样的网页编程教程了。
你的梦想从这里开始！
☕ ☕ ☕ 给我买杯咖啡提提神吧！ ✅ https://bit.ly/3kCOpFK ✅ (免费) JavaScript教程系列： https://bit.ly/310cHle ✅ 更多精彩的JavaScript入门课程： http://bit.ly/js-for-beginners ✅ JavaScript相关书籍： 1：The Definitive Guide: Master the World's Most-Used Programming Language - 7th Edition (强烈推荐👍) https://amzn.to/31s30uH ✅（通告）”Codetisan 自学编程社区“ 已经正式开通啦，三人行必有我师，同学们再也不用独自一人闷头自学编程了，快去社区里和其他小伙伴们互动吧！ ▶︎ https://bit.ly/2AHylzN 🔆订阅我的YouTube频道，让你从一个0基础编程的菜鸟快速成为编程大师！🔆 http://bit.ly/2TBkXo1 ▶︎ 文轩解码更精彩的平台 ◀︎ ‣‣ Blogger ：https://bit.ly/2yMz0PC ‣‣ Twitter: https://bit.ly/2R74FS1 ‣‣ Facebook: https://bit.ly/35crcmz ‣‣ Instagram: https://bit.ly/2KH6Wjw ‣‣ Github: https://bit.ly/2SHtsx4
文字内容：
嗨 大家好
我是文轩
欢迎收看文轩解码
几乎所有的网站都有一个登录页面
那我们去输入用户名和密码
来登录自己的账号
那今天我们就来学学怎么使用html和
css去制作这个登录页面
我们接下来制作的这个登录
页面有一个标题
两个输入框和一个提交按钮
如果你已经看过之前
我发布有关网页制作的视频
相信现在的你对简单的html和
ces源代码并不陌生
这期视频我可以介绍两个
新的html tag
那就是form和input tag
form tag是用来插入表单
如果你想提交数据到服务器
你就必须使用这个form tag
input tag一般是
用来显示输入框和按钮
input tag是不能单独使用的
必须放在form tag里
不然的话你输入的数据就提交不了
如果你是第一次来到我的频道
首先我先欢迎你
当你看完这个视频以后
觉得他对你有帮助的话
恳请你点个赞
你的支持就是我坚持下去的动力
好的
那现在我们开始制作这个登录页面吧
和之前的视频一样
我是使用Visual Studio Code来编辑源代码
那现在我们先来创建两个文档
一个是用来保存html源代码
另外一个是用来保存css源代码
那现在我们先添加第一个文档
我们叫它login.html
然后再添加一个stylesheet
我们叫它style.css
我们先把基本的html结构编写一下
先添加html tag
然后再加入head tag
和body tag
把这个隐藏起来
现在我们去head tag里添加一个link tag
关联一下这个style.css
link rel
这边我们要输入stylesheet
因为现在我们要关联的外部资源
是一个css文档
然后这边我们就要提供它的url
直接输入style.css就可以了
然后关闭
现在我们去body tag里添加登录的元素
我们先添加一个标题吧
这个标题我会使用h1去显示
login
登录
我们先保存
刷新一下
先打开这个login.html
这个标题显示了
那接下来我们要添加两个输入框
这里我会使用input tag
类别我们选text
然后placeholder
placeholder我们就要输入username
用户名
然后
关闭这个input tag
这个placeholder其实是用来描述输入框
是需要用户做些什么东西
很明显
这个输入框我们就要让
用户输入他的用户名
我们来保存刷新一下
这个输入框显示了
那接下来我们要添加一个输入框
但是这个输入框是要让用户输入密码的
我们同样也是会使用input tag去显示
但是type
我们需要把它变成
password
placeholder
使用password input field
的好处呢
就是当用户输入密码的时候
密码会被隐藏起来
那现在我们保存一下
然后刷新
给你们演示一下
在password field里
当我们输入密码
它是会被隐藏起来的
而这个text field
它则不会
它会显示那个明文
好的 那接下来我们需要再添加一个提交按钮
提交按钮也是使用input tag去显示
只是在type这里我们会选用submit
给你们演示一下
这边我们会选用submit
关闭 保存
然后刷新
这个按钮显示了
但是我们还要再把他的这个
submit换成submit提交
我们可以在value这边设置一下
submit
提交
刷新
好的
我们把这个默认的值换成了submit提交
输入框和按钮一定要和form tag一起搭配使用
所以我们需要在这里添加一个form tag
把输入框和按钮到包在里面
那要输的数据才能正常提交
先添加一个form tag
把这些都移到form tag里
我们还要告诉form tag提交的数据应该
发到哪一个后端程序
我们可以通过action去
设置这个url
后台程序可以是用java php或者nodejs编写
本地视频我们主要是说前端
就不深入探讨后端的部分了
我们会在接下来的视频和大家再细说
假设我们现在的后端程序
是由nodejs编写的
然后它叫action.js
那这里我们就可以输入
action.js
这个action.js是不存在的
所以当你提交这个表单的时候
它会报错
这是很正常的
不是bug
所以你们不要太担心
因为这个action.js是
一个虚构的后端程序
那我们先保存
好的
我们的html布局就完成了
那接下来我们开始编写css的部分
我先把style.css挪到下面
首先我们需要先把字体换成
Roboto
我们在body这里设置font-family
然后我们也要把背景颜色换成橘色
接下来我们需要把这个login form
的内容水平垂直居中
把内容移到页面的正中间
这里我们会使用flex布局
先把display设置成flex
然后把align-items
设置成center
再把justify-content
也设置成center
我们保存刷新一下
看看效果
这个内容居中了
背景颜色也换成了橘色
那接下来我们调一下这个
form的css
先在这个form添加一个class
把它命名login
那样的话等一下就方便我们
在style.css里做设置
我们先把背景颜色
调成深蓝色
刷新
这边要保存
变成了蓝色
接下来我们要把这个width再调宽一点
把它调去400看看
400px
刷新
把它缩小
ok
这些字体看不见
把它调去白色
我们把它的padding稍微调大一点
这边看起来有点挤
设置成40px
稍微宽一点了现在
接下来我们要为这个form
添加一个阴影
那样看起来它就会比较立体一点
那我们现在需要调的是box-shadow
shadow
box-shadow
我们把水平偏移的值设置成10px
然后再把垂直偏移的值
也设置成10px
然后再补上一个颜色
一般阴影都是黑色的
所以这边我会选黑色
我们保存刷新
看看一下效果
现在我们能看到这边出现
了一个黑色的图层
那现在我们要做的就是要模糊这个图层
我们在这里添加一个模糊的值
把它调去10px看看
刷新
这还是不够模糊
我们把这个值再调高一点
调去25看看
这个模糊程度就差不多了
但是这个阴影的颜色看起来有点生硬
我们可以在这里再调一下颜色的透明度
我们可以在这里输入一个值
增加它的透明度
这样的话看起来就会比较自然一点
这样就看起来稍微自然一点
那接下来我们要为输入框和按钮设置
一下css帮它们换换装
我们首先需要先把input tag
的display换成block
那样的话就能从一行变成三行
现在我们要针对
login class里的input
所以这边要输入
login
input
我们把display
设置成block
那的话它就会变成三行
接下来我们要用margin
把它挪到中间
我们先把margin的第一个值
设置成20px
如果我们只是设置第一个值的话
它的意思就是上下左右的margin
都是20px
这是设置第一个值后的空白区域分布
这些都是空白区域
那现在我们在增加一个值
我们把第二个值设置成auto
那样的话
输入框就会移到中间
这是因为浏览器会根据输入框左右
的空白区域自行调整
确保左右两边的margin都是一致的
所以变现的就可以把输入框移到中间了
这是输入第二个之后的空白区域分布
那我们现在保存刷新
看看效果
输入框的按钮都移到中间了
那现在我们要把那个标题也移到中间
要移到中间的话
我们就需要在login class
设置它的text-align
把它设置成center
我们保存
刷新
好的 全部内容都居中了
我们先把这里的文字居中一下
把text-align设置成center
居中了
然后再把这个输入框的背景颜色去掉
直接把background设置成none就可以了
把padding也调一下
把它设置成10px
稍微再把字体调大一点
我们调去15px看看
接下来 我就把这个输入框的边角换成半圆的
我们要把border-radius
的值设置一下
我们把它设置成22px看看
这边看起来有点挤
把padding调大一点吧
调到12
这就差不多了
当我们在点击这个输入框的时候
会出现这个轮廓线
我要把这个门框线给去掉
把outline设置成none就可以了
当我点击的时候 这个轮廓线就不再出现了
按钮的字体现在是看不见了
我们尝试把它换成白色吧
还有这里输入的
文字也是看不见
直接把font color调一下
color
保存刷新
好的
都变成白色了 这些字体
那接下来我们要把输入框的
边框颜色变成蓝色
这里我们只是针对input type是text
或者是password的元素才更换这个边框颜色
所以我们需要在这里
针对
dot
login class里的input
type
是text
或者是dot login input
type
等于password
我们才更换边框颜色
我们先设置一下它的border
粗细是
2px
然后它是一条实线
颜色我们把它换成蓝色
还有把width
设置成220px
保存刷新一下
好的
这个边框颜色变成了蓝色
那接下来我们就要设置一下
这个按钮的css
所以我们是设置login class里的
type
等于submit的话
我们就把它的
width
调成150px 变宽一点
然后把border也设置一下
把粗细调成2px
然后是一条实线
然后颜色换成绿色
保存刷新 看看效果
好的 变成绿色了
当我们鼠标的箭头移到按钮的时候
它应该从箭头变成手指
按时用户这个按钮是可以按的
要达到那样效果
我们就需要把cursor设置成pointer
刷新
那样的话它就会从箭头换成手指
那接下来我们要为输入框添加一点点的animation(动画)
那就是当我们点击输入框的时候
输入框会慢慢的变大
当这个输入框不再聚焦的时候
它就会变回之前的大小
要达到那样的效果
我们就需要使用focus selector
来判断输入框是否聚焦
我先copy这一行
我们需要在后面这边添加focus selector
我们只需要输入冒号
focus
这里也是一样
输入冒号
然后focus
添加了这个focus selector
我们就要设置
当这个selector被触发的时候
我们要让它干什么
我们是想让输入框的边框颜色
从蓝色变成绿色
还有width从200px变成280px
我们先把颜色调一下
border
color
换成绿色
我们把width调去280px
我现在保存刷新一下
好的
这就是我们想要的效果
聚焦的时候输入框会变大
我们再微调一下 加一个transition
让它稍微变慢一点
那样的话就可以实现一个简单
animation效果
我们在这边添加
transition
把它设置成0.5秒
保存 然后刷新
那样的话就可能实现一个简单的
animation效果
接下来我们要让按钮在鼠标
箭头移到按钮的时候
把背景颜色换成绿色
达到highlight的效果
所以这里我们可以使用hover selector
我先copy一下这个
要添加hover selector
只需要在这里添加冒号
hover
就可以了
如果这个hover selector被触发
我们是要让背景颜色换成绿色的
所以我们需要在这边设置备
background-color
把它变成绿色
我们保存刷新一下
好的
现在每一次
我们把鼠标移到这里
它就会害了这个按钮
我们尝试也给这个按钮加一个
transition吧
看看这个animation的
效果是怎么样的
我们在这里添加transition
也把它设置成0.5second
保存 然后刷新
现在的highlight就稍微有点延迟了
也变相已经造了一个简单的animation效果
我们的登录页面终于完成了
今天同学们学会了怎么在网页里插入表单(html form)
也是学会了怎么显示带有简单动画
的输入框和提交按钮
希望同学们喜欢今天的分享
如果你觉得它对你有帮助的话
欢迎点赞 分享 和关注我的频道
记得还要多多练习
有什么疑问可以随时在留言栏里发问
我都会一一为你解答
今天这个视频就到这里
我们下期见
拜拜
Comments
Post a Comment