以下为界面图:
<!Doctype html> <html> <head> <title>西南石油大学电子邮件系统登录界面</title> <script> function fnLogin() { var uname=document.getElementById("input_user"); var password=document.getElementById("input_password") if(uname.value.length==0) { document.getElementById("tip").style.display = "block" } else if(uname.value=="tom"&&password.value=123) { window.location="http://mail.swpu.edu.cn/"; } } </script> <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> </head> <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> </html>
以上为代码。
以下为百度云盘链接:
链接:https://pan.baidu.com/s/1igqmmZgHmD26_0mQLlJPKg
提取码:7akd
复制这段内容后打开百度网盘手机App,操作更方便哦