游戏导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业一</title>
<style>
.body{
width: 800px;
height: 25px;
background-color: darkblue;
border-radius: 5%;
box-shadow: 10px 10px 10px gray;
}
li{
display: inline-block;
color: aliceblue;
box-shadow: 10px 10px 10px gray;
}
li:hover{
background-color: red;
}
.body{
text-align: center;
}
</style>
</head>
<body>
<div class="body">
<div class="game">
<ul>
<li>游戏1</li>
<li>游戏2</li>
<li>游戏3</li>
<li>游戏4</li>
<li>游戏5</li>
<li>游戏6</li>
<li>游戏7</li>
<li>游戏8</li>
<li>游戏9</li>
</ul>
</div>
</div>
</body>
</html>
学校官网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.new,.d{
float: left;
}
.head{
background-color: blue;
}
.top{
text-align: right;
}
a{
color: aliceblue;
}
.search{
text-align: right;
}
.n{
width: 100%;
height: 50px;
}
.h{
width: 12%;
color: black;
display: inline-block;
list-style-type: none;
text-align: center;
}
.title{
text-align: center;
}
.notice{
border-bottom: 1px solid gray;
}
.download{
width: 365px;
height: 279px;
float: left;
list-style-type: none;
box-shadow: 10px 10px 10px gray;
border: gray;
}
.download-1{
text-align: left;
}
</style>
</head>
<!-- 头部 -->
<div class="head" >
<div class="container">
<div class="top">
<a href="">学院首页</a>
<span>|</span>
<a href="">加入收藏</a>
</div>
<div class="search">
<form action="#">
<input type="text" placeholder="SEARCH">
</form>
</div>
<img src="./image.png" alt="" >
</div>
</div>
<!-- 中间导航 -->
<div class="n">
<div>
<ul>
<li class="h">
<img src="https://swxy.csuft.edu.cn/images/home.png" alt="">
</li>
<li class="h">规章制度</li>
<li class="h">通知公告</li>
<li class="h">新闻动态</li>
<li class="h">质量监控</li>
<li class="h">教务系统</li>
<li class="h">教学改革</li>
<li class="h">教学简报</li>
</ul>
</div>
</div>
<!-- 中间 -->
<div>
<!-- 图片 -->
<div class="picture">
<img src="../作业二/image.png" alt="">
</div>
<!-- 下文 -->
<div class="title">
<!-- 状态栏一 -->
<div class="a">
<div class="new">
<h2>新闻动态</h2>
<h3>学院2024年教师教学创新大赛产教结合院级赛道决赛顺利进行</h3>
</div>
<div class="d">
<h2>通知公告</h2>
<ul>
<li class="notice">关于中南林业科技大学涉外学院2024年专升...</li>
<li class="notice">院教发[2024]7号关于做好2024届毕业论...</li>
<li class="notice">院教发[2024]8号关于2024届毕业设计</li>
<li class="notice">关于开展2024年院级课程思政教学竞赛的通知</li>
<li class="notice">2024年“专升本”考试准考证打印及考试须知</li>
<li class="notice">中南林业科技大学涉外学院2024年专升本免...</li>
<li class="notice">关于2024年春季学期重修安排的通知</li>
<li class="notice">中南林业科技大学涉外学院2024年专升本免...</li>
<li class="notice">中南林业科技大学涉外学院2024年专升本免...</li>
</div>
<!-- 状态栏二 -->
<div class="b">
<h2 class="download-1">下载中心</h2>
<ul class="download">
<li>教务处邮箱
<p>2020-12-23</p>
</li>
<li>2023年6月全国大学生四六级成绩
<p>2023-08-24</p>
</li>
<li>中南林业科技大学涉外学院免修课程申请表
<p>2023-05-18</p>
</li>
<li>2022年12月大学英语四六级成绩
<p>2023-02-23</p>
</li>
</ul>
</div>
</div>
<!-- 尾部 -->
<div></div>
</body>
</html>
登录页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="https://www.baidu.com">
<table width="1280px" hieght="600px" >
<tr height="70px">
<td ><img src="./1717141524945.jpg" cellpadding="0px" align="bottom"></td>
<td></td>
</tr>
<tr height="210px" bgcolor="gray">
<td><img src="./1717141289678.jpg" width="600px" height="296px" cellpadding="0px" align="right"></td>
<td width="600px" align="center">
用户名: <input type="text" name="username" id="username" value=""><br>
密 码: <input type="password" name="password" id="password"><br>
<button type="submit">sign in</button>
<button type="reset">reset</button>
</td>
</tr>
<tr height="10px">
<td>湖南强智科技发展有限公司 版权所有</td>
<td align="right">隐私声明|设为首页</td>
</tr>
</table>
</form>
</body>
</html>
教务系统页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.picture{
height: 75px;
margin-left: 100px;
}
.head{
background-color: cornflowerblue;
width: 100%;
height: 41px;
}
.head-1{
list-style-type: none;
margin-left: 200px;
}
li{
display: inline-block;
width: 96px;
height: 41px;
text-align: center;
}
.foot{
text-align: center;
font-size: 12px;
}
.table{
margin: auto;
}
</style>
</head>
<body>
<div class="picture"><img src="./d0cc8c24fde13914f2cff63f385ebe9.png" alt=""></div>
<div class="head">
<div>
<ul class="head-1">
<li class="head-2"><img src="https://swxy.csuft.edu.cn/images/home.png" alt=""></li>
<li class="head-2">我的桌面</li>
<li class="head-2">学籍成绩</li>
<li class="head-2">培养管理</li>
<li class="head-2">考试报名</li>
<li class="head-2">教学评价</li>
</ul>
</div>
</div>
<div>
<table class="table" border="1px" width="910px" height="450">
<tr>
<td colspan="2" rowspan="2" width="265px" height="287px" bgcolor="#09619F" align="center"><img src="./f6ee2f9bf1bf38b127ac5b0939ecbd0.png" width="72px" height="64px" >
<span>姓名:</span> <p>个人信息 学号:</p>
</td>
<!-- <td></td> -->
<td rowspan="2" bgcolor="#4fb5c7" align="center"><img src="./847a0c26cca9af691a852d1f74d4171.png" >
<p>选课中心</p>
</td>
<td bgcolor="#1978d8" align="center"><img src="./903b88371f735e97b1ea8dd2db12bdc.png" >
<p>学生评教</p>
</td>
<td colspan="2" bgcolor="db6987"><img src="./5845546d069430cf2934a39d6dd37d8.png" >
<p>已收留言</p>
</td>
<!-- <td></td> -->
</tr>
<tr>
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<td bgcolor="#90a8e3" align="center"><img src="./b89b47c3fa84b9d9527f00aa1f447d7.png" alt="">
<p>培养方案</p>
</td>
<td colspan="2" bgcolor="#8e7aaa"><img src="./f8ffa8ae674df9adc4a10b483f5703b.png" >
<p>已收公告</p>
</td>
<!-- <td></td> -->
</tr>
<tr>
<td bgcolor="#187d9a" align="center"><img src="c:\Users\zhaoxiaofeng\Documents\WeChat Files\wxid_s4c90n0am9kx22\FileStorage\Temp\a6a832bfa364574c8b53f5e7e749687.png" alt="">
<p>课表成绩查询</p>
</td>
<td bgcolor="#a0cf41" align="center"><img src="c:\Users\zhaoxiaofeng\Documents\WeChat Files\wxid_s4c90n0am9kx22\FileStorage\Temp\70b7ccc4b10cc3efe9b826f687aac61.png" alt="">
<p>教学周历</p>
</td>
<td bgcolor="#eaaf76" align="center"><img src="c:\Users\zhaoxiaofeng\Documents\WeChat Files\wxid_s4c90n0am9kx22\FileStorage\Temp\fcf690819e0bfc99d33995cb45947ee.png" alt="">
<p>授课计划查询</p>
</td>
<td bgcolor="88bad9" align="center"><img src="c:\Users\zhaoxiaofeng\Documents\WeChat Files\wxid_s4c90n0am9kx22\FileStorage\Temp\3086602c743acc9f8af75fec70b4892.png" alt="">
<p>未获得学分成绩查询</p>
</td>
<td bgcolor="b69ccc" align="center"><img src="c:\Users\zhaoxiaofeng\Documents\WeChat Files\wxid_s4c90n0am9kx22\FileStorage\Temp\f76c5ac8191a6dca13b65d777f179b5.png" alt="">
<p>学籍卡片</p>
</td>
<td bgcolor="#09619F" align="center"><img src="c:\Users\zhaoxiaofeng\Documents\WeChat Files\wxid_s4c90n0am9kx22\FileStorage\Temp\c01caafe4ad19121868a81973f9d9b0.png" alt="">
<p>修改密码</p>
</td>
</tr>
</table>
<div class="foot">Copyright (C) 湖南强智科技发展有限公司 All Rights Reserved 湘ICP 备12010071号</div>
</div>
</body>
</html>