代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>教务系统页面</title>
<style>
.box-head,ox-foot{
height:100px;
width: 1000px;
display: flex;
color: rgb(225, 227, 228);
margin-left: 200px;
margin-top: 50px;
margin-right: 200px;
margin-bottom: 50px;
}
.box-head>img{
width: 100px;
height: 100px;
}
.alt{
align-items: center;
padding-top: 10px;
color: rgb(237, 231, 231);
}
.box-body{
display: flex;
height: 500px;
width: 1100px;
background-color: aliceblue;
float: left;
}
.a>img{
height: 500px;
width: 700px;
}
.b{
background-color: rgba(238, 236, 233, 0.892);
width: 70%;
height: 500px;
float: left;
}
.box-foot{
height: 100px;
width: 1000px;
align-items: center;
}
</style>
</head>
<body>
<div class="box-head">
<img src="../../css/img/17209773_1.jpg" alt="">
<div class="alt">延安大学教务管理信息服务平台</div>
</div>
<div class="box-body">
<div class="a">
<img src="../../css/img/dlycssz_cxDlycsszZp.html" alt="">
</div>
<div class="b">
<h5 style="margin-bottom: 20px; padding-left: 15px;">用户登录</h5>
<div class="userandpass">
<table style="border-radius: 5px;border-color: rgb(164, 163, 163);
background-color: rgb(255, 255, 255);"
border="1px">
<tr>
<td style="border: 0; width: 55px;">
<div style="margin-right: 5px;padding: 4px 12px 4px 15px;
border-right-style:groove; border-right-color: rgb(250, 248, 248);">
<img src="../5.css布局/联想截图_20240425205526.png">
</div>
</td>
<td style="border: 0;padding: 1px 3px 1px 3px;">
<div class="cart">
<input type="text" name="username" value="" placeholder="用户名"
style="width: 250px; height: 20px;border-width: 0;
background-color: rgb(255, 255, 255);">
</div>
</td>
</tr>
</table>
<table style="border-radius: 5px;border-color: rgb(164, 163, 163);
margin-top: 10px; background-color: rgb(255, 255, 255);"
border="1px" >
<tr>
<td style="border: 0; width: 55px;">
<div style="margin-right: 5px;padding: 4px 12px 4px 15px;
border-right-style:groove; border-right-color: rgb(250, 248, 248);">
<img src="../5.css布局/联想截图_20240425205538.png">
</div>
</td>
<td style="border: 0;padding: 1px 3px 1px 3px;">
<div class="cart">
<input type="password" name="password" value="" placeholder="密码"
style="width: 250px; height: 20px;border-width: 0;
background-color: rgb(255, 255, 255);">
</div>
</td>
</tr>
</table>
<div class="cart" style="font-size: small; color: #337ab7;
margin-left: 250px; margin-top: 15px;">
<p style="width: 80px;">忘记密码了?</p>
</div>
<form action="http://jwglxt.yau.edu.cn/jwglxt/xtgl/login_slogin.html" method="post">
<button type="submit" style="background-color: #337ab7;
color: #fff;border-radius: 5px;width: 325px;height: 30px;
border: 0;
"value="登录" class="cart">登录</button>
</form>
<div style="color: #a94442;background-color: #f2dede;border-color: ebccd1;
font-size: small;padding: 15px;margin-top: 10px;
border-radius: 5px;">
“圣地教务”公众号非任何学校官方公众号,请立即取消关注,谨防受骗或个人信息泄露
<br>
登录教务管理系统途径:
<br>
1.访问http://jwglxt.yau.edu.cn/jwglxt
<br>
2.登录学校网办大厅后选择教务系统登录
<br>
</div>
<div class="bjdl" style="margin-top: 30px;">
<img src="../5.css布局/联想截图_20240425205507.png" height="100px" alt="" style="float: left;
margin-right: 10px;">
<span style="color: #f3f1f1;font-size: small;">
<br>
用手机扫一扫,
<br>
安全、便捷登录
</span>
</div>
</div>
</div>
</div>
<div class="box-foot" style="text-align: center; color: rgb(42, 121, 190); font: 10px microsoft YaHai;" ><p style="display: inline-block;margin-top: 10px;">版权所有:延安大学教务处 电话:0911-2650133 传真:0911-2650131 电子信箱:ydjwc@yau.edu.cn 版本V8.3.14</p></div>
</body>
</html>
结果