一、地址
链接: https://pan.baidu.com/s/1r3S2h8nreWUNW4WV5mSyWw 提取码: py2c 复制这段内容后打开百度网盘手机App,操作更方便哦
二、代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>西南石油大学电子邮件系统</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript">
function checkLoginForm() {
var un = document.getElementById("username");
var pw = document.getElementById("password");
if(un.value == "" || pw.value == "") {
/*更换class*/
var hh = document.getElementById("hd");
hh.className="msg";
hh.innerText = "用户名或密码不能为空";
return false;
}else if (un.value=="tom" && pw.value==123) {
window.location.href="http://mail.swpu.edu.cn/";
return false;
}else{
/*更换class*/
var hh = document.getElementById("hd");
hh.className="msg";
hh.innerText = "用户名或密码错误";
return false;
}
}
</script>
</head>
<body>
<div class="top">
<div class="r1">
<div class="r2">
<div class="logo"></div>
</div>
<a href="" target="" class="help">帮助</a>
</div>
</div>
<div class="content">
<div class="loginBar">
<div class="box">
<div class="tab">
账号登录
<div class="dragbar"></div>
</div>
</div>
<div class="boxc">
<div style="height: 10px;"></div>
<div style="margin-left: 42px; width: 270px; height: 30px;">
<div class="hh" id="hd">用户登录</div>
</div>
<input type="text" class="text" id="username" style="ime-mode: disabled" _autocomplete="off" placeholder="用户名" />
<form method="post" οnsubmit="return checkLoginForm()">
<input type="password" class="text" id="password" _autocomplete="off" placeholder="密码" />
<div style="height: 10px;"></div>
<div class="bl">
<span style="float: left;"> <font style="color: red; font-family: 宋体; clear: both;">学生选择@stu.swpu.edu.cn</font>
</span> <span style="float: right;"> <a href="" style="outline: none; color: #999;">忘记密码</a>
</span>
</div>
<input type="submit" class="btn" value="登 录" style="background: url(img/login_btn.jpg)" />
</form>
</div>
</div>
</div>
<div class="bottom">西南石油大学</div>
</body>
</html>
css
body{text-align:center}
.top{
height:76px;
line-height:90px;
background:#f5f5f5;
border-bottom:1px solid #e5ecf0;
overflow:hidden;
}
.r1{
width:60%;
height:76px;
background:#f5f5f5;
float:center;
margin:0 auto;
position:relative;
}
.r2{
position:absolute;
bottom: 15px;
left:0px;
height:45px;
width:295px;
background:#f5f5f5;
}
.logo{
height:45px;
width:295px;
background:url(../img/login_logo.png) no-repeat;
}
.help{
float:right;
font-size:14px;
font-weight:700;
color:#787878;
text-decoration:none;
}
.content{
width:964px;
height:460px;
margin:20px auto 0 auto;
background:url(../img/login_bg.jpg) no-repeat;
position:relative
}
.bottom{
height:70px;
order-top:1px solid #fff;
border-radius:0 0 5px 5px;
background:#f7f7f7;
clear:both;
width:964px;
margin:0 auto;
text-align:center;
line-height:70px;
font-weight:500;
font-size:12px;
color:#999;
}
.loginBar{
right:60px;
top:60px;
bottom:100px;
width:376px;
background:rgba(0,0,0,0.1);
position:absolute;
}
.box{
width:100%;
box-shadow:0 0 5px rgba(0,0,0,0.4);
right:60px;
top:60px;
}
.tab{
border-bottom:3px solid #ff7e00;
border-bottom:3px solid rgba(255,126,0,0.8);
background:rgba(255,126,0,0.8);
height:40px;
overflow:hidden;
text-align:center;
line-height:45px;
font-weight:400;
font-size:15px;
color:white;
}
.dragbar{
width:22px;
background:url('../img/dragbar.png');
cursor:move;
height:100%;
float:right;
}
.boxc{
background:#fff;
width:100%;
height:100%;
}
.hh{
font-size:15px;
font-weight:700;
text-align:left;
}
.text{
height:36px;
line-height:36px;
utline:none;
font-size:20px;
width:280px;
border:1px solid #c7c7c7;
background:#f3f3f3;
border-radius:2px;
padding:0 5px;
font-family:"微软雅黑";
margin-top:10px;
}
.btn{
height:38px;
width:142px;
border:none;
font-size:14px;
color:#fff;
font-weight:400;
font-size:20px;
font-family:"微软雅黑";
float:right;
margin-top:15px;
margin-right:45px;
}
.bl{
color:#999;
width:292px;
overflow:hidden;
position:relative;
top:-3px; font-size:14px;
margin-left: 40px;
margin-top:25px;
}
.msg{
width:270px;
background:#cc3300;
color:#fff;
padding:0 10px;
font-size:14px;
height:30px;
line-height:30px;
text-align:center;
}
三、效果截图
登录界面
当用户名或密码为空
当用户名密码错误
当用户名密码正确,跳转到指定页面