标签：mamicode cti password mit image center script play enter
css代码如下：
<style type="text/css"> #page{ background-color:white; width:auto;height:600px; border:1px; margin:auto; } #page_head{ background-color:#f5f5f5; height:60px } #page_body{ background-color:yellow; height:460px; width:964px; margin:auto; background-image:url(img/login_bg_02.jpg) } #page_foot{ background-color:#f5f5f5; height:70px ;width:964px; margin:auto; padding-top:20px; text-align: center; } #logo{ margin-left:100px; } #login{ margin-top:60px; margin-left:550px; width: 380px;height:350px; position: absolute; background-color:white; } #loginTitle{ width:380px;height:40px;padding-top:10px; background-color:orange; text-align: center;color: #fff; font-size: 16px; } #tip{display:none; height:40px;width: 380px; background-color: #cc3300;color:white; text-align: center;line-height: 50px; } .textitem1{ position: absolute; height:40px; left: 30px; top: 100px; } .textitem2{ position: absolute; height:40px; left: 30px; top: 160px; } .btn{ height: 38px; width: 100px; border: none; color: #fff; font-weight: 400; font-size:20px; font-family: "微软雅黑";} </style>
HTML代码如下：
<body> <div id="page" > <div id="page_head"> <div id="logo"> <img src="img\login_logo.png"/> </div> </div> <div id="page_body" > <div id="login"> <div id="loginTitle"><b>账号登录</b></div> <div id="tip">请正确填写账号密码</div> <div class="textitem1"> <input style="width: 320px;height: 30px" id="input_user" type="text" name="zh" placeholder="用户名"> </div> <div class="textitem2"> <input style="width: 320px;height: 30px" id="input_password" type="text" name="zh" placeholder="密码 "> </div> <div style="position: absolute; left:30px; top:220px;width: 320px"> <span style="color:red;float:left">学生选择@stu.swpu.edu.cn</span> <a href="#" style="float: right;">忘记密码</a> </div> <div style="position: absolute; left:30px; top:260px;width: 320px"> <input onclick="fnLogin()" style="float:right;background:url(img/login_btn.jpg);" class="btn" type="submit" value="登 录" /> </div> </div> </div> <div id="page_foot"> 西南石油大学 </div> </div> </body>
js静态验证代码如下：
<script> function fnLogin() { var uname=document.getElementById("input_user") var password=document.getElementById("input_password") if(uname.value!="tom"||password.value!=123) { document.getElementById("tip").style.display = "block" }else if(uname.value=="tom"&&password.value==123) { window.location="http://mail.swpu.edu.cn/"; } } </script>
运行结果
账号密错误时，有提示：
账号密码正确时，跳转到http://mail.swpu.edu.cn/
链接：https://pan.baidu.com/s/1tv6BvDWk9uMGAQYdIe3BPQ
提取码：ln94
复制这段内容后打开百度网盘手机App，操作更方便哦
标签：mamicode cti password mit image center script play enter
原文地址：https://www.cnblogs.com/fengjianbk/p/10596379.html
