html登录界面_「代码解说」后台登录实例（HTML部分）

开发准备

开发工具：PhpStorm

使用框架：ThinkPHP

开发语言：PHP(V7.0)

开发类型：Web开发

数据存储：Mysql数据库

其他：LayUI等

解说页面：后台登录

功能：进入后台前，进行访问和权限确认。

实现思路：

访问后台路径时，确认某个变量(或其他指定条件)是否满足预设的需求，如果满足则直接进入控制台，否则跳转至登录界面。当触发指定条件(点击退出或超时退出等)则改变该变量的值，以达到退出登录的目的。

实现方法：

登录页面预览：

HTML区代码展示：

HTML区代码解说：

网站的整体样式风格使用LayUI(不知道的可以自行百度)，登录界面中的内容使用表单(即form标签)进行交互：

1、 在LayUI中设定 class="layui-form" 来标识表单元素块,进而组装各式各样的表单元素。

2、 在此表单中，包含input、button和select表单元素，分别是输入框、按钮和下拉框。

3、 i标签主要用于显示图标，在此项目中使用的是Font Awesome图标库。

4、 canvas标签为画板标签，只是图形容器，您必须使用脚本来绘制图形，此处用于绘制验证码。

HTML代码解说到此结束，下一章讲述JS部分。

前文：「整站开发」网站开发实例：后台登录