学校官网
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嘻嘻嘻大学质量管理与评估中心</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "微软雅黑", sans-serif;
}
/* 顶部栏 */
.header {
background-color: #0f3470;
color: #fff;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
}
.logo img {
width: 50px;
height: 50px;
}
.logo-text h1 {
font-size: 20px;
font-weight: bold;
}
.logo-text p {
font-size: 12px;
}
.search-box {
display: flex;
align-items: center;
gap: 5px;
}
.search-box input {
width: 150px;
padding: 5px;
border: none;
border-radius: 3px;
}
.search-box button {
background-color: #fff;
color: #0f3470;
border: none;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
}
/* 导航菜单（含下拉） */
.nav {
background-color: #0f3470;
}
.nav > ul {
display: flex;
list-style: none;
padding: 0 20px;
}
.nav > ul > li {
position: relative;
margin-right: 40px;
padding: 10px 0;
}
.nav a {
color: #fff;
text-decoration: none;
font-size: 14px;
padding: 10px 0;
}
/* 下拉菜单 */
.nav .dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #0f3470;
min-width: 120px;
list-style: none;
padding: 10px 0;
z-index: 999;
}
.nav > ul > li:hover .dropdown {
display: block;
}
.nav .dropdown li {
padding: 5px 15px;
}
.nav .dropdown li:hover {
background-color: #1a4a99;
}
/* 内容区域 */
.content {
padding: 20px;
display: flex;
gap: 20px;
}
.content-left {
flex: 1;
}
.content-left img {
width: 100%;
height: 200px;
object-fit: cover;
}
.content-right {
flex: 2;
display: flex;
gap: 40px;
}
.section {
flex: 1;
}
.section-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
border-bottom: 2px solid #0f3470;
padding-bottom: 5px;
}
.section-title h3 {
font-size: 16px;
color: #0f3470;
}
.section-title a {
font-size: 12px;
color: #666;
text-decoration: none;
}
.section-list {
list-style: none;
}
.section-list li {
margin-bottom: 8px;
font-size: 14px;
}
.section-list a {
color: #333;
text-decoration: none;
}
.section-list span {
float: right;
color: #999;
font-size: 12px;
}
/* 政策文件等区域 */
.mid-content {
padding: 0 20px 20px;
display: flex;
gap: 40px;
}
.mid-section {
flex: 1;
}
/* 友情链接 */
.link-section {
flex: 1;
}
.link-list {
list-style: none;
}
.link-list li {
margin-bottom: 8px;
}
.link-list a {
display: block;
background-color: #0f3470;
color: #fff;
padding: 8px 10px;
text-decoration: none;
font-size: 14px;
}
.link-list a:hover {
background-color: #1a4a99;
}
/* 活动图片区域 */
.activity {
padding: 0 20px 20px;
}
.activity-title {
border-bottom: 2px solid #0f3470;
padding-bottom: 5px;
margin-bottom: 10px;
}
.activity-title h3 {
font-size: 16px;
color: #0f3470;
}
.activity-imgs {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.activity-imgs img {
width: 180px;
height: 120px;
object-fit: cover;
}
/* 页脚 */
.footer {
background-color: #333;
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-logo {
display: flex;
align-items: center;
gap: 10px;
}
.footer-logo img {
width: 60px;
height: 60px;
}
.footer-info p {
font-size: 12px;
margin-bottom: 5px;
}
.footer-links {
display: flex;
gap: 20px;
}
.footer-links a {
color: #fff;
text-decoration: none;
font-size: 12px;
}
</style>
</head>
<body>
<!-- 顶部栏 -->
<div class="header">
<div class="logo">
<img src="../img/1.png" alt="校徽"> <!-- 替换为实际校徽图片 -->
<div class="logo-text">
<h1>嘻嘻嘻大学质量管理与评估中心</h1>
<p>University Center for Quality Management and Assessment</p>
</div>
</div>
<div class="search-box">
<input type="text" placeholder="搜索">
<button>搜索</button>
</div>
</div>
<!-- 导航菜单（含下拉） -->
<div class="nav">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">机构设置</a></li>
<li>
<a href="#">质量监控</a>
<ul class="dropdown">
<li><a href="#">教学检查</a></li>
<li><a href="#">教学督导</a></li>
<li><a href="#">学生评教</a></li>
</ul>
</li>
<li><a href="#">教学评估</a></li>
<li><a href="#">文件制度</a></li>
<li><a href="#">下载中心</a></li>
<li><a href="#">学校首页</a></li>
</ul>
</div>
<!--图片区域） -->
<div class="banner">
<img src="../img/12.png" alt="宣传横幅" style="width: 100%; height: auto;">
</div>
<!-- 内容区域（新闻+通知） -->
<div class="content">
<div class="content-left">
<img src="../img/4.jpg" alt="会议图片"> <!-- 替换为实际会议图片 -->
</div>
<div class="content-right">
<!-- 新闻动态 -->
<div class="section">
<div class="section-title">
<h3>新闻动态</h3>
<a href="#">MORE ></a>
</div>
<ul class="section-list">
<li><a href="#">•学校召开"十四五"规划总结暨"十五五"规划编制汇报会<span>2025-12-30</span></a></li>
<li><a href="#">•学校开展2025届本科毕业设计（论文）专项检查工作<span>2025-12-18</span></a></li>
<li><a href="#">•学校召开2025-2026学年第一学期教学督导期中总结暨期中教学检查反馈会<span>2025-11-27</span></a></li>
<li><a href="#">•学校开展2025-2026学年第一学期期中教学检查<span>2025-11-24</span></a></li>
<li><a href="#">•我校召开2025-2026学年第一学期期中教学检查南宁校区师生座谈会<span>2025-11-20</span></a></li>
<li><a href="#">•学校开展2024-2025第二学期期末考试试卷专项检查工作<span>2025-11-17</span></a></li>
</ul>
</div>
<!-- 通知公告 -->
<div class="section">
<div class="section-title">
<h3>通知公告</h3>
<a href="#">MORE ></a>
</div>
<ul class="section-list">
<li><a href="#">•2025年度各教学单位质量管理与评估相关工作考核评分<span>2025-12-19</span></a></li>
<li><a href="#">•质量管理与评估中心关于2025年度考核拟定为优秀人员名单的公示<span>2025-12-19</span></a></li>
<li><a href="#">•关于开展2025-2026学年第一学期学生网上评教的通知<span>2025-12-05</span></a></li>
<li><a href="#">•关于开展高等教育质量监测2025年数据采集工作的通知<span>2025-12-03</span></a></li>
<li><a href="#">•关于开展2025届毕业设计（论文）专项检查的通知<span>2025-11-28</span></a></li>
<li><a href="#">•关于开展2025-2026学年第一学期学校领导班子思想政治理论课专项听课工作的通知<span>2025-11-03</span></a></li>
</ul>
</div>
</div>
</div>
<!-- 政策文件+他山之石+友情链接 -->
<div class="mid-content">
<!-- 政策文件 -->
<div class="mid-section">
<div class="section-title">
<h3>政策文件</h3>
<a href="#">MORE ></a>
</div>
<ul class="section-list">
<li><a href="#">•教育部关于加快建设高水平本科教育 全面提高人才培养能力的意见<span>2024-02-20</span></a></li>
<li><a href="#">•教育部关于印发《新时代高校教师职业行为十项准则》的通知<span>2024-01-29</span></a></li>
<li><a href="#">•中共中央 国务院印发《深化新时代教育评价改革总体方案》<span>2023-12-25</span></a></li>
<li><a href="#">•教育部关于深化本科教育教学改革 全面提高人才培养质量的意见<span>2023-11-13</span></a></li>
</ul>
</div>
<!-- 他山之石 -->
<div class="mid-section">
<div class="section-title">
<h3>他山之石</h3>
<a href="#">MORE ></a>
</div>
<ul class="section-list">
<li><a href="#">•普通高等学校本科教学工作合格评估36问（九）<span>2024-03-29</span></a></li>
<li><a href="#">•普通高等学校本科教学工作合格评估36问（八）<span>2024-03-21</span></a></li>
<li><a href="#">•普通高等学校本科教学工作合格评估36问（七）<span>2024-03-18</span></a></li>
<li><a href="#">•普通高等学校本科教学工作合格评估36问（六）<span>2024-03-13</span></a></li>
</ul>
</div>
<!-- 友情链接 -->
<div class="link-section">
<div class="section-title">
<h3>友情链接</h3>
</div>
<ul class="link-list">
<li><a href="#">中华人民共和国教育部</a></li>
<li><a href="#">教育部教育质量评估中心</a></li>
<li><a href="#">中国工程教育专业认证协会</a></li>
<li><a href="#">教育厅</a></li>
</ul>
</div>
</div>
<!-- 活动图片区域 -->
<div class="activity">
<div class="activity-title">
<h3>活动图片</h3>
<a href="#" style="float: right; font-size: 12px; color: #666;">MORE ></a>
</div>
<div class="activity-imgs">
<img src="../img/2.jpg" alt="活动1"> <!-- 替换为实际活动图片 -->
<img src="../img/3.jpg" alt="活动2"> <!-- 替换为实际活动图片 -->
<img src="../img/6.jpg" alt="活动3"> <!-- 替换为实际活动图片 -->
<img src="../img/7.jpg" alt="活动4"> <!-- 替换为实际活动图片 -->
<img src="../img/8.jpg" alt="活动5"> <!-- 替换为实际活动图片 -->
</div>
</div>
<!-- 页脚 -->
<div class="footer">
<div class="footer-logo">
<img src="../img/1.png" alt="校徽"> <!-- 替换为实际校徽图片 -->
<div>
<h4>嘻嘻嘻大学</h4>
<p>NANNING COLLEGE OF TECHNOLOGY</p>
</div>
</div>
<div class="footer-info">
<p>A校区：A省B区发展大道66号</p>
<p>S校区：A省C区繁盛大道88号</p>
<p>校办：0666-6666666（A校区）| 0888-8888888（S校区）</p>
</div>
<div class="footer-links">
<a href="#">校内链接</a>
<a href="#">专题网站</a>
<a href="#">友情链接</a>
</div>
</div>
</body>
</html>运行如下
