最新登陆页面基于html、css，含密码判断跳转页面

最新推荐文章于 2024-07-26 08:00:00 发布

你那里下代码雨了吗

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量217

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/2201_75903640/article/details/132493203

版权

解决了页面放缩问题以及密码错误跳转到原来页面

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <link rel="stylesheet" href="login.css">
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

</head>
<body>
  <!-- post方法提交无法跳转 -->
<form action="2.学生信息管理.html" method="get" onsubmit="return myFunction()">
<div id="login">
    <span >
        <h1 id="lo">
          <img src="../image/3.png" alt="用户照片"  title="学生信息管理系统" width="40px" height="50px" > 学生信息管理系统</h1>
    </span>
    
<div id="use">账号
<input type="text" id="user" required placeholder="请输入用户名" >
</div>
<br>
<div id="psw">密码
<input type="password" id="password" required placeholder="请输入密码" >
</div>
<br>
<br>
<button type="submit"  id="butt">登录</button>
</div>
</form>
</body>
<script>
<!--    登陆验证-->
    function myFunction() {
      if (document.getElementById("user").value == "a"&&document.getElementById("password").value == "1") {
        alert("登录成功");
        return ture;

    }
    else {
      alert("登录失败，请检查账号密码是否正确");
      return false;
      
    }
  }
    </script>
  </body>
  </html>

2.css

body{
    /*初始化 */
    margin: 1;
    padding: 0;
    background-image: url(../image/1.webp);
   
}
#login{
    border:1px solid rgb(205, 232, 232);
    width: 75%;
    height: 53.5%;
    /* 固定定位，浏览器怎么滑动，这个块都不变 */
    position: fixed;
    right: 80px;
    top: 150px;
    /* background-color: #68a3c6;
    background-image: linear-gradient(160deg, #68a3c6 0%, #80D0C7 100%);
     */
     /* 阴影 */
     box-shadow: 1px 1px 5px rgb(98, 100, 101);
     /* 透明度 */
     opacity: 0.9;
}
#lo{
   
    width:500px;
    text-align:center;
    font-size: 50px;
   color: rgb(238, 238, 238);
}
#use,#psw{
    
    width:70px;
    text-align:center;
    font-size: 25px;
    color: rgb(238, 238, 238);
}
#user,#password{
  
    width:300px;
    text-align:center;
    font-size: 25px;
}
#butt{
    width:100%;
    height: 60px;
    text-align:center;
    font-size: 20px;
}