<!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: "Microsoft Yahei", sans-serif; } header { background-color: #0F2C67; color: white; padding: 0 20px; } .header-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; height: 70px; } .logo img { height: 50px; } .nav ul { display: flex; list-style: none; } .nav li { margin-left: 30px; } .nav a { color: white; text-decoration: none; font-size: 16px; transition: color 0.3s; } .nav a:hover { color: #FFD700; } .carousel { position: relative; width: 100%; height: 300px; overflow: hidden; } .carousel-inner { display: flex; width: 100%; height: 100%; transition: transform 0.5s ease; } .carousel-item { flex: 0 0 100%; width: 100%; height: 100%; } .carousel-item img { width: 100%; height: 100%; object-fit: cover; } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background-color: rgba(0, 0, 0, 0.5); color: white; border: none; border-radius: 50%; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; } .prev-btn { left: 20px; } .next-btn { right: 20px; } .carousel-btn:hover { background-color: rgba(0, 0, 0, 0.8); } .main-content { max-width: 1200px; margin: 30px auto; display: flex; justify-content: space-between; padding: 0 20px; } .news-section, .notice-section { width: 48%; border: 1px solid #E0E0E0; padding: 20px; border-radius: 5px; } .section-title { font-size: 18px; color: #0F2C67; border-bottom: 2px solid #0F2C67; padding-bottom: 10px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; } .more-btn { font-size: 14px; color: #0F2C67; text-decoration: none; } .content-list { list-style: none; } .content-list li { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed #E0E0E0; } .content-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .content-list a { color: #333; text-decoration: none; font-size: 15px; transition: color 0.3s; } .content-list a:hover { color: #0F2C67; text-decoration: underline; } .bottom-section { max-width: 1200px; margin: 30px auto; padding: 0 20px; } .bottom-row { display: flex; justify-content: space-between; margin-bottom: 40px; } .bottom-col { width: 32%; } .bottom-col h3 { font-size: 18px; color: #0F2C67; margin-bottom: 15px; display: flex; align-items: center; } .bottom-col h3::before { content: ""; display: inline-block; width: 4px; height: 18px; background-color: #0F2C67; margin-right: 8px; } .policy-list, .other-list { list-style: none; } .policy-list li, .other-list li { margin-bottom: 12px; padding-left: 10px; border-left: 1px solid #ccc; } .policy-list a, .other-list a { color: #333; text-decoration: none; font-size: 14px; line-height: 1.5; } .policy-list a:hover, .other-list a:hover { color: #0F2C67; text-decoration: underline; } .policy-list span, .other-list span { display: block; font-size: 12px; color: #999; margin-top: 3px; } .links-list { list-style: none; } .links-list li { margin-bottom: 10px; } .links-list a { display: block; background-color: #0F2C67; color: white; text-align: center; padding: 12px 0; text-decoration: none; border-radius: 3px; transition: background-color 0.3s; } .links-list a:hover { background-color: #1A3F99; } .activity-section { margin-top: 40px; } .activity-section h3 { font-size: 18px; color: #0F2C67; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; } .activity-grid { display: flex; justify-content: space-between; flex-wrap: wrap; } .activity-item { width: 19%; margin-bottom: 15px; } .activity-item img { width: 100%; height: auto; border-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } footer { background-color: #0F2C67; color: white; text-align: center; padding: 20px 0; margin-top: 50px; } .footer-text { font-size: 14px; } @media (max-width: 768px) { .main-content, .bottom-row { flex-direction: column; } .news-section, .notice-section, .bottom-col { width: 100%; margin-bottom: 20px; } .nav li { margin-left: 15px; } .carousel-btn { width: 30px; height: 30px; font-size: 16px; } .activity-item { width: 48%; } } </style> </head> <body> <header> <div class="header-container"> <div class="logo"> <img src="564fe1f4e2970a6a9865e385ecb945aa.png" alt="南宁理工学院 Logo"> </div> <nav class="nav"> <ul> <li><a href="#">网站首页</a></li> <li><a href="#">机构设置</a></li> <li><a href="#">质量监控</a></li> <li><a href="#">教学评估</a></li> <li><a href="#">政策文件</a></li> <li><a href="#">下载中心</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </div> </header> <div class="carousel"> <div class="carousel-inner" id="carouselInner"> <div class="carousel-item"> <img src="505bd403-9759-4a5a-95eb-e36e7715d086.png" alt="南宁理工学院校园风光1"> </div> <div class="carousel-item"> <img src="505bd403-9759-4a5a-95eb-e36e7715d086.png" alt="南宁理工学院校园风光2"> </div> </div> <button class="carousel-btn prev-btn" onclick="prevSlide()"><</button> <button class="carousel-btn next-btn" onclick="nextSlide()">></button> </div> <div class="main-content"> <div class="news-section"> <div class="section-title"> <span>新闻动态</span> <a href="#" class="more-btn">MORE >></a> </div> <ul class="content-list"> <li><a href="#">学校召开2025年度教学质量管理工作推进会</a></li> <li><a href="#">我校顺利完成自治区教育厅教学质量专项检查</a></li> <li><a href="#">质量管理与评估中心开展新学期教学督导培训</a></li> <li><a href="#">我校在全区高校教学质量评估中获优秀等次</a></li> <li><a href="#">各教学单位提交2025年质量提升工作计划</a></li> </ul> </div> <div class="notice-section"> <div class="section-title"> <span>通知公告</span> <a href="#" class="more-btn">MORE >></a> </div> <ul class="content-list"> <li><a href="#">关于开展2025年春季学期教学质量自查的通知</a></li> <li><a href="#">2025届毕业生毕业论文（设计）质量抽检结果公示</a></li> <li><a href="#">关于申报2025年教学质量工程项目的通知</a></li> <li><a href="#">关于举办“教学质量提升”专题讲座的通知</a></li> <li><a href="#">教学督导员名单及工作职责公示</a></li> </ul> </div> </div> <div class="bottom-section"> <div class="bottom-row"> <div class="bottom-col"> <h3>政策文件 <a href="#" class="more-btn">MORE >></a></h3> <ul class="policy-list"> <li> <a href="#">教育部关于加快建设高水平本科教育 全面提高人...</a> <span>2024-02-20</span> </li> <li> <a href="#">教育部关于印发《新时代高校教师职业行为 十项...</a> <span>2024-01-29</span> </li> <li> <a href="#">中共中央 国务院印发《深化新时代教育评价改革...</a> <span>2023-12-25</span> </li> <li> <a href="#">教育部关于深化本科教育教学改革 全面提高人才...</a> <span>2023-11-13</span> </li> </ul> </div> <div class="bottom-col"> <h3>他山之石 <a href="#" class="more-btn">MORE >></a></h3> <ul class="other-list"> <li> <a href="#">普通高等学校本科教学工作合格评估36问（九）</a> <span>2024-03-29</span> </li> <li> <a href="#">普通高等学校本科教学工作合格评估36问（八）</a> <span>2024-03-21</span> </li> <li> <a href="#">普通高等学校本科教学工作合格评估36问（七）</a> <span>2024-03-18</span> </li> <li> <a href="#">普通高等学校本科教学工作合格评估36问（六）</a> <span>2024-03-13</span> </li> </ul> </div> <div class="bottom-col"> <h3>友情链接</h3> <ul class="links-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-section"> <h3>活动图片 <a href="#" class="more-btn">MORE >></a></h3> <div class="activity-grid"> <div class="activity-item"> <img src="505bd403-9759-4a5a-95eb-e36e7715d086.png" alt="活动图片1"> </div> <div class="activity-item"> <img src="505bd403-9759-4a5a-95eb-e36e7715d086.png" alt="活动图片2"> </div> <div class="activity-item"> <img src="505bd403-9759-4a5a-95eb-e36e7715d086.png" alt="活动图片3"> </div> <div class="activity-item"> <img src="505bd403-9759-4a5a-95eb-e36e7715d086.png" alt="活动图片4"> </div> <div class="activity-item"> <img src="505bd403-9759-4a5a-95eb-e36e7715d086.png" alt="活动图片5"> </div> </div> </div> </div> <footer> <div class="footer-text"> <p>南宁理工学院 版权所有桂ICP备11008251号</p> <p>地址：提瓦特原神街道</p> <p>校 办：0771-6031550（南宁） | 0773-8998055（桂林）</p> <p>招生办：0771-6031555（南宁） | 0773-8998009（桂林）</p> </div> </footer> <script> let currentIndex = 0; const carouselInner = document.getElementById('carouselInner'); const carouselItems = document.querySelectorAll('.carousel-item'); const totalSlides = carouselItems.length; function prevSlide() { currentIndex = (currentIndex - 1 + totalSlides) % totalSlides; updateCarousel(); } function nextSlide() { currentIndex = (currentIndex + 1) % totalSlides; updateCarousel(); } function updateCarousel() { carouselInner.style.transform = `translateX(-${currentIndex * 100}%)`; } setInterval(nextSlide, 3000); </script> </body> </html>下面是运行结果
