超级好看的前段登录页面

谁人不识我千夜

于 2020-11-16 09:02:35 发布

阅读量1.8k

点赞数 1

分类专栏： java 文章标签： html java web jsp

本文链接：https://blog.csdn.net/weixin_46064585/article/details/109713821

版权

java 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

本篇文章讲解如何用上面所说的五个技术完成登录功能的前端页面展示和错误提示
html部分：

<body background="img/1.jpg">
<div id="abc">
<form class="form-horizontal" action="/wcc" method="get">
    <div class="form-group" id="2">
        <font color="#f0ffff" size="4" class="col-sm-7  control-label">
            <%=request.getAttribute("error04")==null?"":request.getAttribute("error04")%>
        </font>
    </div>
    <div class="form-group">
        <label for="i" class="col-sm-4  control-label"><font color="#f0ffff">手机号:</font></label>
        <div class="col-sm-3">
            <input type="text" class="form-control " id="i" placeholder="请输入手机号" name="name">
        </div>
    </div>
    <div class="form-group">
        <label for="in" class="col-sm-4 control-label"><font color="#f0ffff">密码:</font></label>
        <div class="col-sm-3">
            <input type="password" class="form-control" id="in" placeholder="请输入密码" name="pass">
        </div>
    </div>

    <div class="form-group" >
        <div class="col-sm-5 col-xs-6 control-label">
            <button type="button" class="btn btn-primary" id="zhuce">注册</button>
            &nbsp; &nbsp; &nbsp; &nbsp;
        </div>
        <div class="col-sm-2 col-xs-2 control-label">
            <button type="submit" class="btn btn-success" id="denglu">登录</button>
        </div>
    </div>
</form>
</div>

有个注意的点就是用css整体把表单进行置中,这个是咨询了前段的朋友
css部分：

<style>
        #abc{
            position:absolute;
            left: 0px;
            top:250px;
            bottom:0px;
            right:0px;
        }
    </style>

js部分

<script>
        window.onload=function () {
            document.getElementById("zhuce").onclick=function () {
                window.location.href="/wc.jsp";
            }
        }
    </script>

接下来是整体代码,没啥好说的,不过bootstrap用的不熟,手机端显示不好,电脑端良好

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href="img/3.ico" rel="icon" type="image/x-icon" />
    <title>欢迎来到落风影视</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>
        #abc{
            position:absolute;
            left: 0px;
            top:250px;
            bottom:0px;
            right:0px;
        }
    </style>
    <script>
        window.onload=function () {
            document.getElementById("zhuce").onclick=function () {
                window.location.href="/wc.jsp";
            }
        }
    </script>
    <script>
        <!--这里以后有空了写一下鼠标右键的单击事件,让不生效即可-->
    </script>



</head>
<body background="img/1.jpg">
<div id="abc">
<form class="form-horizontal" action="/wcc" method="get">
    <div class="form-group" id="2">
        <font color="#f0ffff" size="4" class="col-sm-7  control-label">
            <%=request.getAttribute("error04")==null?"":request.getAttribute("error04")%>
        </font>
    </div>
    <div class="form-group">
        <label for="i" class="col-sm-4  control-label"><font color="#f0ffff">手机号:</font></label>
        <div class="col-sm-3">
            <input type="text" class="form-control " id="i" placeholder="请输入手机号" name="name">
        </div>
    </div>
    <div class="form-group">
        <label for="in" class="col-sm-4 control-label"><font color="#f0ffff">密码:</font></label>
        <div class="col-sm-3">
            <input type="password" class="form-control" id="in" placeholder="请输入密码" name="pass">
        </div>
    </div>

    <div class="form-group" >
        <div class="col-sm-5 col-xs-6 control-label">
            <button type="button" class="btn btn-primary" id="zhuce">注册</button>
            &nbsp; &nbsp; &nbsp; &nbsp;
        </div>
        <div class="col-sm-2 col-xs-2 control-label">
            <button type="submit" class="btn btn-success" id="denglu">登录</button>
        </div>
    </div>
</form>
</div>

</body>
</html>