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;
}