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=" 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=" 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; 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; 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>
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 964px; 17 height: 460px; 18 margin: auto; 19 background-image:url(img/login_bg_02.jpg); 20 } 21 #page_foot{ 22 height: 60px; 23 964px; 24 background-color: #f5f5f5; 25 margin: auto; 26 text-align: center; 27 padding-top: 15px; 28 } 29 #h{ 30 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 380px; 47 height: 350px; 48 position: absolute; 49 background-color: white; 50 } 51 #loginTitle{ 52 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 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; 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 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 320px; 104 clear: both; 105 text-align:center; 106 107 }
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
总结：详细源代码见网盘：https://pan.baidu.com/s/1QFPdc9zYU1LAB1Lp89sl_A 提取码: v5dc 复制这段内容后打开百度网盘手机App，操作更方便哦