登录界面
（1）图示：
（2）代码：
1.电子邮件.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>西南石油大学电子邮件系统</title>
<link type="text/css" rel="stylesheet" href="email.css"/>
</head>
<body id="bdy" onchange="">
<div class="Center">
<div class="ContentDiv">
<div class="hd">
<div style="float: left;margin: 0px;border: 0px;padding-top: 15px;">
<img src="http://mail.swpu.edu.cn/tpl/login/user/images/login_logo.png" />
</div>
<div style="float:right;border: 0px;margin: 0px;line-height: 77px;">
<a href="" class="help">
帮助
</a>
</div>
</div>
</div>
</div>
<div class="Center">
<div class="c">
<div id="box">
<div style="height: 40px;background: #ff7e00;">
<div style="float: left;width: 354px;height: 40px;cursor: pointer;">
<p style="margin:0px;line-height:40px;text-align: center;color: white;font-size: 16px;font-family: '微软雅黑';">
账户登录
</p>
</div>
<span style="float: right;width: 22px;height: 40px;cursor: move;background: url(http://mail.swpu.edu.cn/tpl/login/user/images/dragbar.png);">
</span>
</div>
<div style="height: 249px;width:334px;margin:0px;border: 0px;padding: 20px 0px 30px 42px;background-color: white;">
<h3 style="font-family: '微软雅黑';margin: 0px;border: 0px;font-size: 16px;cursor: default;">用户登录</h3>
<form action="">
<div style="width:292px;height: 38px;margin: 15px auto 30px 0px;">
<input type="text" class="text" placeholder="用户名" onfocus="this.className='text_f'" onblur="this.className='text'"/>
</div>
<div style="width:292px;height: 38px;margin: 15px auto 30px 0px;">
<input type="password" class="text" placeholder="密 码" onfocus="this.className='text_f'" onblur="this.className='text'"/>
</div>
<div style="width: 292px;height: 19px;">
<nobr style="margin: 0px;border: 0px;color: red;font-size: 14px;font-family: '宋体';">
学生选择@stu.swpu.edu.cn
</nobr>
<span style="float: right;">
<a href="" class="a1">
忘记密码
</a>
</span>
</div>
<div style="width: 292px;height: 38px;margin: 20px 0px auto 0px;">
<input type="submit" value="登录" class="submitstyle"/>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="Center">
<div class="b">
西南石油大学
</div>
</div>
</body>
</html>
2.
email.css
@charset "utf-8";
body{
margin: 0px;
border: 0px;
padding: 0px;
width: 100%;
height: auto;
min-width: 964px;
}
.Center{
width: 100%;
margin: 0 auto;
padding: 0px;
border: 0px;
height: auto;
align-content: center;
}
.ContentDiv{
height: auto;
width: 100%;
background: #f5f5f5;
border-bottom: 1px solid #e5ecf0;
overflow: hidden;
margin: 0px;
padding: 0px;
border: 0px;
}
.hd{
width: 964px;
height: 76px;
margin: 0 auto;
border: 0px;
}
.help{
float: right;
font-size: 14px;
font-weight: 700;
color: #787878;
text-decoration: none;
margin: 0;
padding: 0;
}
.c {
width: 964px;
height: 460px;
margin: 20px auto 0 auto;
background: url(http://mail.swpu.edu.cn/tpl/login/user/images/login_bg_02.jpg) no-repeat;
position: relative;
}
#box{
right: 60px;
top: 60px;
left: auto;
width: 376px;
height: 342px;
position: absolute;
margin: 0px;
border: 0px;
display: block;
z-index: 999;
}
.text {
height: 36px;
line-height: 36px;
outline: none;
font-size: 20px;
width: 280px;
border: 1px solid #c7c7c7;
background: #f3f3f3;
border-radius: 2px;
padding: 0 5px;
font-family: "微软雅黑";
margin: 0px;
}
.text_f{
height: 36px;
line-height: 36px;
outline: none;
font-size: 20px;
width: 280px;
border: 1px solid #0167ff;
background: white;
border-radius: 2px;
padding: 0 5px;
font-family: "微软雅黑";
margin: 0px;
}
.a1{
color: grey;
text-decoration: none;
font-size: 14px;
font-family: "微软雅黑";
}
.a1:hover{
color: black;
text-decoration: underline;
}
.submitstyle{
float: right;
margin: 0;
padding: 0;
height: 38px;
width: 142px;
border: none;
color: #fff;
font-weight: 400;
background: url(http://mail.swpu.edu.cn/tpl/login/user/images/login_btn.jpg) 0 0;
font-size: 20px;
font-family: "微软雅黑";
-webkit-appearance: push-button;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
white-space: pre;
}
.submitstyle:hover{
background: dodgerblue;
}
.b {
height: 70px;
margin: 0 auto;
border-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;
color: #999;
font-size: 14px;
font-family: "微软雅黑";
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
