一个简单的jsp登录界面

最新推荐文章于 2024-04-17 17:17:27 发布

孙行者ღ

最新推荐文章于 2024-04-17 17:17:27 发布

阅读量2.1k

点赞数 3

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_51443864/article/details/121109810

版权

登录界面

新建css文件夹，在文件夹下创建login.css文件

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: url("../images/login.jpg") no-repeat 0px 0px;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#loginDiv {
    width: 37%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    background-color: rgba(75, 81, 95, 0.3);
    box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
    border-radius: 5px;
}

#name_trip {
    margin-left: 50px;
    color: red;
}
#password_trip{
    margin-left: 50px;
    color: red;
}

p {
    margin-top: 30px;
    margin-left: 20px;
    color: azure;
}

input {
    margin-left: 15px;
    border-radius: 5px;
    border-style: hidden;
    height: 30px;
    width: 140px;
    background-color: rgba(216, 191, 216, 0.5);
    outline: none;
    color: #f0edf3;
    padding-left: 10px;
}

.button {
    border-color: cornsilk;
    background-color: rgba(100, 149, 237, .7);
    color: aliceblue;
    border-style: hidden;
    border-radius: 5px;
    width: 100px;
    height: 31px;
    font-size: 16px;
}

2.新建index.jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
      <link rel="stylesheet" type="text/css" href="css/login.css">
  </head>
  <body>
  <div id="loginDiv">
      <form action="checkUser.jsp" method="post" target="_blank" id="form">
          <h1 style="text-align: center;color: aliceblue;">LOGIN  IN</h1>
          <p>User Name:<input id="userNname" type="text" name="loginname"><label id="name_trip"></label></p>

          <p>Password:  &nbsp;<input id="password" type="password" name="password"><label id="password_trip"></label></p>

          <div style="text-align: center;margin-top: 30px;">
              <input type="submit" class="button" value="登录" οnclick="RegisterSubmit()">
              <input type="reset" class="button" value="重置">
          </div>
      </form>
  </div>
  <script>
      function RegisterSubmit() {
          var user=document.getElementById("userNname").value;
          var pass=document.getElementById("password").value;
          if(user==null||user==""){alert("请填写用户名");}
          else if(pass==null||pass==""){alert("请填写密码");}
          else submit();
      }
  </script>
  </body>
</html>

孙行者ღ

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
一个简单的jsp登录界面

登录界面新建css文件夹，在文件夹下创建login.css文件* { margin: 0; padding: 0;}html { height: 100%; width: 100%; overflow: hidden; margin: 0; padding: 0; background: url("../images/login.jpg") no-repeat 0px 0px; background-size: 100%
复制链接

扫一扫