diff --git a/about.html b/about.html new file mode 100644 index 0000000..0887298 --- /dev/null +++ b/about.html @@ -0,0 +1,265 @@ + + + + + + + 计算机协会 - 协会介绍 + + + + + +
+
+ +
+
+ + +
+ + +
+ 暗黑模式 + +
+
+ + +
+
+

协会介绍

+

探索计算机协会的使命、愿景与价值观，了解我们的组织架构和辉煌历程

+
+
+ + +
+
+

协会简介

+

计算机协会成立于2010年，是由一群热爱计算机技术的在校学生自发组织的学术性团体，致力于推动校园计算机文化发展和技术创新。

+ +
+
+ 协会活动照片 +
+
+

我们的使命

+

计算机协会以"技术改变生活，创新引领未来"为宗旨，致力于为全校师生提供一个学习、交流和实践计算机技术的平台。

+

我们定期举办技术讲座、编程竞赛、项目开发等活动，帮助会员提升专业技能，培养创新思维，为未来的职业发展打下坚实基础。

+

协会下设技术部、宣传部、外联部和项目管理部四个部门，各部门分工协作，共同推动协会发展。

+ 加入我们 +
+
+
+
+ + +
+
+

组织架构

+

计算机协会采用扁平化管理结构，各部门分工明确，协同合作，确保协会高效运转。

+ +
+
+ +
+

指导老师

+

提供专业指导与支持

+
+
+ +
+ +
+ +
+

会长

+

负责协会整体规划与决策

+
+ +
+

副会长

+

协助会长管理协会事务

+
+
+ +
+ +
+ +
+

软件部

+

负责软件开发与技术研究

+
+
+

硬件部

+

负责硬件开发与维护

+
+
+

秘书处

+

负责日常事务与协调工作

+
+
+
+
+
+ + +
+
+

发展历程

+

回顾计算机协会从创立至今的重要里程碑，见证我们的成长与蜕变。

+ +
+
+
+
2010年9月
+

计算机协会成立

+

由5名计算机爱好者发起，正式成立计算机协会，首批会员20人。

+
+
+ +
+
+
2012年3月
+

首届编程大赛

+

成功举办校内首届编程大赛，吸引100余名学生参与。

+
+
+ +
+
+
2015年10月
+

开源项目启动

+

首个开源项目"校园助手"在GitHub上线，获得100+星标。

+
+
+ +
+
+
2018年5月
+

校企合作

+

与3家知名IT企业建立合作关系，提供实习机会。

+
+
+ +
+
+
2020年12月
+

会员突破500人

+

协会规模扩大，成为校内最具影响力的学术社团之一。

+
+
+ +
+
+
2023年至今
+

持续创新

+

开展AI、区块链等前沿技术研究，培养创新型人才。

+
+
+
+
+
+ + +
+
+

荣誉展示

+

计算机协会成员在各类竞赛和项目中取得的优异成绩，是我们共同的骄傲。

+ +
+
+
+ 全国大学生程序设计竞赛 +
+
+
2022年11月
+

全国大学生程序设计竞赛

+

协会代表队获得全国一等奖，创造了学校在该赛事中的最佳成绩。

+
+
+ +
+
+ 最佳学生社团 +
+
+
2021年12月
+

最佳学生社团

+

连续三年荣获学校"最佳学生社团"称号，表彰协会的突出贡献。

+
+
+ +
+
+ 开源社区贡献奖 +
+
+
2023年3月
+

开源社区贡献奖

+

协会开源项目获得国内知名开源社区颁发的"年度最佳贡献奖"。

+
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..750eeec --- /dev/null +++ b/css/style.css @@ -0,0 +1,798 @@ +/* 全局样式 - 默认暗黑模式 */ +:root { + --primary-color: #0a192f; + --secondary-color: #64ffda; + --text-primary: #ccd6f6; + --text-secondary: #8892b0; + --white: #e6f1ff; + --bg-color: #0a192f; + --card-bg: rgba(10, 25, 47, 0.8); + --footer-bg: #020c1b; + --section-bg: rgba(100, 255, 218, 0.03); + --header-bg: rgba(10, 25, 47, 0.9); +} + +/* 亮色模式 */ +[data-theme="light"] { + --primary-color: #f8f9fa; + --secondary-color: #007bff; + --text-primary: #212529; + --text-secondary: #495057; + --white: #ffffff; + --bg-color: #f8f9fa; + --card-bg: rgba(255, 255, 255, 0.9); + --footer-bg: #e9ecef; + --section-bg: rgba(0, 123, 255, 0.03); + --header-bg: rgba(248, 249, 250, 0.9); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + transition: background-color 0.3s ease, color 0.3s ease; +} + +body { + background-color: var(--bg-color); + color: var(--text-primary); + line-height: 1.6; +} + +a { + text-decoration: none; + color: var(--secondary-color); + transition: all 0.3s ease; +} + +a:hover { + color: var(--white); +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.btn { + display: inline-block; + padding: 12px 28px; + background: transparent; + color: var(--secondary-color); + border: 1px solid var(--secondary-color); + border-radius: 4px; + font-size: 16px; + font-weight: 500; + cursor: pointer; + transition: all 0.3s ease; +} + +.btn:hover { + background: rgba(100, 255, 218, 0.1); + transform: translateY(-3px); +} + +[data-theme="light"] .btn:hover { + background: rgba(0, 123, 255, 0.1); +} + +/* 导航栏 */ +header { + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: var(--header-bg); + backdrop-filter: blur(10px); + z-index: 1000; + padding: 20px 0; +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-size: 24px; + font-weight: 700; + color: var(--secondary-color); +} + +.nav-links { + display: flex; + list-style: none; + align-items: center; +} + +.nav-links li { + margin-left: 30px; +} + +.nav-links a { + color: var(--text-primary); + font-size: 16px; + font-weight: 500; +} + +.nav-links a:hover { + color: var(--secondary-color); +} + +.logo img { + width: auto; + height: 50px; +} + +/* 汉堡菜单按钮 */ +.hamburger { + display: none; + cursor: pointer; + width: 30px; + height: 21px; + position: relative; + z-index: 1001; + background: none; + border: none; + padding: 0; +} + +.hamburger span { + display: block; + position: absolute; + height: 3px; + width: 100%; + background: var(--text-primary); + border-radius: 3px; + opacity: 1; + left: 0; + transform: rotate(0deg); + transition: .25s ease-in-out; +} + +.hamburger span:nth-child(1) { + top: 0; +} + +.hamburger span:nth-child(2), +.hamburger span:nth-child(3) { + top: 9px; +} + +.hamburger span:nth-child(4) { + top: 18px; +} + +.hamburger.open span:nth-child(1) { + top: 9px; + width: 0%; + left: 50%; +} + +.hamburger.open span:nth-child(2) { + transform: rotate(45deg); +} + +.hamburger.open span:nth-child(3) { + transform: rotate(-45deg); +} + +.hamburger.open span:nth-child(4) { + top: 9px; + width: 0%; + left: 50%; +} +/* 主题切换开关 */ +.theme-switch { + position: relative; + display: inline-block; + width: 60px; + height: 30px; + margin-left: 20px; +} + +.theme-switch input { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + transition: .4s; + border-radius: 34px; +} + +.slider:before { + position: absolute; + content: ""; + height: 22px; + width: 22px; + left: 4px; + bottom: 4px; + background-color: white; + transition: .4s; + border-radius: 50%; +} + +input:checked+.slider { + background-color: var(--secondary-color); +} + +input:checked+.slider:before { + transform: translateX(30px); +} + +.slider .icon { + position: absolute; + top: 50%; + transform: translateY(-50%); + font-size: 14px; + color: white; +} + +.slider .moon { + left: 8px; +} + +.slider .sun { + right: 8px; +} + +/* 移动端导航菜单 */ +.mobile-nav { + position: fixed; + top: 0; + right: -100%; + width: 80%; + max-width: 300px; + height: 100vh; + background: var(--header-bg); + backdrop-filter: blur(10px); + z-index: 1000; + padding: 80px 30px 30px; + transition: right 0.3s ease; + overflow-y: auto; +} + +.mobile-nav.open { + right: 0; +} + +.mobile-nav-links { + list-style: none; +} + +.mobile-nav-links li { + margin-bottom: 20px; +} + +.mobile-nav-links a { + color: var(--text-primary); + font-size: 18px; + display: block; + padding: 10px 0; +} + +.mobile-nav-links a:hover { + color: var(--secondary-color); +} + +.mobile-theme-toggle { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 30px; + padding-top: 20px; + border-top: 1px solid var(--text-secondary); +} + +.mobile-theme-toggle span { + color: var(--text-primary); + font-size: 16px; +} + +/* 页面标题区域 */ +.page-header { + padding: 150px 0 80px; + text-align: center; + background: linear-gradient(to right, rgba(10, 25, 47, 0.9), rgba(10, 25, 47, 0.7)); + position: relative; + overflow: hidden; +} + +[data-theme="light"] .page-header { + background: linear-gradient(to right, rgba(248, 249, 250, 0.9), rgba(248, 249, 250, 0.7)); +} + +.page-header::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('images/about-bg.jpg') center/cover no-repeat; + z-index: -1; + opacity: 0.2; +} + +.page-title { + font-size: 48px; + margin-bottom: 20px; + color: var(--secondary-color); +} + +.page-subtitle { + font-size: 20px; + color: var(--text-secondary); + max-width: 800px; + margin: 0 auto; +} + +/* 内容区域 */ +.content-section { + padding: 80px 0; +} + +.section-title { + text-align: center; + font-size: 36px; + margin-bottom: 60px; + position: relative; +} + +.section-title::after { + content: ''; + display: block; + width: 80px; + height: 3px; + background: var(--secondary-color); + margin: 15px auto 0; +} + +.section-description { + max-width: 800px; + margin: 0 auto 50px; + text-align: center; + color: var(--text-secondary); + font-size: 18px; +} + +/* 协会简介 */ +.about-intro { + display: flex; + align-items: center; + gap: 50px; + margin-bottom: 60px; +} + +.about-image { + flex: 1; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); +} + +.about-image img { + width: 100%; + height: auto; + display: block; + transition: transform 0.5s ease; +} + +.about-image:hover img { + transform: scale(1.05); +} + +.about-text { + flex: 1; +} + +.about-text h3 { + font-size: 28px; + margin-bottom: 20px; + color: var(--secondary-color); +} + +.about-text p { + margin-bottom: 15px; + line-height: 1.8; +} + +/* 组织架构 */ +.org-structure { + background: var(--section-bg); + padding: 80px 0; +} + +.org-chart { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + margin-top: 50px; +} + +.org-level { + display: flex; + justify-content: center; + align-items: flex-start; + width: 100%; + position: relative; + margin-bottom: 20px; +} + +.org-node { + background: var(--card-bg); + padding: 20px; + border-radius: 8px; + text-align: center; + width: 200px; + margin: 0 15px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); + position: relative; + z-index: 1; +} + +.org-node h4 { + color: var(--secondary-color); + margin-bottom: 10px; + font-size: 18px; +} + +.org-node p { + color: var(--text-secondary); + font-size: 14px; + margin: 0; +} + +/* 垂直连接线 */ +.org-connection.vertical { + width: 2px; + height: 30px; + background: var(--secondary-color); + margin: 0 auto; + position: relative; +} + +/* 水平连接线（用于副会长到各部门） */ +.org-connections.horizontal { + display: flex; + justify-content: center; + width: 100%; + position: relative; + height: 30px; + margin: 10px 0; +} + +.org-connections.horizontal .org-connection { + flex: 1; + max-width: 100px; + height: 2px; + background: var(--secondary-color); + position: relative; + margin: 0 5px; +} + +/* 连接线箭头 */ +.org-connection::after { + content: ''; + position: absolute; + width: 8px; + height: 8px; + border-right: 2px solid var(--secondary-color); + border-bottom: 2px solid var(--secondary-color); + transform: rotate(45deg); + bottom: -4px; + right: 0; +} + +.org-connection.vertical::after { + right: -3px; + bottom: 0; + transform: rotate(45deg); +} + +/* 响应式设计 - 小屏幕改为垂直排列 */ +@media (max-width: 768px) { + .org-level { + flex-direction: column; + align-items: center; + margin-bottom: 0; + } + + .org-node { + margin: 0 0 30px 0; + } + + .org-connection.vertical { + height: 20px; + width: 2px; + } + + .org-connections.horizontal { + display: none; + } + + /* 移动端连接线 */ + .org-node::after { + content: ''; + position: absolute; + bottom: -15px; + left: 50%; + transform: translateX(-50%); + width: 2px; + height: 15px; + background: var(--secondary-color); + } + + .org-node:last-child::after { + display: none; + } +} + + +/* 发展历程 */ +.timeline { + position: relative; + max-width: 1000px; + margin: 0 auto; + padding: 40px 0; +} + +.timeline::before { + content: ''; + position: absolute; + top: 0; + left: 50%; + width: 2px; + height: 100%; + background: var(--secondary-color); + transform: translateX(-50%); +} + +.timeline-item { + position: relative; + margin-bottom: 50px; + width: 100%; +} + +.timeline-item:nth-child(odd) { + padding-right: 50%; + text-align: right; +} + +.timeline-item:nth-child(even) { + padding-left: 50%; + text-align: left; +} + +.timeline-content { + background: var(--card-bg); + padding: 20px; + border-radius: 8px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); + position: relative; +} + +.timeline-content::before { + content: ''; + position: absolute; + width: 20px; + height: 20px; + background: var(--secondary-color); + border-radius: 50%; + top: 20px; +} + +.timeline-item:nth-child(odd) .timeline-content::before { + right: -60px; +} + +.timeline-item:nth-child(even) .timeline-content::before { + left: -60px; +} + +.timeline-date { + color: var(--secondary-color); + font-weight: bold; + margin-bottom: 10px; +} + +.timeline-title { + font-size: 20px; + margin-bottom: 10px; +} + +.timeline-desc { + color: var(--text-secondary); +} + +/* 荣誉展示 */ +.honors { + background: var(--section-bg); + padding: 80px 0; +} + +.honors-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 30px; + margin-top: 50px; +} + +.honor-card { + background: var(--card-bg); + border-radius: 8px; + overflow: hidden; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; +} + +.honor-card:hover { + transform: translateY(-10px); +} + +.honor-image { + height: 200px; + overflow: hidden; +} + +.honor-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s ease; +} + +.honor-card:hover .honor-image img { + transform: scale(1.1); +} + +.honor-content { + padding: 20px; +} + +.honor-title { + font-size: 20px; + margin-bottom: 10px; +} + +.honor-date { + color: var(--secondary-color); + font-size: 14px; + margin-bottom: 10px; +} + +.honor-desc { + color: var(--text-secondary); + font-size: 15px; +} + +/* 页脚 */ +footer { + background: var(--footer-bg); + padding: 50px 0 20px; + text-align: center; +} + +.footer-links { + display: flex; + justify-content: center; + list-style: none; + margin-bottom: 30px; +} + +.footer-links li { + margin: 0 15px; +} + +.copyright { + color: var(--text-secondary); + font-size: 14px; +} + +/* 响应式设计 */ +@media (max-width: 992px) { + .about-intro { + flex-direction: column; + } + + .about-image { + width: 100%; + } + + .nav-links { + display: none; + } + + .hamburger { + display: block; + } +} + +@media (max-width: 768px) { + .page-title { + font-size: 36px; + } + + .page-subtitle { + font-size: 16px; + } + + .section-title { + font-size: 28px; + } + + .timeline::before { + left: 30px; + } + + .timeline-item:nth-child(odd), + .timeline-item:nth-child(even) { + padding: 0 0 0 70px; + text-align: left; + } + + .timeline-item:nth-child(odd) .timeline-content::before, + .timeline-item:nth-child(even) .timeline-content::before { + left: 20px; + } + + .honors-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 480px) { + .page-title { + font-size: 32px; + } + + .theme-switch { + width: 50px; + height: 25px; + margin-left: 15px; + } + + .slider:before { + height: 18px; + width: 18px; + bottom: 3.5px; + left: 3.5px; + } + + input:checked+.slider:before { + transform: translateX(25px); + } + + .slider .icon { + font-size: 12px; + } +} + +.close-btn { + position: absolute; + top: 20px; + right: 20px; + background: none; + border: none; + color: var(--text-primary); + font-size: 24px; + cursor: pointer; + z-index: 1001; +} + +.close-btn:hover { + color: var(--secondary-color); +} \ No newline at end of file diff --git a/js/about.js b/js/about.js new file mode 100644 index 0000000..b0d8c0f --- /dev/null +++ b/js/about.js @@ -0,0 +1,149 @@ +// 获取主题切换开关元素 +const themeToggle = document.getElementById('themeToggle'); +const mobileThemeToggle = document.getElementById('mobileThemeToggle'); + +// 获取 logo 图片元素 +const logoImage = document.getElementById('logoImage'); + +// 根据主题模式更新 logo 图片 +function updateLogoImage() { + const currentTheme = document.documentElement.getAttribute('data-theme'); + if (currentTheme === 'light') { + logoImage.src = './images/skx-b.png'; // 亮色模式图片 + } else { + logoImage.src = './images/skx-w.png'; // 暗色模式图片 + } +} + +// 初始化时设置 logo 图片 +updateLogoImage(); + +// 平滑滚动 +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); +}); + +// 导航栏滚动效果 +window.addEventListener('scroll', function () { + const header = document.querySelector('header'); + if (window.scrollY > 50) { + header.style.boxShadow = '0 5px 20px rgba(0, 0, 0, 0.1)'; + } else { + header.style.boxShadow = 'none'; + } +}); + +// 汉堡菜单功能 +const hamburger = document.getElementById('hamburger'); +const mobileNav = document.getElementById('mobileNav'); + +hamburger.addEventListener('click', function () { + this.classList.toggle('open'); + mobileNav.classList.toggle('open'); + + // 切换body的overflow以防止页面滚动 + if (mobileNav.classList.contains('open')) { + document.body.style.overflow = 'hidden'; + } else { + document.body.style.overflow = ''; + } +}); + +// 关闭移动菜单当点击菜单项 +document.querySelectorAll('.mobile-nav-links a').forEach(link => { + link.addEventListener('click', function () { + hamburger.classList.remove('open'); + mobileNav.classList.remove('open'); + document.body.style.overflow = ''; + }); +}); + +const closeBtn = document.getElementById('closeBtn'); + +closeBtn.addEventListener('click', function () { + hamburger.classList.remove('open'); + mobileNav.classList.remove('open'); + document.body.style.overflow = ''; +}); + +// 检查本地存储中的主题偏好 +const currentTheme = localStorage.getItem('theme') || 'dark'; +document.documentElement.setAttribute('data-theme', currentTheme); +updateThemeToggle(currentTheme); +updateLogoImage(); // 初始化时也更新logo图片 + +// 切换主题 +function toggleTheme() { + const currentTheme = document.documentElement.getAttribute('data-theme'); + const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; + + document.documentElement.setAttribute('data-theme', newTheme); + localStorage.setItem('theme', newTheme); + updateThemeToggle(newTheme); + updateLogoImage(); // 主题切换时更新logo图片 +} + +// 更新主题切换状态 +function updateThemeToggle(theme) { + const isLight = theme === 'light'; + themeToggle.checked = isLight; + mobileThemeToggle.checked = isLight; +} + +// 添加事件监听器 +themeToggle.addEventListener('change', toggleTheme); +mobileThemeToggle.addEventListener('change', toggleTheme); + +// 时间轴动画效果 +function animateTimeline() { + const timelineItems = document.querySelectorAll('.timeline-item'); + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); + }, { threshold: 0.1 }); + + timelineItems.forEach((item, index) => { + item.style.opacity = '0'; + item.style.transform = 'translateY(20px)'; + item.style.transition = `opacity 0.5s ease ${index * 0.1}s, transform 0.5s ease ${index * 0.1}s`; + observer.observe(item); + }); +} + +// 荣誉卡片动画效果 +function animateHonorCards() { + const honorCards = document.querySelectorAll('.honor-card'); + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); + }, { threshold: 0.1 }); + + honorCards.forEach((card, index) => { + card.style.opacity = '0'; + card.style.transform = 'translateY(20px)'; + card.style.transition = `opacity 0.5s ease ${index * 0.1}s, transform 0.5s ease ${index * 0.1}s`; + observer.observe(card); + }); +} + +// 页面加载完成后执行动画 +document.addEventListener('DOMContentLoaded', function() { + animateTimeline(); + animateHonorCards(); +}); \ No newline at end of file diff --git a/加入我们/index.html b/加入我们/index.html new file mode 100644 index 0000000..666d4a7 --- /dev/null +++ b/加入我们/index.html @@ -0,0 +1,861 @@ + + + + + + + + 计算机协会 - 加入我们 + + + + + + +
+
+ +
+
+ + +
+ + +
+ 暗黑模式 + +
+
+ + +
+
+
+

加入我们的团队

+

成为计算机协会的一员

+

+ 无论你是技术大牛还是初学者，只要对计算机技术充满热情，我们都欢迎你的加入。 + 在这里，你将有机会参与实际项目，提升技能，结识志同道合的伙伴。 +

+ 立即申请 +
+
+
+ + +
+
+

我们的部门

+
+
+
+

开发部

+

+ 负责协会各类软件项目的开发与维护，包括网站、小程序、APP等。 + 我们使用前沿技术栈，实践敏捷开发流程。 +

+

技术方向：Web开发、移动开发、桌面应用

+
+
+
+

网络安全部

+

+ 研究网络安全技术，组织CTF比赛，进行安全漏洞挖掘与修复。 + 保护协会系统和成员信息安全。 +

+

技术方向：渗透测试、逆向工程、密码学

+
+
+
+

人工智能部

+

+ 探索机器学习、深度学习等AI技术，参与各类AI竞赛， + 开发智能应用解决方案。 +

+

技术方向：机器学习、计算机视觉、自然语言处理

+
+
+
+

游戏开发部

+

+ 从游戏设计到开发实现，创造有趣的游戏作品。 + 学习Unity、Unreal等游戏引擎的使用。 +

+

技术方向：游戏设计、图形编程、物理引擎

+
+
+
+

数据科学部

+

+ 研究数据分析与可视化技术，处理大规模数据集， + 为决策提供数据支持。 +

+

技术方向：数据分析、数据挖掘、可视化

+
+
+
+

运营部

+

+ 负责协会日常运营管理，组织活动策划与执行， + 协调各部门工作，维护协会形象。 +

+

工作内容：活动策划、宣传推广、外联沟通

+
+
+
+
+ + +
+
+

申请加入

+
+ + + +
+

+ 提交申请后，我们将在3个工作日内通过邮件或电话与你联系。
+ 如有任何问题，请联系：holytreasure@163.com +

+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/加入我们/navbar.css b/加入我们/navbar.css new file mode 100644 index 0000000..1bde181 --- /dev/null +++ b/加入我们/navbar.css @@ -0,0 +1,45 @@ +/* navbar.css */ +.navbar { + background-color: #333; + padding: 1rem; + } + + .navbar-container { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1200px; + margin: 0 auto; + } + + .navbar-logo { + color: white; + font-weight: bold; + text-decoration: none; + } + + .navbar-menu { + display: flex; + list-style: none; + gap: 1rem; + } + + .navbar-link { + color: white; + text-decoration: none; + } + + .navbar-toggle { + display: none; + cursor: pointer; + } + + /* 移动端适配 */ + @media (max-width: 768px) { + .navbar-menu { + display: none; + } + .navbar-toggle { + display: block; + } + } \ No newline at end of file diff --git a/加入我们/navbar.html b/加入我们/navbar.html new file mode 100644 index 0000000..d11b77e --- /dev/null +++ b/加入我们/navbar.html @@ -0,0 +1,14 @@ + + \ No newline at end of file diff --git a/加入我们/navbar.js b/加入我们/navbar.js new file mode 100644 index 0000000..387c08c --- /dev/null +++ b/加入我们/navbar.js @@ -0,0 +1,9 @@ +// navbar.js +document.addEventListener('DOMContentLoaded', function() { + const toggleButton = document.querySelector('.navbar-toggle'); + const menu = document.querySelector('.navbar-menu'); + + toggleButton.addEventListener('click', function() { + menu.style.display = menu.style.display === 'flex' ? 'none' : 'flex'; + }); + }); \ No newline at end of file