<!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;}/* 顶部导航 */.top-header{background-color:#003366;color:white;padding:10px 0;}.top-header .container{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;}.logo{display:flex;align-items:center;}.logo img{height:50px;margin-right:10px;}.logo-text h1{font-size:20px;font-weight:bold;}.logo-text p{font-size:12px;opacity:0.8;}.search-box{display:flex;align-items:center;}.search-box input{height:32px;padding:0 10px;border:none;border-radius:4px 0 0 4px;outline:none;}.search-box button{height:32px;width:60px;background-color:#1677ff;color:white;border:none;border-radius:0 4px 4px 0;cursor:pointer;}.nav{background-color:#004080;border-top:1px solid #00264d;}.nav ul{display:flex;max-width:1200px;margin:0 auto;}.nav li{list-style:none;}.nav a{display:block;color:white;text-decoration:none;padding:12px 24px;font-size:15px;transition:background-color 0.3s;}.nav a:hover{background-color:#0059b3;}/* 轮播图 */.banner{background-color:#d92121;color:white;height:180px;display:flex;align-items:center;justify-content:center;position:relative;}.banner h2{font-size:32px;font-weight:bold;}.banner-indicators{position:absolute;bottom:15px;display:flex;gap:8px;}.indicator{width:12px;height:12px;border-radius:50%;background-color:rgba(255,255,255,0.5);cursor:pointer;}.indicator.active{background-color:white;}/* 新闻与通知 */.news-section{max-width:1200px;margin:30px auto;display:grid;grid-template-columns:2fr 1fr;gap:30px;}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;border-bottom:1px solid #e5e5e5;padding-bottom:8px;}.section-title h3{font-size:18px;color:#333;position:relative;}.section-title h3::after{content:"";position:absolute;bottom:-9px;left:0;width:40px;height:2px;background-color:#004080;}.section-title a{color:#666;text-decoration:none;font-size:14px;}.news-list{display:flex;flex-direction:column;gap:15px;}.news-item{display:flex;gap:15px;}.news-item img{width:180px;height:120px;object-fit:cover;}.news-content h4{font-size:16px;margin-bottom:8px;color:#333;}.news-content p{font-size:14px;color:#666;line-height:1.5;margin-bottom:8px;}.news-meta{font-size:12px;color:#999;}.notice-list{display:flex;flex-direction:column;gap:12px;}.notice-item{display:flex;align-items:center;}.notice-date{width:40px;height:40px;background-color:#004080;color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-right:12px;border-radius:4px;font-size:12px;}.notice-date .day{font-size:16px;font-weight:bold;}.notice-content a{color:#333;text-decoration:none;font-size:14px;line-height:1.4;}.notice-content a:hover{color:#004080;}/* 功能入口区 */.function-section{background:linear-gradient(135deg,#004080 0%,#0059b3 100%);padding:40px 0;margin:40px 0;}.function-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}.function-card{background-color:rgba(255,255,255,0.1);border:1px solidrgba(255,255,255,0.2);border-radius:8px;padding:20px;text-align:center;color:white;transition:transform 0.3s;}.function-card:hover{transform:translateY(-5px);}.function-card.highlight{background-color:#d92121;border-color:#d92121;}.function-card i{font-size:36px;margin-bottom:12px;}.function-card p{font-size:14px;}/* 页脚 */.footer{background-color:#333;color:white;padding:40px 0;}.footer .container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;}.footer-logo{display:flex;align-items:center;margin-bottom:20px;}.footer-logo img{height:60px;margin-right:15px;}.footer-logo h2{font-size:22px;font-weight:bold;}.footer-social{display:flex;gap:15px;margin-bottom:20px;}.footer-social a{color:white;font-size:20px;}.footer-links{display:flex;gap:40px;}.footer-column h4{font-size:16px;margin-bottom:15px;}.footer-column ul{list-style:none;}.footer-column li{margin-bottom:8px;}.footer-column a{color:rgba(255,255,255,0.7);text-decoration:none;font-size:14px;}.footer-column a:hover{color:white;}</style> </head> <body> <!-- 顶部导航栏 --> <header class="top-header"> <div class="container"> <div class="logo"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E"alt="南宁理工学院"> <div class="logo-text"> <h1>南宁理工学院</h1> <p>(原桂林理工大学博文管理学院)</p> </div> </div> <div class="search-box"> <input type="text"placeholder="请输入搜索内容"> <button>搜索</button> </div> </div> </header> <!-- 主导航 --> <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> <li><a href="#">数字南理</a></li> </ul> </nav> <!-- 轮播横幅 --> <section class="banner"> <h2>为全面建设社会主义现代化国家而团结奋斗</h2> <div class="banner-indicators"> <div class="indicator"></div> <div class="indicator"></div> <div class="indicator"></div> <div class="indicator active"></div> </div> </section> <!-- 新闻与通知 --> <section class="news-section"> <div class="news-left"> <div class="section-title"> <h3>学校新闻</h3> <div> <a href="#"style="margin-right: 20px;">校园动态</a> <a href="#">媒体南理</a> <a href="#"style="margin-left: 20px;">READ MORE >></a> </div> </div> <div class="news-list"> <div class="news-item"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120' viewBox='0 0 180 120' fill='%23e5e5e5'%3E%3Crect width='180' height='120' fill='%23e5e5e5'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-size='14' fill='%23666'%3E新闻图片%3C/text%3E%3C/svg%3E"alt="新闻图片"> <div class="news-content"> <h4>学校召开全面从严治党暨清廉学校建设提质增效工作推进会</h4> <p>4月25日上午，学校召开2025年全面从严治党暨清廉学校建设提质增效工作部署...</p> <div class="news-meta">来源：党政办公室 发布日期：2025-04-27</div> </div> </div> <div class="news-item"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120' viewBox='0 0 180 120' fill='%23e5e5e5'%3E%3Crect width='180' height='120' fill='%23e5e5e5'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-size='14' fill='%23666'%3E新闻图片%3C/text%3E%3C/svg%3E"alt="新闻图片"> <div class="news-content"> <h4>南宁理工学院在第四届“铸剑杯”国防素养大赛中荣获佳绩</h4> <p>近期，在全国第四届“铸剑杯”国防素养大赛活动中，我...</p> <div class="news-meta">来源：学生工作部（处） 发布日期：2025-04-24</div> </div> </div> </div> </div> <div class="news-right"> <div class="section-title"> <h3>通知公告</h3> <a href="#">READ MORE >></a> </div> <div class="notice-list"> <div class="notice-item"> <div class="notice-date"> <div class="day">20</div> <div>2022.06</div> </div> <div class="notice-content"> <a href="#">【讲座预告】中国知网文献精准检索技巧讲座</a> </div> </div> <div class="notice-item"> <div class="notice-date"> <div class="day">14</div> <div>2022.06</div> </div> <div class="notice-content"> <a href="#">“AI领航 智启未来——数智赋能与可持续发展”论坛将于6月19日隆重举行</a> </div> </div> </div> <div class="section-title"style="margin-top: 30px;"> <h3>活动预告</h3> <a href="#">READ MORE >></a> </div> <div class="notice-list"> <div class="notice-item"> <div class="notice-date"> <div class="day">20</div> <div>2022.04</div> </div> <div class="notice-content"> <a href="#">第8周学生活动预告</a> </div> </div> <div class="notice-item"> <div class="notice-date"> <div class="day">14</div> <div>2022.04</div> </div> <div class="notice-content"> <a href="#">第7周学生活动预告</a> </div> </div> </div> </div> </section> <!-- 功能入口区 --> <section class="function-section"> <div class="function-grid"> <div class="function-card"> <i>🎓</i> <p>在线教学MOOC平台</p> </div> <div class="function-card"> <i>💻</i> <p>数字化实习实训课程平台</p> </div> <div class="function-card highlight"> <i>🤝</i> <p>公益课程平台</p> </div> <div class="function-card"> <i>🔬</i> <p>模拟仿真实训系统</p> </div> <div class="function-card"> <i>VR</i> <p>VR实景</p> </div> <div class="function-card"> <i>🌍</i> <p>国际教育</p> </div> <div class="function-card"> <i>📜</i> <p>学校章程</p> </div> <div class="function-card"> <i>📚</i> <p>图书馆</p> </div> <div class="function-card"> <i>🔍</i> <p>高校科研系统</p> </div> <div class="function-card"> <i>🛡️</i> <p>WEB内容安全审核系统</p> </div> <div class="function-card highlight"> <i>⚠️</i> <p>篡改发现预警系统项目</p> </div> <div class="function-card"> <i>⚙️</i> <p>集中运维工单管理平台</p> </div> </div> </section> <!-- 页脚 --> <footer class="footer"> <div class="container"> <div class="footer-left"> <div class="footer-logo"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E"alt="南宁理工学院"> <h2>南宁理工学院</h2> </div> <div class="footer-social"> <a href="#">📱</a> <a href="#">📘</a> <a href="#">🎓</a> <a href="#">VR</a> <a href="#">🌐</a> </div> </div> <div class="footer-links"> <div class="footer-column"> <h4>校内链接</h4> <ul> <li><a href="#">教务处</a></li> <li><a href="#">学生工作处</a></li> <li><a href="#">人事处</a></li> </ul> </div> <div class="footer-column"> <h4>专题网站</h4> <ul> <li><a href="#">清廉学校</a></li> <li><a href="#">招生网</a></li> <li><a href="#">就业网</a></li> </ul> </div> <div class="footer-column"> <h4>联系方式</h4> <ul> <li><a href="#">南宁校区：广西南宁市广西-东盟经济技术开发区发展大道16号</a></li> <li><a href="#">桂林校区：广西桂林市雁山区雁山镇雁山街317号</a></li> <li><a href="#">党政办公室：0771-6031550（南宁） 0773-8998055（桂林）</a></li> </ul> </div> </div> </div> </footer> </body> </html>呈现效果如图：
