HTML登录界面的实现详解

article/2025/11/3 15:21:32

前言序锦

https://blog.csdn.net/HuaCode/article/details/81413387前阵子参加学校的暑期实习，我作为项目负责人，除了进行统筹规划，整体运营以及进度安排等工作外呢，我还负责了前端模块，参与并编写了前端页面，在之前学过前端的基础上，本次参与前端的编写就比较容易了，我和另外一个伙伴我们选择了套用模板，在模板的基础上修改成我们想要的样子，这一点很重要，在这样一个很短的时间内，进行前端的编写，我们最好的选择就是进行模板的修改，但对于初学者来说，就算是修改模板，也是一件极其难的事！而我主要负责前端登录页面的编写以及学生端模块的功能编写。所以在这里把我们修改后的比较漂亮的前端登录页面分享出来，供大家指正，也是自己的一个学习记录！先给大家看一下我们的图吧：
这里写图片描述

正文

  • 先附上整个项目的工程：https://gitee.com/xminghua/Login，大家可以自行下载下来进行测试，测试详细步骤在下文中有详细具体的介绍。

  • 使用软件

    • 编写网页有很多工具，按照我编写网页的经历来看，下面这几个会比较好用一点：Hbuilder，sublime以及eclipse等等都可以，不过我比较推荐的是Hbuilder，它最大的一个特点就是即写即看，什么意思呢，就是你在编写网页的过程中，不用再浏览器中去重新运行，就能在该编辑器中直接看到网页，就像我们编写csdn博客的时候，能够在左边编写，右边看到结果一个道理。
  • 使用环境
    • 使用的具体环境就是windows7/8/10都可以吧，其他的不需要具体的编译环境。
  • 导入外部包
    • 导入的外部包主要有css，js，以及自己写的css和js，外部包css主要是加载网页的整体样式，自己写的css主要是规定自己的需要实现的样式；外部包js主要是为了网页中能嵌入js以及jquery语言进行功能的动态实现，而自己写的js则主要是进行功能的实现。具体如下：1，外部包：bootstrap.min.css、bootstrap.min.js、jquery-3.3.1.min.js；2，login.css、index.js（这些都会在我的工程里面，大家都可以自行下载测试）
  • 网页使用语言
    • 网页使用的主要编程语言是HTML，CSS，JQuery以及JS。
  • 网页框架
    • 本登录网页主要是使用的Bootstrap框架。
  • 网页结构
    • 本网页结构为html标签作为整个网页的主要框架，CSS网页的样式，JS实现动态加载以及对应的标签的功能的实现。

  • 项目工程

    • 创建项目工程

      • 我在这里给大家推荐的编辑器是Hbuilder（注意要选择这个版本进行下载：这里写图片描述），所以我在这里给出的示例就是在Hbuilder上进行工程的创建，如下图所示：

        • 打开Hbuilder，按图操作：
          这里写图片描述

        • 生成的默认的web项目如下所示：
          这里写图片描述

        • 然后我们先将外部包导入bootstrap.min.css、bootstrap.min.js、jquery-3.3.1.min.js（大家可以再网上自行下载对应的外部包，或者直接下载我的工程，里面包含有所有的源文件信息，然后直接将外部包复制到项目中去即可），如图所示：
          这里写图片描述

        • 导入包之后，则需要将外部包在主网页中进行引入，并进行HTTP相关属性设置（在meta标签中进行设置）如图所示：
          这里写图片描述

        • 然后开始在body中开始编写我们的主网页代码，编写完成后，大家可以自行查看一下样式，如图所示：
          这里写图片描述
          在浏览器中显示如下所示：
          这里写图片描述

        • 然后我们再和我们上面的最开始的样例进行对比，好像好差了一些东西呢，而且这个时候点击任何按钮不会有任何操作，因为还没有进行功能的实现。所以这个时候我们就需要加入自己的东西了（css和js，如果只想实现页面，js可以不用加，后面进行登录验证再进行编写），我们在css文件夹中新建一个css文件，命名为login.css，然后将我们现在的项目中的login.css复制过去，并讲img中的login.jpg复制到你的工程的对应的img文件夹中，或者自己下载一张图片，然后取相同的名字，放在相同的位置即可。都完成之后，然后将login.css外部文件引入到网页中去。然后按照图中进行操作，你会看到神奇的一幕：
          这里写图片描述
          浏览器中显示如图所示：
          这里写图片描述

        • 如果你们想实现以下效果的话，可以自己在js文件夹中写js代码，然后再html中引入即可。如图所示：
          这里写图片描述
          登录成功：
          这里写图片描述
          登录失败：
          这里写图片描述

    • 项目代码编写

      • 这里均只给出主要实现代码，完整代码工程中有，需要的大家可以自行下载。
      • index.html部分代码：
……
<body><div class="box"><div class="login-box"><div class="login-title text-center"><h1><small>暑期实习管理系统</small></h1></div><div class="login-content "><div class="form"><form id="modifyPassword" class="form-horizontal" action="" method="post">                          <!-- 用户名输入 --><div class="form-group"><div class="col-xs-10 col-xs-offset-1"><div class="input-group"><span class="input-group-addon"><span
                                        class="glyphicon glyphicon-user"></span></span> <input type="text" id="username" name="username" class="form-control" placeholder="用户名" value="20180804"></div></div></div><!-- 密码输入 --><div class="form-group"><div class="col-xs-10 col-xs-offset-1"><div class="input-group"><span class="input-group-addon"><span
                                        class="glyphicon glyphicon-lock"></span></span> <input type="password" id="password" name="password" class="form-control" placeholder="密码" value="123456"></div></div></div><!-- 用户类型选择 --><div class="radio-group"><input type="radio" name="radioname" id="radioname1" value="学生" checked="checked">学生&nbsp;<input type="radio" name="radioname" id="radioname2" value="实习指导老师" >实习指导老师&nbsp;<input type="radio" name="radioname" id="radioname3" value="项目负责人">项目负责人</div><!-- 登录重置按钮 --><div class="form-group form-actions"><div class="col-xs-12 text-center"><button type="button" id="login" class="btn btn-sm btn-success" ><span class="fa fa-check-circle"></span>登录</button><button type="button" id="reset" class="btn btn-sm btn-danger"><span class="fa fa-close"></span> 重置</button></div></div></form></div></div></div></div></body>
……
     - login.css部分代码：

……
html, body {height: 100%;}.box {background: url(../img/login.jpg) no-repeat center center;background-size: cover;margin: 0 auto;position: relative;width: 100%;height: 100%;}.login-box {width: 100%;max-width: 500px;height: 400px;position: absolute;top: 50%;margin-top: -200px;/*设置负值，为要定位子盒子的一半高度*/}@media screen and (min-width: 500px) {.login-box {left: 50%;/*设置负值，为要定位子盒子的一半宽度*/margin-left: -250px;}}.form {width: 100%;max-width: 500px;height: 250px;margin: 2px auto 0px auto;}.login-content {/* background:url("../image/03.png") no-repeat center center; */border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;height: 250px;width: 100%;max-width: 500px;background-color: rgba(255, 250, 2550, .6);float: left;}.input-group {margin: 30px 0px 0px 0px !important;}.form-control,.input-group {height: 40px;}.form-actions {margin-top: 18px;}.form-group {margin-bottom: 0px !important;}.radio-group{margin-top:10px;margin-left:45px;}.login-title {border-top-left-radius: 8px;border-top-right-radius: 8px;padding: 20px 10px;background-color: rgba(0, 0, 0, .6);}.login-title h1 {margin-top: 10px !important;}.login-title small {color: #fff;}.link p {line-height: 20px;margin-top: 30px;}.btn-sm {padding: 8px 24px !important;font-size: 16px !important;}.flag {position: absolute;top: 10px;right: 10px;color: #fff;font-weight: bold;font: 14px/normal "microsoft yahei", "Times New Roman", "宋体", Times, serif;}#login,#reset{margin-left:10px;margin-right:10px;}
……
     - login.js部分代码:

……
$(document).ready(function(){$("#login").click(function(event) {var name = $("#username").val();var pwd = $("#password").val();if(name==""){alert("用户名不能为空！");}else if(pwd==""){alert("密码不能为空！");}else if(pwd!="" && pwd.length < 6){alert("密码不能小于6位！");}else if(name!="" && pwd !="" && pwd.length >= 6){if(name == "20180804" && pwd == "123456"){alert("登录成功！");}else{alert("用户名或密码错误！");window.location.href = "index.html";}}});
});
……

PS:哈哈，希望我们共同学习指正，有不懂的小伙伴，可以博客回复，或者QQ咨询（404125822）！


http://chatgpt.dhexx.cn/article/8TnYUgOB.shtml

相关文章

html后台登录界面网页设计界面

html后台登录界面网页设计界面

一款简单的html后台登录界面网页设计界面带给大家。 效果图&#xff1a; html代码&#xff1a; <!DOCTYPE html> <html> <head><title>某某公司后台登录系统</title><link rel"stylesheet" href"css/style.css">&l…
阅读更多...
HTML 实现好看的登录注册界面（一)

HTML 实现好看的登录注册界面（一)

1. 效果图展示 2. 代码 2.1 HTML部分 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" con…
阅读更多...
HTML制作用户登录界面

HTML制作用户登录界面

1、index代码 <!doctype html> <html><head><meta charset"utf-8"><title>login</title><link rel"stylesheet" type"text/css" href"css/index.css"/></head><body><div&…
阅读更多...
登录界面html源代码_网页制作：一个简易美观的登录界面

登录界面html源代码_网页制作：一个简易美观的登录界面

登录界面html源代码_网页制作&#xff1a;一个简易美观的登录界面 效果图 在我们做一个页面之前&#xff0c;要先想好他的一个整体布局&#xff0c;也就是我们这里面的login.html主页面&#xff0c;大致结构如下&#xff1a; 接下来&#xff0c;我们先上代码&#xff0c;看一…
阅读更多...
HTML+CSS登陆界面实例

HTML+CSS登陆界面实例

登录界面截图 项目代码仓库地址 项目的代码放在了github的代码仓库当中&#xff1a;点我 项目访问地址 将登录界面项目部署在了github上面&#xff1a;点我 项目代码解析 项目的界面简析 主要部分是Login的模块&#xff0c;包括username文本框和password文本框以及Login的…
阅读更多...
HTML+CSS登录注册界面

HTML+CSS登录注册界面

目录 一、效果演示二、代码实现2.1、HTML主页面2.2、CSS代码2.3、JS代码 一、效果演示 [注]: 这里需要我们创建三个文件&#xff0c;一个是index.html文件&#xff0c;一个是style.css文件还有一个是login.js文件&#xff0c;把代码copy上去 只要路径找好就能正常运行了。 演示…
阅读更多...
HTML+CSS登录界面

HTML+CSS登录界面

今天学习了一个HTML+CSS登录界面 效果图如下： 背景图片可以选取自己喜欢的，以下是实现代码： login.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet&quo…
阅读更多...
HTMLCSS登录界面及讲解

HTMLCSS登录界面及讲解

PS:该源码非原创&#xff0c;原文章来自(2条消息) HTMLCSS登录界面_桐艾的博客-CSDN博客_登录页面 这里只做源码讲解 页面效果如下&#xff1a; 首先是login.html <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>登…
阅读更多...
好看的html登录界面，

好看的html登录界面，

界面效果&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html><head><title>Login Page</title><style>body {background-color: #f2f2f2;font-family: Arial, sans-serif;}form {background-color: #fff;border-radius: 5px;box-shado…
阅读更多...
HTML简单登录界面的实现

HTML简单登录界面的实现

简单登录界面的实现&#xff1a; 直接一个实例上代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"&…
阅读更多...
html好看的登录界面2（十四种风格登录源码）

html好看的登录界面2（十四种风格登录源码）

文章目录 1.登录风格效果说明1.1 凹显风登录界面1.2 大气简洁风登录界面1.3 弹出背景风登录界面1.4 动态左右切换风登陆界面1.5 简洁背景切换登录界面1.6 可关闭登录界面1.7 蒙蒙山雨风登录界面1.8 苹果弹框风登录界面1.9 上中下青春风登录界面1.10 夏日风登录界面1.11 星光熠熠…
阅读更多...
html+css唯美登录页面，代码提供（效果展示）

html+css唯美登录页面，代码提供（效果展示）

文章目录 效果图所有代码 效果图 所有代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" co…
阅读更多...
使用 ELK 收集日志

使用 ELK 收集日志

在当前分布式、微服务架构下&#xff0c;各个应用都部署在不同的服务器上&#xff0c;每个应用都在记录着自己重要或者不重要的日志信息。当我们要通过日志信息来排查错误时&#xff0c;可以根据出错应用在对应的机器上找报错相关的日志信息。但是&#xff0c;可能我们不具有相…
阅读更多...
ELK日志分析

ELK日志分析

目录 一、概述 ELK工作原理 二、Elasticsearch 1.介绍 2.基础核心概念 (1)接近实时&#xff08;NRT&#xff09; (2)集群&#xff08;cluster&#xff09; (3)节点&#xff08;node&#xff09; (4)索引&#xff08;index&#xff09; (5)类型&#xff08;type&…
阅读更多...
ELK日志分析系统（一）之ELK原理

ELK日志分析系统（一）之ELK原理

文章目录 前言一、ELK简介1.ELK日志分析系统组成1.1Elasticsearch&#xff08;es&#xff09;1.2Logstash1.3Kibana 2.日志处理步骤 二、Elasticsearch1.Elasticsearch概述2.Elasticsearch核心概念2.1接近实时&#xff08;NRT&#xff09;2.2集群&#xff08;cluster&#xff0…
阅读更多...
ELK相关软件下载安装

ELK相关软件下载安装

一、Windows安装elasticsearch 1、安装JDK&#xff0c;至少1.8.0_73以上版本&#xff0c;验证&#xff1a;java -version 2、下载和解压缩Elasticsearch安装包&#xff0c;查看目录结构 下载地址&#xff1a;https://www.elastic.co/cn/downloads/elasticsearch 目录结构&am…
阅读更多...
ELK日志分析系统

ELK日志分析系统

目录 一、ELK日志分析系统 1、日志分析 2、elk 日志分析的工具 3、Logstash 4、elasticsearch介绍 5、Elasticsearch的基础核心概念 7、logstash介绍 8、Kibana介绍 二、实验 1、配置elasticsearch环境 2、安装elasticsearch-head插件 3、安装logstash 4、在node1主…
阅读更多...
centos7搭建elk

centos7搭建elk

ELK 是 ElasticSearch、 LogStash、 Kibana 三个开源工具的简称，现在还包括 Beats，其分工如下: LogStash/Beats: 负责数据的收集与处理ElasticSearch: 一个开源的分布式搜索引擎，负责数据的存储、检索和分析Kibana: 提供了可视化的界面。负责数据的可视化操作基于 ELK Stack…
阅读更多...
ELK简介

ELK简介

目录 1.什么是ELK 2.为什么使用ELK 3.ELK的工作流程简介 4.ELK重点组件介绍 ①Filebeat工作原理&#xff1a; ②Logstash工作原理&#xff1a; 5.ELK架构举例 ①&#xff1a; ②&#xff1a; ③&#xff1a; 1.什么是ELK ELK是三个开源软件的缩写&#xff0c;分别是E…
阅读更多...
ELK分布式日志解决方案

ELK分布式日志解决方案

一、简介 ELK&#xff0c;包含三款产品&#xff0c;Elasticsearch、Logstash、Kibana&#xff0c;可在项目中作为日志框架使用。 项目中框架整合所需技术&#xff1a; 在整个方案中&#xff0c;各组件的作用如下&#xff1a; 应用服务 生产日志&#xff0c;通过Logger产生日…
阅读更多...
推荐文章

Copyright @ 2022~2023