登录界面设计

nüenüe280

已于 2024-03-06 20:13:43 修改

阅读量1k

点赞数 22

文章标签： java tomcat

于 2023-12-03 16:10:17 首次发布

本文链接：https://blog.csdn.net/weixin_62115318/article/details/134766176

版权

代码实现

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>学生选课系统登录</title>
<script src="${pageContext.request.contextPath}/bootstrap/js/jQuery.js"></script>
<style type=text/css>
   div{
       text-align: center; 
       line-height:30px;/*文字水平居中*/
       margin:auto;/*div水平居中*/
       font-size:20px;
     }
    
   .box {
       position: absolute;
       top: 200px;
       left: 50%;
       margin-left: -250px;
       width: 550px;
       height: 350px;
       /* background-color: #246aeb; */
       backdrop-filter: blur(2px) brightness(95%);
       border: 1px solid #e9e9e9;
       border-radius: 15px;
       box-shadow: 0px 0px 30px -10px #0a1032;
     }  
      
  .left {
     float: left;
     width: 200px;
     height: 350px;
     /* background-color: pink; */
     border-right: 1px solid #e9e9e9;
    }

   .left .touxiang {
     position: relative;
    }

   .left .touxiang img {
     position: absolute;
     left: 50%;
     margin-left: -50px;
     margin-top: 90px;
     width: 100px;
     height: 100px;
     border-radius: 50%;
     } 
     
    .left .touxiang span {
     position: absolute;
     top: 220px;
     left: 55px;
     font-size: 18px;
     color: #ffffff;
     font-style: italic;
     }
     
     .right .sign {
     position: absolute;
     top: 45px;
     left: 145px;
     font-size: 24px;
     color: #fff;
     font-weight: 600;
    }

   .right {
     position: absolute;
     top: -10px;
     right: 0;
     width: 350px;
     height: 350px;
     /* background-color: lightsalmon; */
    }

   .right {
     padding-top: 20%;
    }       

  .right input {
     display: block;
     /* margin-left: 10%;
     margin-bottom: 20px; */
     margin: 0 14% 25px 14%;
     padding-left: 15px;
     border: 0;
     width: 250px;
     height: 30px;
     border-radius: 20px;
     background-color: #ffffff;
    }

  .right input:nth-child(2) {
     margin-bottom: 20px;
    }

   .right select {
     display: block;
     /* margin-left: 10%;
     margin-bottom: 20px; */
     margin: 0 14% 25px 14%;
     padding-left: 15px;
     border: 0;
     width: 250px;
     height: 30px;
     border-radius: 20px;
     background-color: #ffffff;
    }

  .right select:nth-child(2) {
     margin-bottom: 20px;
    }
    
  .right button {
    margin: 15px auto 0;
    width: 250px;
    height: 30px;
    color: #fff;
    /* border: 1px solid #fff; */
    border-radius: 20px;
    text-align: center;
    line-height: 28px;
    background-color: #0a1032;
   }

</style>

</head>
<body  background = "login.jpg">
<FORM id=adminlogin  method=post
    name=adminlogin action="user?action=login"  >
        <br/>
        <br/>
        <br/>
        <br/>
          <center><h1>欢迎您使用学生选课系统</h1></center>    
          <br/>
          <br/>
          
          <div class = "box">
          <div class = "left">
          <div class = "touxiang">
          <img src = "images/头像1.jpg" alt = "">
          <span> yy的数据库 </span>
          </div>
          </div>
          
          <div class = "right">
          <div class = "sign">登录</div>
          
          <div>
            <input type="text" class=input value="${user.userName }" name="userName" id="userName" placeholder="用户账号">
          </div>
          
          <div>
            <input type="password" class=input value="${user.password }" placeholder="用户密码" name="password" id="password"/>
          </div>
          
          <div>
            <select id="userType" name="userType" class="input" placeholder="用户类型">
                <option value="">请选择用户类型...</option>
                <option value="管理员"  ${'管理员'==user.userType?'selected':'' }>管理员</option>
                <option value="教师"  ${'教师'==user.userType?'selected':'' }>教师</option>
                <option value="学生"  ${'学生'==user.userType?'selected':'' }>学生</option>            
            </select>
          </div>

          <div>
           <button id=btnLogin typy = "submit" name=btnLogin onclick="javascript:adminlogin.submit();return false;">立即登录</button>
         </div>
         
        </div>
</div>
</FORM>
</body>
</html>

https://download.csdn.net/download/weixin_62115318/88608202 可以获取整个文件包