HTML登录界面的实现详解

HTML 同时被 3 个专栏收录
3 篇文章 0 订阅
1 篇文章 0 订阅
1 篇文章 0 订阅

前言序锦


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)!

©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

HuaCode

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值