<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>校园系统门户</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.navbar {
background-color: #555;
color: #fff;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: #fff;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar li a:hover {
background-color: #111;
}
.sidebar {
width: 200px;
height: 100vh;
background-color: #323232;
color: #fff;
position: fixed;
right: 0; /* 侧边栏靠右显示 */
top: 20;
overflow-x: hidden;
padding-top: 20px;
}
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 18px;
color: #fff;
display: block;
}
.sidebar a:hover {
background-color: #111;
}
.content {
padding: 20px;
}
.footer {
background-color: #fffae8;
color: #000000;
text-align: center;
padding: 10px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div class="header">
<h1>校园系统门户</h1>
</div>
<ul class="navbar">
<li><a href="#">首页</a></li>
<li><a href="course_management.html">学校介绍</a></li>
<li><a href="grade_management.html">课程管理</a></li>
<li><a href="personal_info.html">成绩管理</a></li>
<li><a href="personal_info.html">个人信息</a></li>
<li><a href="personal_info.html">联系我们</a></li>
<!-- 添加更多二级学院链接 -->
</ul>
<div class="sidebar">
<a href="computer_science.html">信息工程学院</a>
<a href="Institute of foreign Languages.html">外语学院</a>
<!-- Add more college links here -->
</div>
<div class="content">
<h2>欢迎来到校园系统门户</h2>
<p>这里是校园系统的主界面,您可以在这里进行课程管理、成绩查询等操作。</p>
</div>
<div class="footer">
<p>© 2023 校园系统 版权所有</p>
</div>
</body>
</html>