HTML登录界面的实现详解

大家好，又见面了，我是你们的朋友全栈君。

前言序锦

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";
            }
        }
    });
});
……