登录页面
学号：201631062509
姓名：杨菓
1.最终效果图
主界面
当不输入用户名时
当正确输入用户名时跳转
2.源代码
HTML
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>西南石油大学新闻媒体</title> 6 <link rel="stylesheet" type="text/css" href="css/new_file.css"/> 7 <script type="text/javascript" src="js/new_file.js" ></script> 8 <body style="margin: 0;padding: 0;"> 9 <div class="t"> 10 <div class="h"> 11 <div class="logo"> 12 <img src="img/toplogo.png" /> 13 </div> 14 <a class="help" href="#"></a> 15 </div> 16 </div> 17 18 <div class="c"> 19 <div class="box" style="left: auto;top: 60px; right: 60px;"> 20 <ul class="tab" id="tab"> 21 <li class="current" >账号登录</li> 22 <li class="dragbar" style="float: inherit; background: url(img/dragbar.png);"> 23 </li> 24 </ul> 25 <div class="boxc"> 26 <div class="nouser" id="nouser">请填写用户名</div> 27 <h3>用户登录</h3> 28 <div class="text_item"> 29 <input class="text" id="user" style="font-size: 20px; ime-mode: disabled;""placeholder="用户名"autocomplete="off"/> 30 </div> 31 32 <div class="text_item"> 33 <input class="text" id="password" style="font-size: 20px; ime-mode: disabled;""placeholder="密码"autocomplete="off"-placeholder="密码"/> 34 </div> 35 36 <div style="color: #999; 292px; overflow: hidden;position: relative; top: -3px;font-size: 14px;"> 37 <span style="float: left;"> 38 <font style="color: red;font-family: '宋体';clear:both ;float: left;">学生选择@stu.swpu.edu.cn</font> 39 </span> 40 <a href="/?q=resetpw" target="_self" style="float: right;">忘记密码</a> 41 </div> 42 <div class="btnb"> 43 <input class="text" style="widows: 100px;display: none;float: left;" type="text" placeholder="验证码" /> 44 <div style="display: none;z-index: 1000;"></div> 45 <input onclick="fnLogin()" style="float:right;background: url(img/login_btn.jpg);" class="btn" type="submit" value="登 录" /> 46 <div style="clear: both;"> 47 </div> 48 </div> 49 </div> 50 </div> 51 </body> 52 </html>
CSS
1 .h{ 2 width: 964px; 3 margin: 0 auto; 4 } 5 *{ 6 margin: 0; 7 padding: 0; 8 } 9 .t{ 10 height: 95px; 11 line-height: 90px; 12 background-color:#f5f5f5 ; 13 border-bottom-width: 1px; 14 border-bottom-style: solid; 15 border-bottom-color: #e5ecf0; 16 overflow:hidden; 17 } 18 .logo{ 19 padding-top: 15px; 20 float: left; 21 } 22 .help{ 23 float: right; 24 font-size: 14px; 25 font-weight: 700; 26 color: #787878; 27 text-decoration: none; 28 } 29 body{ 30 font-family: "微软雅黑",verdana,geneva,sans-serif; 31 font-size: 12px; 32 background: #fff; 33 } 34 .box{ 35 width: 376px; 36 position: absolute; 37 box-shadow: 0px 0px 5px rgba(0,0,0,0,4); 38 } 39 .c{ 40 width: 964px; 41 height: 460px; 42 margin: 20px auto 0 auto; 43 background: url(../img/backimg.png) no-repeat; 44 background-attachment: scroll; 45 background-repeat: no-repeat; 46 background-position-x: 0%; 47 background-position-y: 0%; 48 background-size: cover; 49 background-origin: padding-box; 50 background-clip: border-box; 51 background-color: transparent; 52 position: relative; 53 } 54 .tab li.current{ 55 background-attachment: scroll; 56 background-repeat: repeat; 57 background-size: auto; 58 background: #ff7e00; 59 } 60 .tab li.dragbar{ 61 width: 22px; 62 cursor: move; 63 overflow: hidden; 64 } 65 .tab li{ 66 height: 40px; 67 line-height: 40px; 68 float: left; 69 width: 354px; 70 text-align: center; 71 background: #333; 72 color: #fff; 73 font-size: 16px; 74 cursor: pointer; 75 } 76 .msg{ 77 position: absolute; 78 background: #cc3300; 79 color: #FFFFFF; 80 padding: 0 10px; 81 font-size: 14px; 82 } 83 ul{ 84 list-style-type: none; 85 list-style-position: outside; 86 list-style-image: none; 87 } 88 .tab{ 89 border-bottom: 3px solid rgba(255,126,0,0.8); 90 overflow: hidden; 91 } 92 .boxc{ 93 background: #FFFFFF; 94 padding: 20px 0 30px 42px; 95 } 96 .text{ 97 height: 36px; 98 line-height: 36px; 99 outline: none; 100 width: 280px; 101 border: 1px solid #c7c7c7; 102 background: #f3f3f3; 103 border-radius: 1px; 104 padding: 0 5px; 105 font-family: "微软雅黑"; 106 } 107 .text_item{ 108 height: 38px; 109 line-height: 38px; 110 width: 292px; 111 margin: 15px 0 30px 0; 112 } 113 .btnb{ 114 margin: 20px 0 0 0; 115 width: 292px; 116 position: relative; 117 } 118 .btn{ 119 height: 38px; 120 width: 142px; 121 border: none; 122 color: #fff; 123 font-weight: 400; 124 font-size:20px; 125 font-family: "微软雅黑"; 126 } 127 .nouser{ 128 position: absolute; 129 background: #CC3300; 130 color: #fff; 131 padding: 0 10px; 132 font-size: 14px; 133 height: 30px; 134 line-height: 30px; 135 left: 42px; 136 right: 42px; 137 text-align: center; 138 display: none; 139 }
JS
1 function fnLogin() 2 { 3 var uname=document.getElementById("user") 4 var password=document.getElementById("password") 5 if(uname.value.length==0) 6 { 7 document.getElementById("nouser").style.display = "block" 8 }else if(uname.value=="tom"&&password.value==123) 9 { 10 window.location="http://mail.swpu.edu.cn/"; 11 } 12 }
3.百度云地址
链接：https://pan.baidu.com/s/1PWZPsSm9Gi4hY0fRkbz-AA
提取码：4p9q
4.心得体会
这次作业主要是做了一个登录页面，利用HTML,CSS和JS结合来实现功能，最主要还是用JS来实现判断用户名密码和跳转另一个页面，总得来说，还是比较简单，没有太大的问题，就是需要更加熟练运用这些东西来实现更多的功能。