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 () 測試數據類型的區別)
)
