时间戳

首页 > 技术文章 > 登录页面

登录页面

funnn24 2019-03-22 10:04 原文

1、页面展示

 

2、详细代码

HTML代码

 1     </head>
 2     <body>
 3         <div id="page">
 4             <div id="page_head">
 5                 <div id="h">
 6                     <div id="logo">
 7                         <img src="login_logo.png" />
 8                     </div>
 9                     <a href="http://mail.swpu.edu.cn/?q=help" target="_blank" class="help">帮助</a>
10                 </div>
11             </div>
12             <div id="page_body">
13             <div id="logo">
14                         <img src="login_bg_02.jpg" />
15                     </div>
16                 <div id="login">
17                     <div id="loginTitle">
18                         <b>账号登录</b>
19                     </div>
20                     <div class="textitem1">
21                     
22                         <input style="width: 320px;height: 30px;" id="input_user" type="text" name="zh" placeholder="用户名" />
23                         <div id="msg_box"><br></div>
24                     </div>
25                 
26                     <div class="textitem2">
27                 
28                         <input style="width: 320px;height: 30px;"id="input_psw" type="password"name="zh" placeholder="密码" />
29                              <div id="msg"><br></div>
30                     </div>
31                     
32                     <div style="position: absolute;left: 30px;top: 220px;width: 320px;">
33                         <span style="color: red;float: left;">学生选择@stu.swpu.edu.cn</span>
34                         <a href="http://mail.swpu.edu.cn/?q=resetpw"style="float: right;">忘记密码</a>
35                     </div>
36                     <div style="position: absolute;left: 30px;top: 260px;width: 320px;">
37                                    <input class="btn" type="submit" value="登    录" onclick="fnLogin();return false">
38                         
39                     </div>
40 
41             </div>
42             <div id="page_foot">
43                     <p style="color:gray">西南石油大学</p>
44             </div>
45         </div>
46         </div>>
47     </body>
View Code

CSS代码

  1 #page{
  2                 background-color: white;
  3                 height:600px;
  4                 border:1px;
  5                 
  6                 margin: auto;
  7             }
  8             #page_head{
  9                 height:76px;
 10                 line-height:90px; 
 11                 background:#f5f5f5; 
 12                 border-bottom:1px solid #e5ecf0; 
 13                 overflow:hidden;
 14             }
 15             #page_body{
 16                 width: 964px;
 17                 height: 460px;
 18                 margin: auto;
 19                 background-image:url(img/login_bg_02.jpg);
 20             }
 21             #page_foot{
 22                 height: 60px;
 23                 width: 964px;
 24                 background-color: #f5f5f5;
 25                 margin: auto;
 26                 text-align: center;
 27                 padding-top: 15px;
 28             }
 29             #h{
 30                 width: 964px;
 31                 height: 76px;
 32                 margin: auto;
 33             }
 34             #logo{
 35                  padding-top:15px;
 36                  float:left;
 37                  margin: auto;
 38             }
 39             .help{
 40                 float:right; font-size:14px; font-weight:700; color:#787878; text-decoration:none;
 41                 margin: auto;
 42             }
 43             #login{
 44                 margin-top: 60px;
 45                 margin-left: 550px;
 46                 width: 380px;
 47                 height: 350px;
 48                 position: absolute;
 49                 background-color: white;
 50             }
 51             #loginTitle{
 52                 width:380px;height: 40px;
 53                 padding-top:10px ;
 54                 background-color: orange;
 55                 text-align: center;color: #fff;fo accelerator: 16px;
 56             }
 57             #tip{display: none;
 58                 height: 30px;
 59                 width: 320px;
 60                 background-color: #cc3300;color: white;
 61                 text-align: center;line-height: 30px;
 62                 margin: auto;
 63                 
 64             }
 65             .textitem1{
 66                 position: absolute;
 67                 height: 70px;
 68                 left:30px;
 69                 top:100px
 70             }
 71             .textitem2{
 72                 position: absolute;
 73                 height: 70px;
 74                 left:30px;
 75                 top:160px
 76             }
 77             .btn{
 78                 height: 38px;width: 120px;
 79                 border: solid 1px;
 80                 color: white;
 81                 float:right;
 82                 background:#276bd1;
 83                 font-weight: 400;font-size: 18px;
 84                 font-family: "微软雅黑";
 85                 cursor:pointer;
 86                 font-weight: bold;
 87             }
 88             #msg{
 89                 color: #f15b30;
 90                 margin:auto;
 91                 margin-top:5px;
 92                 font-size: 13px;
 93                 width:320px;
 94                 clear: both;
 95                 text-align:center;
 96 
 97           }
 98           #msg_box{
 99                 color: #f15b30;
100                 margin:auto;
101                 margin-top:5px;
102                 font-size: 13px;
103                 width:320px;
104                 clear: both;
105                 text-align:center;
106 
107           }
View Code

JS代码

 1     <script>
 2 
 3 
 4 
 5             function fnLogin()
 6             {
 7                 var uname=document.getElementById("input_user");
 8                 var password=document.getElementById("input_psw");
 9                 var error1=document.getElementById("msg_box");
10                 var error2=document.getElementById("msg");
11                 
12                 if(uname.value.length==0)
13                 {
14                     
15                     error1.innerHTML="用户名不能为空";
16 
17                 }
18                 else if(password.value.length==0)
19                 {
20                         
21                         error2.innerHTML="请输入密码！";
22                 }
23                 
24                 if(uname.value==123&&password.value==123)
25                 {
26                     window.location="http://www.swpu.edu.cn/";
27                 }    
28             }
29             $(function(){
30                 document.onkeydown=keyDownSearch;
31                 function keyDownSearch(e) {
32                     // 兼容FF和IE和Opera
33                     var theEvent = e || window.event;
34                     var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
35                     if (code == 13) {
36                         $('#submit').click();//具体处理函数
37                         return false;
38                     }
39                     return true;
40                 }
41             });
42         </script>
43
View Code

 

总结：详细源代码见网盘：https://pan.baidu.com/s/1QFPdc9zYU1LAB1Lp89sl_A 提取码: v5dc 复制这段内容后打开百度网盘手机App，操作更方便哦

推荐阅读