作业：教务系统页面
成果展示：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>教务系统</title>
<style>
.edu_top{
display: flex;
width: 1104px;
height: 50px;
margin-left: 250px;
margin-top: 30px;
margin-right: 360px;
margin-bottom: 10px;
color: #1069a4;
font-size: 24px;
}
.edu_top img{
width: 50px;
height: 50px;
margin-right: 9px;
}
.font{
align-items: center;
padding-top: 7px;
}
.edu_mid{
display: flex;
width:1160px;
height: 510px;
background-color: #ededed79;
float: left;
margin-top: 30px;
margin-left: 250px;
border: 4px solid #ededed;
margin-bottom: 20px;
}
.edu_mid img{
width: 750px;
height: 420px;
}
.edu_doc{
margin-left: 20px;
width: 380px;
height: 500px;
background-color:rgba(255, 255, 255, 0.913);
}
.userandpass img{
width: 16px;
height: 16px;
}
.userandpass{
margin-left: 30px;
margin-right: 25px;
border-radius: 5px;
}
.bjdl img{
width: 90px;
height: 90px;
}
</style>
</head>
<body>
<div class = "edu_top" >
<img src="../作业/img2/延安大学校徽2.png">
<div class="font">延安大学教学管理信息服务平台</div>
</div>
<div class="edu_mid">
<img src="../作业/img2/延安大学教务系统图片.png" alt="">
<div class="edu_doc">
<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="../作业/img2/用户头像.png">
</div>
</td>
<td style="border: 0;padding: 1px 3px 1px 3px;">
<div>
<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="../作业/img2/密码图象.png">
</div>
</td>
<td style="border: 0;padding: 1px 3px 1px 3px;">
<div>
<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 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="登录">登录</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="../作业/img2/登录二维码.png" alt="" style="float: left;
margin-right: 10px;">
<span style="color: #333;font-size: small;">
<br>
用手机扫一扫,
<br>
安全、便捷登录
</span>
</div>
</div>
</div>
</div>
<div class="edu_end" style="text-align: center;
color: #8099af;font: normal 12px microsoft YaHei;">
<p style="display: inline-block;margin-top: 0px;">版权所有：延安大学教务处 电话：0911-2650133 传真：0911-2650131 电子信箱：ydjwc@yau.edu.cn 版本V8.3.14</p>
</div>
</body>
</html>解析：
主体框架使用快就元素 div 包裹，并且使用元素属性转换将块级元素转换成行内样式并保留。
top部分：
首先是 edu_top部分
<div class = "edu_top" >
<img src="../作业/img2/延安大学校徽2.png">
<div class="font">延安大学教学管理信息服务平台</div>
</div>
在头head中使用<style>定义文档样式信息，即css（层叠式样式表），允许开发者在html文件中嵌入样式信息，以控制html元素的外观和布局。
.edu_top{
display: flex;
width: 1104px;
height: 50px;
margin-left: 250px;
margin-top: 30px;
margin-right: 360px;
margin-bottom: 10px;
color: #1069a4;
font-size: 24px;
}
.edu_top img{
width: 50px;
height: 50px;
margin-right: 9px;
}mid部分：
不断修改每个元素块之间的距离关系，并使用css渲染，使界面美观。
.edu_mid{
display: flex;
width:1160px;
height: 510px;
background-color: #ededed79;
float: left;
margin-top: 30px;
margin-left: 250px;
border: 4px solid #ededed;
margin-bottom: 20px;
}
.edu_mid img{
width: 750px;
height: 420px;
}
.edu_doc{
margin-left: 20px;
width: 380px;
height: 500px;
background-color:rgba(255, 255, 255, 0.913);
}
.userandpass img{
width: 16px;
height: 16px;
}
.userandpass{
margin-left: 30px;
margin-right: 25px;
border-radius: 5px;
}
.bjdl img{
width: 90px;
height: 90px;
}
<div class="edu_mid">
<img src="../作业/img2/延安大学教务系统图片.png" alt="">
<div class="edu_doc">
<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="../作业/img2/用户头像.png">
</div>
</td>
<td style="border: 0;padding: 1px 3px 1px 3px;">
<div>
<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="../作业/img2/密码图象.png">
</div>
</td>
<td style="border: 0;padding: 1px 3px 1px 3px;">
<div>
<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 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="登录">登录</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="../作业/img2/登录二维码.png" alt="" style="float: left;
margin-right: 10px;">
<span style="color: #333;font-size: small;">
<br>
用手机扫一扫,
<br>
安全、便捷登录
</span>
</div>
</div>
</div>
</div>代码部分不断穿插各级元素的使用，调整小块元素的大小和布局
end部分：
<div class="edu_end" style="text-align: center;
color: #8099af;font: normal 12px microsoft YaHei;">
<p style="display: inline-block;margin-top: 0px;">版权所有：延安大学教务处 电话：0911-2650133 传真：0911-2650131 电子信箱：ydjwc@yau.edu.cn 版本V8.3.14</p>
</div>直接在块级元素内使用style，使前期修改简单，适合调整界面。
