登录页面

1、未填写密码：

 

 

2、密码错误：

 

3、未输入账号：

 

 

4、登录成功：

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>西南石油大学电子邮件系统</title>
  <link rel="stylesheet" href="./css/style.css">
  <script>
    var checkForm = () => {
      let acount = document.querySelector('#acount')
      let password = document.querySelector('#password')
      if ('' == acount.value) {
        alert('请填写账号')
        return 
      }
      if ('' == password.value) {
        alert('请填写密码')
        return 
      }
      if ('GM' != acount.value) {
        window.alert('不存在此账号')
        acount.value = ''
        password.value = ''
        acount.focus()
        acount.select()
      } else if ('GM' != password.value) {
        window.alert('密码错误')
        password.value = ''
        password.focus()
      } else if ('GM' == acount.value && 'GM' == password.value){
        window.alert('登陆成功')
        window.location.href = 'main.htm'
      }
    }
  </script>
</head>
<body>
  <header class="head">
    <img src="./img/login_logo.png" class="logo">
    <span class="help">帮助</span>
  </header>
  <div class="content-wrapper">
    <div class="login-wrapper">
      <form action="#">
        <div class="form-head">
          <span class="form-title">账号登录</span>
          <img src="./img/dragbar.png" class="dragbar">
        </div>
        <div class="form-content">
          <span class="b-block-text">用户登录</span>
          <input type="text" id="acount" class="info-item" placeholder="用户名" required>
          <input type="password" id="password" class="info-item" placeholder="密码" required>
          <div class="footer-info">
            <span class="warning-info">学生选择@stu.swpu.edu.cn</span>
            <a href="#" class="forget-psd">忘记密码</a>
          </div>
          <input class="submit" type="submit" value="登录" onclick="checkForm();return false;">
        </div>
      </form>
    </div>
    <div class="footer">西南石油大学</div>
  </div>
</body>
</html>

login.htm
* {
  margin: 0;
  padding: 0;
}
.head {
  width: 100%;
  height: 76px;
  background: #f5f5f5;
  background-size: cover;
}
.logo {
  position: absolute;
  top: 15px;
  left: 10px;
}
.help {
  position: absolute;
  top: 40px;
  right: 35px;
  font-weight: 700;
  font-size: 15px;
  color: #b3b3b3;
}
.content-wrapper {
  position: absolute;
  top: 92px;
  left: 50%;
  margin-left: -475px;
  width: 950px;
  height: 520px;
  background: url(../img/login_bg_05.jpg)
}
.login-wrapper {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  right: 35px;
  width: 380px;
  height: 360px;
  background: #fff;
}
.login-wrapper > form {
  width: 300px;
  height: 340px;
  top: 15px;
}
.form-head {
  width: 360px;
  height: 35px;
  background: url(../img/c.png);
  font-size: 15px;
  color: #eee;
  text-align: center;
  line-height: 35px;
  opacity: .8;
  cursor: pointer;
}
.form-content {
  margin: 10px 0 10px 0;
}
.dragbar {
  position: absolute;
  right: 0;
  width: 20px;
  height: 35px;
  cursor: move;
}
.b-block-text {
  display: block;
  font-weight: 600;
  height: 22px;
  padding-top: 10px;
  text-indent: 30px;
}
.info-item {
  width: 300px;
  height: 40px;
  margin: 15px 0 12px 30px;
  padding-left: 8px;
  font-size: 18px;
  background-color: #f5f5f5;
}
.footer-info {
  margin-top: 20px;
}
.warning-info {
  color: red;
  margin-left: 30px;
}
.forget-psd {
  position: absolute;
  right: 30px;
  color: #c5c5c5;
  text-decoration: none;
}
.forget-psd:hover {
  color: #a5a5a5;
  text-decoration-line: underline;
  text-decoration-color: #c5c5c5;
}
.submit {
  position: absolute;
  right: 35px;
  bottom: 25px;
  width: 140px;
  height: 40px;
  background: #76f;
  font-size: 15px;
  color: #fff;
  letter-spacing: 10px;
  text-align: center;
  cursor: pointer;
}
.footer {
  width: 100%;
  height: 60px;
  background: #f1f1f1;
  color: #bbb;
  font-size: 14px;
  text-align: center;
  line-height: 60px;
  position: absolute;
  bottom: 0;
}

style.css

 

链接：https://pan.baidu.com/s/1YFNBkSnYLOp8bNF3R17mmA
提取码：0u8j

posted @ 2019-03-27 12:56  小丨铁匠  阅读(212)  评论(0)    收藏  举报