最终效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>西南石油大学邮件系统</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="top">
<img alt="西南石油大学电子邮件系统" src="data:images/login_logo.png" style="padding-left:400px;padding-top:25px">
<p class="p1"><a href="#" class="a1"><b>帮助</b></a></p>
</div>
<div class="main">
<div class="login1">
<div class="login2">账号登录
<a href="#"><img alt="拖动" src="data:images/dragbar.png" style="float:right"></a>
</div>
<div class="login3"><b style="padding-left:50px;line-height:70px;">用户登录</b><br>
<input type="text" placeholder="用户名" class="input"><br>
<input type="password" placeholder="密码" class="input">
<small style="color:red;padding-left:50px;">学生选择@stu.swpu.edu.cn</small>
<a href="#" class="a2">忘记密码</a>
<button class="buttom1">登录</button>
</div>
</div>
</div>
<div style="width:100%;height:50px;color:gray;text-align:center;margin:10px;"> 西南石油大学</div>
</body>
</html>
main.html
@CHARSET "UTF-8";
.top{
width:100%;
height:100px;
background-color:#F5F5F5;
display:line;
}
.p1{
display:inline;
float:right;
padding-top:20px;
padding-right:300px;
}
.main{
width:964px;
height:460px;
background-image:url(images/login_bg_02.jpg);
margin-top:20px;
margin-left:280px;
}
.login1{
width:380px;
height:350px;
float:right;
margin-top:50px;
margin-right:50px;
}
.login2{
width:380px;
height:40px;
background-color:rgba(250,150,50,1);
text-align:center;
line-height:40px;
color:white;
}
.login3{
width:380px;
height:310px;
background-color:white;
}
.input{
margin-left:50px;
margin-bottom:30px;
width:280px;
height:30px;
}
.a1{
text-decoration:none;
color:#787878;
}
.a2{
padding-left:50px;
color:gray;
text-decoration:none;
}
.buttom1{
width:150px;
height:40px;
background-color:#468CD2;
float:right;
margin-right:45px;
margin-top:25px;
color:white;
}
style.css
代码结构图：
链接：https://pan.baidu.com/s/1-mZ5pyWH4bmdvKN8uISWiw
提取码：e2k0
复制这段内容后打开百度网盘手机App，操作更方便哦