新闻后台登录页面

参考swpu 邮件主页编写新闻后台登录页面

大致布局

 

完善细节

头部

 

 中间以及尾部

 

 

 最终页面效果

 

静态验证用户名以及密码是否为空

 

 验证用户名或密码是否正确

 

 验证输入正确用户名以及密码能否跳转

 

 代码部分

HTML:

<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
  <header>
      <div class="log">
          <img src="img/login_logo.png">
      </div>
      <div><a href="" class="help">帮助</a></div>
  </header>

  <main>
    <div class="login-box">
      <div class="login-head">
        <div class="login-title">账号登录</div>
        <div class="icon"></div> 
      </div>
      <div class="login-content">
        <div id="tip">
            <br>
        <div class="user-login">用户登录</div>
        </div>
        <div>
            <input type="text" name="username" placeholder="用户名"  id="username">
        </div>
        <div>
            <input type="password" name="password" placeholder="密码" id="password">
        </div>
        <div>
            <div class="choose">学生选择@stu.swpu.edu.cn</div>
            <div><a href="" class="forget">忘记密码</a></div>
        </div>
        <div>
            <input type="button" name="sumbit" value="登录" class="login" onclick="fnLogin()">
        </div>
      </div>
    </div>
  </main>
  <footer>
      <div class="foot">西南石油大学</div>
  </footer>
  </body>
</html>

CSS：

header{
        height: 80px;
        width: 100%;
        background-color: #F5F5F5;
    }
    .log{
        margin-left: 200px;
        margin-top: 15px;
        float: left;
    }
    .help{
        text-align: center;
        font-size: 14px;
        height: 20px;
        width: 30px;
        margin-top: 35px;
        margin-right: 200px;
        float: right;
        font-weight: bolder;
        color: gray;
        text-decoration: none;
    }
    main{
        height: 340px;
        width: 840px;
        background-color: aqua;
        margin-left: 200px;
        margin-top: 50px;
        padding: 60px;
        background-image: url('img/login_bg_05.jpg');
    }
    .login-box{
        height: 300px;
        width: 350px;
        background-color: #fff;
        float: right;
    }
    .login-head{
        height: 40px;
        width: 350px;  
        display: flex;
        justify-content: flex-end;
        background-color: #e08527;
    }
    .login-title{
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        line-height: 40px;
        text-align: center;
        color: #fff;
    }
    .icon{
        height: 40px;
        width: 20px;
        background-color: black;
        background-image: url('img/dragbar.png');
    }
    .login-content{
        background-color: #fff;
        padding: 30px;
    }
    /* #tip{
        height: 31px;
        width: 294px;
        background-color: #cc3300;
        color: #fff;
        text-align: center;
        line-height: 31px;
    } */
    .user-login{
        text-align: left;
        font-weight: bolder;
        margin-top: -30px;
    }
    #username{
        height: 40px;
        width: 290px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #password{
        height: 40px;
        width: 290px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .choose{
        height: 30px;
        width: 220px;
        font-size: 13px;
        color: red;
        line-height: 30px;
        float: left;
    }
    .forget{
        height: 30px;
        width: 60px;
        line-height: 30px;
        font-size: 13px;
        text-decoration: none;
        color: gray;
        font-weight: bolder;
        float: right;
    }
    .login{
        height: 40px;
        width: 150px;
        background-color: #4e92d9;
        border-radius: 4px;
        float: right;
        color: #fff;
    }
    .foot{
        text-align: center;
        margin-top: 20px;
        color: gray;
        font-size: 12px;
    }

JavaScript：

function fnLogin() {
        var user = document.getElementById('username');
        var pwd = document.getElementById('password');
        var tip = document.getElementById('tip');
        if(user.value.length==0 || pwd.value.length==0){
            tip.innerHTML = '请输入用户名和密码';
            tip.style.height='30px';
            tip.style.width='290px';
            tip.style.color='#fff';
            tip.style.backgroundColor='#cc3300';
            tip.style.lineHeight='30px';
            tip.style.textAlign='center';
        }
        else if(user.value=='tom' && pwd.value==123){
            window.location = 'https://mail.swpu.edu.cn/';
        }
        else{
            tip.innerHTML = '您填写的用户名或者密码错误';
            tip.style.height='30px';
            tip.style.width='290px';
            tip.style.color='#fff';
            tip.style.backgroundColor='#cc3300';
            tip.style.lineHeight='30px';
            tip.style.textAlign='center';
        }
      }

代码码云地址：https://gitee.com/xiaotiejiang329/codes/usx5b70idn8w6h9okc2gf90

posted @ 2020-05-12 15:30  小丨铁匠  阅读(532)  评论(0)    收藏  举报