1. html代码
1.1 首页.html
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>武理天协</title><link rel="stylesheet" href="./style.css"><link rel="stylesheet" href="./首页.css"><link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body><div class="header"><div class="header-title"><img src="./images/logo.jpg" alt="协会会徽">天文爱好者协会</div><div class="nav-bar"><a href="./首页.html"><i class="fas fa-home"></i> 首页</a><a href="./history.html"><i class="fas fa-book"></i> 协会历史</a><a href="./news.html"><i class="fas fa-newspaper"></i> 观星新闻</a><a href="./events.html"><i class="fas fa-calendar-alt"></i> 活动预告</a><a href="./astronomy.html"><i class="fas fa-star"></i> 天文科普</a><a href="./links.html"><i class="fas fa-link"></i> 链接天文</a></div></div><div class="news-events"><div class="slider"><img src="./images/深蓝紫色插画儿童节节日海报（横版）.png" alt=""></div></div><div class="news-events"><div class="news"><h3>团队成员</h3><ul><li>魏颖超</li><li>赵涵</li><li>张翔</li></ul></div><div class="events"><h3>建站初衷</h3><ul><li>在浩瀚宇宙中，每颗星星都诉说着自己的故事。<br>我们，天文爱好者协会，致力于探索这些神秘而璀璨的故事。<br>自组织成立以来，我们始终坚持一个信念：天文不仅是科学，更是连接人心的桥梁。</a></li></ul></div></div></div><div class="footer"><p>联系我们: email@example.com</p></div>
</body>
</html>
1.2 news.html
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>武理天协</title><link rel="stylesheet" href="./style.css"><link rel="stylesheet" href="./首页.css"><link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"><style>.container_a {padding: 20px;margin: 15px;}.container_b{padding: 20px;margin: 15px;}.container_c{padding: 20px;margin: 15px;}.news-item_a {display: block;background-color: white;margin-bottom: 20px;padding: 20px;border: 2px solid #ccc;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);text-decoration: none; /* Remove underline from links */color: #f0f0f0; /* Standard text color for content */transition: transform 0.3s ease, box-shadow 0.3s ease;position: relative;background-image: url(./images/7.jpg);background-size: cover;}.news-item_a:hover {transform: scale(1.05);box-shadow: 0 10px 20px rgba(0,0,0,0.3);}.news-item_b {display: block;background-color: white;margin-bottom: 20px;padding: 20px;border: 2px solid #ccc;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);text-decoration: none; /* Remove underline from links */color:#f0f0f0; /* Standard text color for content */transition: transform 0.3s ease, box-shadow 0.3s ease;position: relative;background-image: url(./images/7.jpg);background-size: cover;}.news-item_b:hover {transform: scale(1.05);box-shadow: 0 10px 20px rgba(0,0,0,0.3);}.news-item_c {display: block;background-color: white;margin-bottom: 20px;padding: 20px;border: 2px solid #ccc;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);text-decoration: none; /* Remove underline from links */color:#f0f0f0; /* Standard text color for content */transition: transform 0.3s ease, box-shadow 0.3s ease;position: relative;background-image: url(./images/7.jpg);background-size: cover;}.news-item_c:hover {transform: scale(1.05);box-shadow: 0 10px 20px rgba(0,0,0,0.3);}.image_a{display: none;background-color: none;width: 260px;height: 420px;background-image: url("./images/6.jpg");background-repeat: no-repeat;background-size: 100%;position: absolute;right: 0px;top: 0px;}.news-item_a:hover>.image_a{display: block;}.image_b{display: none;background-color: none;width: 275px;height: 900px;background-image: url("./images/8.webp");background-repeat: no-repeat;background-size: 100%;position: absolute;right: 0px;top: 0px;}.news-item_b:hover>.image_b{display: block;object-fit: contain;}.image_c{display: none;background-color: none;width: 320px;height: 420px;background-image: url("./images/4.jpeg");background-repeat: no-repeat;background-size: 100%;position: absolute;right: 0px;top: 0px;}.news-item_c:hover>.image_c{display: block;object-fit: contain;}.news-item {display: block;background-color: white;margin-bottom: 20px;padding: 20px;border: 2px solid #ccc;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);text-decoration: none;color:#f0f0f0;transition: transform 0.3s ease, box-shadow 0.3s ease;background-image: url(./images/7.jpg);background-size: cover;}.news-item:hover {transform: scale(1.05);box-shadow: 0 10px 20px rgba(0,0,0,0.3);}.news-date {color: #666;font-size: 0.9em;}</style>
</head>
<body><div class="header"><div class="header-title"><img src="./images/logo.jpg" alt="协会会徽">天文爱好者协会</div><div class="nav-bar"><a href="./首页.html"><i class="fas fa-home"></i> 首页</a><a href="./history.html"><i class="fas fa-book"></i> 协会历史</a><a href="./news.html"><i class="fas fa-newspaper"></i> 观星新闻</a><a href="./events.html"><i class="fas fa-calendar-alt"></i> 活动预告</a><a href="./astronomy.html"><i class="fas fa-star"></i> 天文科普</a><a href="./links.html"><i class="fas fa-link"></i> 链接天文</a></div></div><div class="container_a"><a href="#" class="news-item_a"><h2>星空观测夜</h2><p class="news-date">2024年5月10日</p><p>我们在本月10日举行了一次星空观测夜，活动吸引了超过100名学生和教师参加。</p><div class="image_a"></div></a></div><div class="container_b"><a href="#" class="news-item_b"><h2>讲座：银河系的构造</h2><p class="news-date">2024年4月25日</p><p>著名天文学家王教授在我校进行了关于银河系构造的精彩讲座。</p><div class="image_b"></div></a></div><div class="container_c"><a href="#" class="news-item_c"><h2>新会员欢迎会</h2><p class="news-date">2024年3月15日</p><p>我们欢迎了30名新会员加入我们的天文协会。活动中，新老会员共同参与了交流会，共同讨论了未来的活动计划和目标。</p><div class="image_c"></div></a></div><div class="footer"><p>联系我们: email@example.com</p></div>
</body>
</html>
1.3 link.html
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>武理天协</title><link rel="stylesheet" href="./style.css"><link rel="stylesheet" href="./首页.css"><link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"><style>.container_a {padding: 20px;margin: 15px;}.container_b{padding: 20px;margin: 15px;}.container_c{padding: 20px;margin: 15px;}.link-item_a {display: block;background-color: white;margin-bottom: 20px;padding: 20px;border: 2px solid #ccc;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);text-decoration: none; /* Remove underline from links */color: #f0f0f0; /* Standard text color for content */transition: transform 0.3s ease, box-shadow 0.3s ease;position: relative;background-image: url(./images/7.jpg);background-size: cover;}.link-item_a:hover {transform: scale(1.05);box-shadow: 0 10px 20px rgba(0,0,0,0.3);}.link-item_b {display: block;background-color: white;margin-bottom: 20px;padding: 20px;border: 2px solid #ccc;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);text-decoration: none; /* Remove underline from links */color:#f0f0f0; /* Standard text color for content */transition: transform 0.3s ease, box-shadow 0.3s ease;position: relative;background-image: url(./images/7.jpg);background-size: cover;}.link-item_b:hover {transform: scale(1.05);box-shadow: 0 10px 20px rgba(0,0,0,0.3);}.link-item_c {display: block;background-color: white;margin-bottom: 20px;padding: 20px;border: 2px solid #ccc;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);text-decoration: none; /* Remove underline from links */color:#f0f0f0; /* Standard text color for content */transition: transform 0.3s ease, box-shadow 0.3s ease;position: relative;background-image: url(./images/7.jpg);background-size: cover;}.link-item_c:hover {transform: scale(1.05);box-shadow: 0 10px 20px rgba(0,0,0,0.3);}.image_a{display: none;background-color: none;width: 148px;height: 180px;background-image: url("./images/3.jpeg");background-repeat: no-repeat;background-size: 100%;position: absolute;right: 0px;top: 0px;}.link-item_a:hover>.image_a{display: block;}.image_b{display: none;background-color: none;width: 260px;height: 900px;background-image: url("images/6.webp");background-repeat: no-repeat;background-size: 100%;position: absolute;right: 0px;top: 0px;}.link-item_b:hover>.image_b{display: block;object-fit: contain;}.image_c{display: none;background-color: none;width: 220px;height: 143px;background-image: url("./images/2.jpeg");background-repeat: no-repeat;background-size: 100%;position: absolute;right: 0px;top: 0px;}.link-item_c:hover>.image_c{display: block;object-fit: contain;}</style>
</head>
<body><div class="header"><div class="header-title"><img src="./images/logo.jpg" alt="协会会徽">天文爱好者协会</div><div class="nav-bar"><a href="./首页.html"><i class="fas fa-home"></i> 首页</a><a href="./history.html"><i class="fas fa-book"></i> 协会历史</a><a href="./news.html"><i class="fas fa-newspaper"></i> 观星新闻</a><a href="./events.html"><i class="fas fa-calendar-alt"></i> 活动预告</a><a href="./astronomy.html"><i class="fas fa-star"></i> 天文科普</a><a href="./links.html"><i class="fas fa-link"></i> 链接天文</a></div></div><div class="container_a"><a href="#" target="_blank" class="link-item_a"><h2>NASA 官方网站</h2><p>访问美国国家航空航天局（NASA）的官方网站，探索宇宙、太空任务和最新科学发现。</p><div class="image_a"></div></a></div><div class="container_b"><a href="#" target="_blank" class="link-item_b"><h2>欧洲南方天文台 (ESO)</h2><p>了解欧洲南方天文台的创新项目和对天文研究的重要贡献。</p><div class="image_b"></div></a></div><div class="container_c"><a href="#" target="_blank" class="link-item_c"><h2>Space.com</h2><p>获取关于宇宙的最新新闻和详细的科学报道。</p><div class="image_c"></div></a></div><div class="footer"><p>联系我们: email@example.com</p></div>
</body>
</html>
1.4 history.html
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>武理天协</title><link rel="stylesheet" href="./style.css"><link rel="stylesheet" href="./首页.css"><link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"><style>.container {padding: 20px;background-image: url(./images/background.webp);margin: 15px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}h2 {color: white;font-size: 30px;text-align: center;}.timeline {position: relative;padding: 50px 10px;margin: 0 auto;max-width: 800px;}/* 全局样式 */body, html {height: 100%;margin: 0;font-family: 'Arial', sans-serif;background: #f0f0f0; /* 页面背景颜色 */}/* 背景图片设置 */.background {background-image: url('image/exported.jpg?v=1');background-size: cover;background-position: center;min-height: 100vh;}/* 添加鼠标悬停在时间轴项上的效果 */.timeline-item:hover .timeline-content {box-shadow: 0 8px 16px rgba(0, 0, 139, 0.2); /* 修改阴影颜色为深蓝色 */transform: translate3d(0px, -2px, 0px);transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;}/* 悬停在时间轴标记点上时，改变标记点的背景颜色 */.timeline-item:hover .timeline-marker {background-color: #2b0dd8;}/* 时间轴容器 */.timeline {max-width: 1200px;width: 90%;margin: 20px auto;position: relative;z-index: 1;}/* 时间轴线 */.timeline::after {content: '';position: absolute;width: 2px;height: 100%;background-color: rgba(255, 255, 255, 0.8); /* 调整背景为半透明白色 */top: 0;left: 50%;margin-left: -1px;}/* 为时间轴项添加一个简单的下滑动画 */.timeline-item {opacity: 0; /* 初始时完全透明 */animation: revealItem 1s ease forwards; /* 应用动画 */}/* 时间轴项 */.timeline-item {margin-bottom: 40px;position: relative;width: 45%;padding: 10px;box-sizing: border-box;}/* 时间轴标记点 */.timeline-marker {position: absolute;top: 50%;transform: translateY(-50%);width: 20px;height: 20px;border-radius: 50%;background-color: #070707;border: 2px solid #fff;z-index: 2;}/* 左边的时间轴内容 */.timeline-item.left {left: 0;text-align: left;margin-right: 30px; /* 右边距，为时间轴线留空间 */}/* 右边的时间轴内容 */.timeline-item.right {left: 50%;text-align: left;margin-left: 30px; /* 左边距，为时间轴线留空间 */}/* 时间轴内容 */.timeline-content {background-color: rgba(255, 255, 255, 0.6); /* 调整背景为半透明白色 */padding: 20px;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);position: relative;}/* 时间轴标题 */.timeline-item h3 {margin: 0 0 10px 0;color: #333;}/* 时间轴文本 */.timeline-item p {line-height: 1.6;font-size: 16px;color: #666;}/* 动画关键帧 */@keyframes revealItem {from {opacity: 0;transform: translateY(-20px); /* 初始位置稍微上移 */}to {opacity: 1;transform: translateY(0); /* 动画结束时回到原位置 */}}/* 响应式设计 */@media (max-width: 768px) {.timeline-item {width: 100%;left: 0;margin: 20px 0;}.timeline::after {left: 20px;}.timeline-marker {left: -25px;}.timeline-content {margin-left: 20px;}}/* 设置不同的动画延迟时间，使每个时间轴项依次显示 */.timeline-item:nth-child(1) {--timeline-delay: 0.5s;}.timeline-item:nth-child(2) {--timeline-delay: 1s;}.timeline-item:nth-child(3) {--timeline-delay: 1.5s;}/* 设置不同的动画延迟时间，使每个时间轴项依次显示 */.timeline-item:nth-child(4) {--timeline-delay: 2s;}.timeline-item:nth-child(5) {--timeline-delay: 2.5s;}.timeline-item:nth-child(6) {--timeline-delay: 3s;}.timeline-item:nth-child(7) {--timeline-delay: 3.5s;}</style>
</head>
<body><div class="header"><div class="header-title"><img src="./images/logo.jpg" alt="协会会徽">天文爱好者协会</div><div class="nav-bar"><a href="./首页.html"><i class="fas fa-home"></i> 首页</a><a href="./history.html"><i class="fas fa-book"></i> 协会历史</a><a href="./news.html"><i class="fas fa-newspaper"></i> 观星新闻</a><a href="./events.html"><i class="fas fa-calendar-alt"></i> 活动预告</a><a href="./astronomy.html"><i class="fas fa-star"></i> 天文科普</a><a href="./links.html"><i class="fas fa-link"></i> 链接天文</a></div></div><div class="container"><h2>协会历史时间轴</h2><div class="timeline"><!-- 成立与挑战 --><div class="timeline-item left"style="--timeline-delay: 0.5s;"><div class="timeline-marker"></div><div class="timeline-content"><h3>2009年 - 成立与挑战</h3><p>天协的起源可追溯至2009年，在余家头校区由一群热爱天文的学生创立。</p><p>尽管最初的尝试因种种原因未能持续，但它为未来的天文社团埋下了希望的种子。</p></div></div><!-- 复兴与成长 --><div class="timeline-item right"style="--timeline-delay: 1.5s;"><div class="timeline-marker"></div><div class="timeline-content"><h3>2018年 - 复兴与成长</h3><p>2018年，理学院2016级的杜静静学姐和计算机学院2016级的单家辉学长在理学院的大力支持下</p><p>带领天协迎来了新生。他们的领导力和热情为社团注入了新的活力，开启了发展的新篇章。</p></div></div><!-- 传承与创新 --><div class="timeline-item left"style="--timeline-delay: 2s;"><div class="timeline-marker"></div><div class="timeline-content"><h3>传承与创新</h3><p>历经六任社长的不懈努力，天协不断发展壮大</p><p>每一位社长都以自己的方式为社团的前进贡献了力量，推动了天文知识的普及和社团文化的建设。</p></div></div><!-- 活动与观测 --><div class="timeline-item right"style="--timeline-delay: 2.5s;"><div class="timeline-marker"></div><div class="timeline-content"><h3>活动与观测</h3><p>我们定期组织天文观测，让成员通过协会丰富的望远镜资源深入探索宇宙奇观。</p><p>同时，我们通过举办讲座和研讨会，提高成员的专业素养，向公众传播天文学的魅力。</p></div></div><!-- 设施与资源 --><div class="timeline-item left"style="--timeline-delay: 3s;"><div class="timeline-marker"></div><div class="timeline-content"><h3>设施与资源</h3><p>协会的望远镜种类繁多，</p><p>为成员提供了观测学习的良好条件</p><p>促进了对天文的深入了解和研究。</p></div></div><!-- 未来展望 --><div class="timeline-item right"style="--timeline-delay: 3.5s;"><div class="timeline-marker"></div><div class="timeline-content"><h3>未来展望</h3><p>天协期望继续扩大影响力，与更多学校和机构合作，</p><p>举办更大规模的天文活动，激发更多人对天文学的热爱。</p></div></div><!-- 加入我们 --><div class="timeline-item left"style="--timeline-delay: 4s;"><div class="timeline-marker"></div><div class="timeline-content"><h3>加入我们</h3><p>如果您怀揣对天文的好奇与向往，欢迎加入我们。</p><p>在这里，您将与一群热情的伙伴一起，共享天文探索的旅程。</p></div></div></div></div><div class="footer"><p>联系我们: email@example.com</p></div>
</body>
</html>
1.5 events.html
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>武理天协</title><link rel="stylesheet" href="./style.css"><link rel="stylesheet" href="./首页.css"><link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"><style>.container_a {padding: 20px;margin: 15px;}.container_b {padding: 20px;margin: 15px;}.container_c {padding: 20px;margin: 15px;}.event-item_a {display: block;background-color: white;margin-bottom: 20px;padding: 20px;border: 2px solid #ccc;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);text-decoration: none;color: #f0f0f0;transition: transform 0.3s ease, box-shadow 0.3s ease;background-image: url(./images/activity.png);background-size: cover;}.event-item_a:hover {transform: scale(1.05);box-shadow: 0 10px 20px rgba(0,0,0,0.3);}.event-item_b {display: block;background-color: white;margin-bottom: 20px;padding: 20px;border: 2px solid #ccc;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);text-decoration: none;color: #f0f0f0;transition: transform 0.3s ease, box-shadow 0.3s ease;background-image: url(./images/activity.png);background-size: cover;}.event-item_b:hover {transform: scale(1.05);box-shadow: 0 10px 20px rgba(0,0,0,0.3);}.event-item_c {display: block;background-color: white;margin-bottom: 20px;padding: 20px;border: 2px solid #ccc;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);text-decoration: none;color: #f0f0f0;transition: transform 0.3s ease, box-shadow 0.3s ease;background-image: url(./images/activity.png);background-size: cover;}.event-item_c:hover {transform: scale(1.05);box-shadow: 0 10px 20px rgba(0,0,0,0.3);}.event-date {color: #666;font-size: 0.9em;}.topic-title {color:#f0f0f0;font-size: 1.2em;}</style>
</head>
<body><div class="header"><div class="header-title"><img src="./images/logo.jpg" alt="协会会徽">天文爱好者协会</div><div class="nav-bar"><a href="./首页.html"><i class="fas fa-home"></i> 首页</a><a href="./history.html"><i class="fas fa-book"></i> 协会历史</a><a href="./news.html"><i class="fas fa-newspaper"></i> 观星新闻</a><a href="./events.html"><i class="fas fa-calendar-alt"></i> 活动预告</a><a href="./astronomy.html"><i class="fas fa-star"></i> 天文科普</a><a href="./links.html"><i class="fas fa-link"></i> 链接天文</a></div></div><div class="container_a"><a href="#" class="event-item_a"><h2 class="topic-title">深空观测之旅</h2><p class="event-date">2024年6月15日</p><p>加入我们的深空观测之旅，我们将前往远离城市光污染的区域，观察那些肉眼难以捕捉的天体。</p></a></div><div class="container_b"><a href="#" class="event-item_b"><h2 class="topic-title">月食观测会</h2><p class="event-date">2024年6月15日</p><p>我们将在大学的天文台举行月食观测活动，提供专业的天文设备和讲解。</p></a></div><div class="container_c"><a href="#" class="event-item_c"><h2 class="topic-title">新星观测竞赛</h2><p class="event-date">2024年8月20日</p><p>参与我们的新星观测竞赛，挑战自己的天文知识和观测技能，有机会赢得精美奖品。</p></a></div><div class="footer"><p>联系我们: email@example.com</p></div>
</body>
</html>
1.6 astronomy.html
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>武理天协</title><link rel="stylesheet" href="./style.css"><link rel="stylesheet" href="./首页.css"><link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #f0f0f0;}.header, .footer {background-color: #202040;color: white;padding: 10px 20px;text-align: center;}.container_a {padding: 20px;margin: 15px;}.container_b {padding: 20px;margin: 15px;}.container_c {padding: 20px;margin: 15px;}.science-item_a {display: block; /* Makes the a element behave like a div */background-color: white;margin-bottom: 20px;padding: 20px;border: 2px solid #ccc;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);text-decoration: none; /* Remove underline from links */color:#f0f0f0; /* Standard text color for content */transition: transform 0.3s ease, box-shadow 0.3s ease;background-image: url(./images/msy.jpeg);background-size: cover;}.science-item_b {display: block; /* Makes the a element behave like a div */background-color: white;margin-bottom: 20px;padding: 20px;border: 2px solid #ccc;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);text-decoration: none; /* Remove underline from links */color: #f0f0f0; /* Standard text color for content */transition: transform 0.3s ease, box-shadow 0.3s ease;background-image: url(./images/sun.jpeg);background-size: cover;}.science-item_c {display: block; /* Makes the a element behave like a div */background-color: white;margin-bottom: 20px;padding: 20px;border: 2px solid #ccc;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);text-decoration: none; /* Remove underline from links */color: #f0f0f0; /* Standard text color for content */transition: transform 0.3s ease, box-shadow 0.3s ease;background-image: url(./images/moon.jpeg);background-size: cover;}.science-item_a:hover {transform: scale(1.05);box-shadow: 0 10px 20px rgba(0,0,0,0.3);}.science-item_b:hover {transform: scale(1.05);box-shadow: 0 10px 20px rgba(0,0,0,0.3);}.science-item_c:hover {transform: scale(1.05);box-shadow: 0 10px 20px rgba(0,0,0,0.3);}.topic-title {color:#f0f0f0;font-size: 1.2em;}.container_a, .container_b, .container_c {padding: 20px;margin: 5px 5px; /* 将原来的边距从15px缩短到8px */
}</style>
</head>
<body><div class="header"><div class="header-title"><img src="./images/logo.jpg" alt="协会会徽">天文爱好者协会</div><div class="nav-bar"><a href="./首页.html"><i class="fas fa-home"></i> 首页</a><a href="./history.html"><i class="fas fa-book"></i> 协会历史</a><a href="./news.html"><i class="fas fa-newspaper"></i> 观星新闻</a><a href="./events.html"><i class="fas fa-calendar-alt"></i> 活动预告</a><a href="./astronomy.html"><i class="fas fa-star"></i> 天文科普</a><a href="./links.html"><i class="fas fa-link"></i> 链接天文</a></div></div><div class="container_a"><a href="./mesy.html" class="science-item_a"><h2 class="topic-title">梅西耶天体表</h2><p>梅西耶星表是一份包含110个天体的天文目录...</p></a></div><div class="container_b"><a href="./sun.html" class="science-item_b"><h2 class="topic-title">太阳科普</h2><p>太阳是太阳系的中心天体...</p></a></div><div class="container_c"><a href="./moon.html" class="science-item_c"><h2 class="topic-title">月亮科普</h2><p>月球是地球的卫星...</p></a></div><div class="footer"><p>联系我们: email@example.com</p></div>
</body>
</html>
2. css代码
2.1 首页.css
.slider img {display: block; /* 设置图片为块级元素 */max-width: 100%; /* 设置图片的最大宽度为容器宽度的80% */height: auto; /* 设置图片高度自动，保持比例 */margin: 20px auto; /* 上下边距20px，左右自动，实现居中 */
}.welcome {text-align: center;padding: 20px;background-color: #fff;margin: 20px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}.news-events {display: flex;justify-content: space-between;margin: 20px;
}.news, .events {flex: 1;padding: 20px;background-color: #fff;margin: 10px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}.news h3, .events h3 {color: #202040;
}.news ul, .events ul {list-style-type: none;padding: 0;
}.news li, .events li {padding: 10px 0;
}.news li a, .events li a {color: #303060;text-decoration: none;
}.news li a:hover, .events li a:hover {color: #505080;
}
2.2 style.css
body, html {margin: 0;padding: 0;font-family: Arial, sans-serif;background-color: #f0f0f0;display: flex;flex-direction: column;min-height: 100vh;
}.footer {background-color: #202040;color: white;padding: 10px 20px;text-align: center;width: 100%;
}.header {background-color: #202040;color: white;padding: 8px 20px;display: flex;flex-direction: column; /* 堆叠内容 */align-items: center; /* 居中对齐子元素 */
}.header-title {font-family: 'Georgia', serif;font-size: 36px;font-weight: bold;color: #f0f8ff;margin: 0;
}.nav-bar {width: 100%; /* 使导航栏宽度与header一致 */display: flex;justify-content: center; /* 导航链接居中 */background-color: #303060;
}.header img {height: 30px; /* Adjust logo size */width: auto;margin-right: 10px; /* Space between logo and title */
}.nav-bar a {color: white;padding: 10px 15px;text-decoration: none;display: flex;align-items: center;margin: 0 5px; /* 链接之间的间隔 */transition: transform 0.3s ease, background-color 0.3s ease; /* 平滑转换效果 */
}.nav-bar a:hover {background-color: #505080; /* 悬停时的背景色 */transform: translateY(-2px); /* 向上移动5px */
}.nav-bar a i {margin-right: 8px; /* 图标和文本之间的间隔 */
}.main-content {padding: 20px;background-color: white;margin: 15px; /* 调整或移除特定的左边距 */border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);flex: 1;
}.footer {background-color: #202040;color: white;padding: 10px 20px;text-align: center;
}
 . name () 与 typeid() . raw_name () 测试数据类型的区别)
)
