PyCharm中import报红但能跑？可能是项目解释器选错了
2026/9/9 15:24:45
最近在筹备一个 Swing Dance 社区活动网站时，遇到了一个典型需求：如何为一个具有特定主题、日期和地点的线下活动，快速构建一个信息清晰、视觉吸引且便于传播的线上展示页面。这不仅仅是放几张图片和一段文字那么简单，它需要融合活动主题氛围、关键信息（CALL）、清晰的行动号召（CTA）以及必要的品牌展示。
本文将以一个虚构但非常具体的活动案例——“Main Stem by Lindy Hop SG - World Lindy Hop Day 2026 - Singapore”为例，手把手带你从零开始，使用最基础的 Web 技术（HTML, CSS, JavaScript）打造一个单页活动宣传网站。我们将从设计构思、HTML 结构搭建、CSS 样式美化（包括响应式布局）、到添加交互细节和部署准备，完整走通全流程。无论你是前端新手想做一个练手项目，还是社区组织者需要快速上线活动页面，这篇教程都能提供可直接复用的代码和设计思路。
1. 项目背景与核心需求分析
在开始写代码之前，明确我们要做什么以及为什么这么做至关重要。这能保证我们的开发过程始终围绕目标进行，而不是盲目堆砌功能。
“Main Stem by Lindy Hop SG - World Lindy Hop Day 2026 - Singapore”这个标题本身就包含了丰富的信息点，我们需要在页面上将其有效传达：
- 活动名称/主题：Main Stem (可能指一个主要活动或比赛环节)。
- 主办方：Lindy Hop SG (新加坡林迪舞组织)。
- 活动属性：World Lindy Hop Day 2026 (2026年世界林迪舞日庆祝活动)。
- 地点：Singapore。
基于此，我们可以推导出这个活动页面的核心需求：
- 强烈的视觉冲击与主题定调：页面需要体现 Lindy Hop（一种充满活力的摇摆舞）的欢乐、复古与节奏感。色彩、字体和图像需要服务于这个主题。
- 信息层级清晰：必须让访问者在3秒内知道这是什么活动、何时何地举行。关键信息（Date, Time, Location）需要被突出展示。
- 明确的行动号召：活动的目的是吸引人参加。因此，“注册/购票”按钮必须醒目，且流程清晰（例如链接到外部票务平台）。
- 主办方品牌露出：需要展示 Lindy Hop SG 的品牌标识（Logo）和社交媒体链接，建立信任感并方便关注。
- 响应式设计：活动宣传链接经常通过手机分享，页面必须在手机、平板、电脑上都有良好的浏览体验。
- 性能与可访问性：页面加载要快，代码结构要清晰，并对屏幕阅读器等辅助技术友好。
接下来，我们将把这些需求转化为具体的代码实现。
2. 环境准备与项目结构
本项目不依赖任何后端框架或复杂的构建工具，只需要一个现代浏览器和一个代码编辑器（如 VS Code, Sublime Text, 甚至记事本）。这降低了入门门槛，让焦点集中在核心前端技能上。
2.1 所需工具
- 代码编辑器：推荐 Visual Studio Code，并安装 “Live Server” 插件，以便实时预览页面效果。
- 现代浏览器：Chrome, Firefox, Edge 或 Safari，用于调试和测试。
- 图像资源：准备一张高质量的主题背景图（例如舞者跳舞的照片）和主办方的 Logo 图片。你可以使用免费图库（如 Unsplash, Pexels）寻找具有复古、舞蹈氛围的图片，并用 Figma 或 Canva 简单制作一个 Logo placeholder。
2.2 项目目录结构
在本地创建一个名为lindy-hop-event-2026的文件夹，并建立如下结构：
lindy-hop-event-2026/ │ ├── index.html # 主页面 HTML 文件 ├── style.css # 主样式文件 ├── script.js # 交互脚本文件 ├── assets/ # 资源文件夹 │ ├── images/ │ │ ├── background.jpg │ │ └── logo-lindy-hop-sg.png │ └── fonts/ # 可选，存放自定义字体 │ └── README.md # 项目说明文档（可选）这个结构清晰地将内容（HTML）、表现（CSS）、行为（JS）和资源分离，是良好的开发实践开端。
3. HTML 结构搭建：语义化与内容分层
HTML 是页面的骨架。我们使用语义化标签来构建内容，这不仅对 SEO 友好，也增强了可访问性。
打开index.html，我们从最基本的文档结构开始，逐步填充内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Main Stem by Lindy Hop SG | World Lindy Hop Day 2026 - Singapore</title> <meta name="description" content="Celebrate World Lindy Hop Day 2026 in Singapore! Join Main Stem, a spectacular swing dance event by Lindy Hop SG. Register now!"> <link rel="stylesheet" href="style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <!-- 引入 Google Fonts 营造复古氛围 --> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet"> <link rel="icon" type="image/x-icon" href="assets/images/logo-lindy-hop-sg.png"> </head> <body> <!-- 主容器，用于控制最大宽度和居中 --> <div class="container"> <!-- 头部：包含Logo和导航 --> <header class="header"> <div class="logo"> <img src="assets/images/logo-lindy-hop-sg.png" alt="Lindy Hop SG Logo" height="50"> <span class="logo-text">Lindy Hop SG</span> </div> <nav class="nav"> <a href="#about">About</a> <a href="#schedule">Schedule</a> <a href="#location">Location</a> <a href="#contact" class="btn-nav">Contact</a> </nav> </header> <!-- 主视觉/英雄区域：最重要的信息放在这里 --> <section class="hero"> <div class="hero-overlay"></div> <!-- 用于在背景图上添加深色遮罩，提高文字可读性 --> <div class="hero-content"> <h1 class="hero-tagline">Celebrate the Rhythm</h1> <h2 class="hero-title">Main Stem</h2> <p class="hero-subtitle">by Lindy Hop SG</p> <p class="hero-event">World Lindy Hop Day 2026 - Singapore</p> <div class="hero-info"> <div class="info-item"> <i class="icon">📅</i> <!-- 实际项目中可使用图标字体 --> <span>Saturday, August 2, 2026</span> </div> <div class="info-item"> <i class="icon">⏰</i> <span>7:00 PM - Midnight</span> </div> <div class="info-item"> <i class="icon">📍</i> <span>The Grand Ballroom, Singapore</span> </div> </div> <!-- 核心行动号召按钮 --> <a href="https://pretix.eu/lindyhopsg/mainstem2026/" target="_blank" class="btn-cta">Secure Your Spot Now!</a> <p class="hero-note">Early Bird tickets available until July 1.</p> </div> </section> <!-- 关于活动区域 --> <section id="about" class="section about"> <h3>About Main Stem</h3> <p>Get ready for the biggest Lindy Hop celebration in Southeast Asia! “Main Stem” is our flagship event to commemorate <strong>World Lindy Hop Day 2026</strong>. Join hundreds of swing dancers from around the region for an unforgettable night of live jazz, social dancing, performances, and competitions.</p> <p>Whether you‘re a seasoned dancer or just curious about the swing era, Main Stem offers workshops, taster classes, and a vibrant social floor where everyone is welcome.</p> </section> <!-- 日程区域 --> <section id="schedule" class="section schedule"> <h3>Event Schedule</h3> <div class="schedule-grid"> <div class="schedule-item"> <h4>7:00 PM - Doors Open & Registration</h4> <p>Check-in, grab a drink, and mingle.</p> </div> <div class="schedule-item"> <h4>7:30 PM - Beginner Taster Class</h4> <p>No experience needed! Learn your first swing moves.</p> </div> <div class="schedule-item"> <h4>8:30 PM - Live Band Performance</h4> <p>Dance to the sounds of “The Swing Cats”.</p> </div> <div class="schedule-item"> <h4>9:30 PM - Main Stem Jack & Jill Competition</h4> <p>Watch or compete in our highlight contest.</p> </div> <div class="schedule-item"> <h4>10:30 PM - Social Dancing Till Midnight</h4> <p>The floor is open for everyone to dance!</p> </div> </div> </section> <!-- 地点区域 --> <section id="location" class="section location"> <h3>Venue</h3> <p><strong>The Grand Ballroom</strong><br> 123 Swing Street, Singapore 098765</p> <div class="map-placeholder" id="map"> <!-- 这里可以嵌入一个简单的Google Maps iframe 或静态地图图片 --> <p>[Map of the venue location]</p> <!-- 示例: 一个指向Google Maps的链接 --> <a href="https://maps.google.com/?q=The+Grand+Ballroom+Singapore" target="_blank" class="btn-secondary">View on Google Maps</a> </div> </section> <!-- 页脚：联系信息和社交链接 --> <footer id="contact" class="footer"> <div class="footer-content"> <div class="footer-brand"> <img src="assets/images/logo-lindy-hop-sg.png" alt="Lindy Hop SG Logo" height="40"> <p>Bringing the Singapore swing dance community together since 2010.</p> </div> <div class="footer-social"> <h4>Follow Us</h4> <div class="social-links"> <a href="https://facebook.com/lindyhopsg" aria-label="Facebook"><i class="icon">f</i></a> <a href="https://instagram.com/lindyhopsg" aria-label="Instagram"><i class="icon">ig</i></a> <a href="https://youtube.com/c/lindyhopsg" aria-label="YouTube"><i class="icon">yt</i></a> <a href="mailto:hello@lindyhopsg.com" aria-label="Email"><i class="icon">✉️</i></a> </div> </div> <div class="footer-legal"> <p>© 2025 Lindy Hop SG. All rights reserved. | <a href="#">Privacy Policy</a></p> </div> </div> </footer> </div> <!-- 容器结束 --> <script src="script.js"></script> </body> </html>代码关键点解释：
- 语义化标签：使用
<header>,<section>,<footer>而非全是<div>。 - 视口设置：
<meta name="viewport">是响应式设计的基石。 - 标题与描述：
<title>和<meta name="description">对 SEO 至关重要，应包含核心关键词。 - 渐进增强：图标暂时用文本表情代替，后续可用图标字体或 SVG 替换。
- 链接属性：外部链接使用
target="_blank"，重要按钮使用class="btn-cta"以便样式化。 - 可访问性：为社交链接添加了
aria-label，为图片添加了alt文本。
4. CSS 样式设计：营造复古舞会氛围
现在骨架有了，我们需要为它穿上衣服。CSS 将定义页面的视觉风格。我们采用一种复古与现代结合的风格，主色调选用深蓝色、金色和白色，字体使用衬线体（Playfair Display）和非衬线体（Open Sans）的组合。
创建style.css文件，开始编写样式。
/* style.css */ /* 1. 基础重置与变量定义 */ :root { /* 配色方案 */ --color-primary: #1a237e; /* 深蓝 */ --color-secondary: #ffd700; /* 金色 */ --color-accent: #d32f2f; /* 红色，用于强调 */ --color-light: #f5f5f7; /* 浅灰背景 */ --color-dark: #121212; /* 深色文字/背景 */ --color-text: #333333; --color-text-light: #777; /* 字体 */ --font-heading: 'Playfair Display', serif; --font-body: 'Open Sans', sans-serif; /* 间距与尺寸 */ --spacing-unit: 1rem; --container-width: 1200px; --border-radius: 8px; --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* 实现锚点链接平滑滚动 */ } body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--color-text); background-color: var(--color-light); } .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 var(--spacing-unit); } /* 2. 排版 */ h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; margin-bottom: calc(var(--spacing-unit) * 1.5); } h1 { font-size: 3.5rem; } h2 { font-size: 2.8rem; } h3 { font-size: 2rem; } h4 { font-size: 1.4rem; } p { margin-bottom: var(--spacing-unit); } a { color: var(--color-primary); text-decoration: none; transition: var(--transition); } a:hover { color: var(--color-accent); } /* 3. 通用组件样式 */ .section { padding: calc(var(--spacing-unit) * 5) 0; } .section h3 { text-align: center; color: var(--color-primary); position: relative; margin-bottom: calc(var(--spacing-unit) * 3); } .section h3::after { content: ''; display: block; width: 60px; height: 3px; background-color: var(--color-secondary); margin: var(--spacing-unit) auto 0; } .btn { display: inline-block; padding: 0.9rem 2rem; border-radius: var(--border-radius); font-weight: 600; text-align: center; cursor: pointer; border: none; transition: var(--transition); } .btn-cta { background-color: var(--color-accent); color: white; font-size: 1.2rem; padding: 1.2rem 3rem; box-shadow: 0 4px 15px rgba(211, 47, 47, 0.3); } .btn-cta:hover { background-color: #b71c1c; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(211, 47, 47, 0.4); color: white; } .btn-secondary { background-color: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); } .btn-secondary:hover { background-color: var(--color-primary); color: white; } .btn-nav { padding: 0.5rem 1.5rem; border: 2px solid var(--color-secondary); border-radius: 50px; /* 胶囊形状 */ } /* 4. 头部样式 */ .header { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-unit) 0; position: sticky; top: 0; background-color: rgba(255, 255, 255, 0.95); z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--color-primary); font-size: 1.2rem; } .nav a { margin-left: calc(var(--spacing-unit) * 1.5); font-weight: 600; } /* 5. 英雄区域样式 - 最关键的部分 */ .hero { position: relative; height: 100vh; /* 占满整个视口高度 */ min-height: 600px; display: flex; align-items: center; justify-content: center; text-align: center; color: white; overflow: hidden; background: url('./assets/images/background.jpg') no-repeat center center; background-size: cover; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(26, 35, 126, 0.7), rgba(18, 18, 18, 0.8)); /* 蓝黑渐变遮罩 */ z-index: 1; } .hero-content { position: relative; z-index: 2; max-width: 800px; padding: var(--spacing-unit); } .hero-tagline { font-size: 1.5rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 1rem; color: var(--color-secondary); } .hero-title { font-size: 5rem; margin-bottom: 0.5rem; text-shadow: 2px 2px 5px rgba(0,0,0,0.5); } .hero-subtitle { font-size: 1.8rem; margin-bottom: calc(var(--spacing-unit) * 2); font-family: var(--font-body); font-weight: 400; } .hero-event { font-size: 1.3rem; margin-bottom: calc(var(--spacing-unit) * 3); opacity: 0.9; } .hero-info { display: flex; justify-content: center; flex-wrap: wrap; gap: calc(var(--spacing-unit) * 3); margin-bottom: calc(var(--spacing-unit) * 4); } .info-item { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; } .info-item .icon { font-size: 1.5rem; } .hero-note { margin-top: var(--spacing-unit); font-style: italic; opacity: 0.8; } /* 6. 日程区域样式 */ .schedule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: calc(var(--spacing-unit) * 2); margin-top: calc(var(--spacing-unit) * 3); } .schedule-item { background: white; padding: calc(var(--spacing-unit) * 2); border-radius: var(--border-radius); box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-left: 4px solid var(--color-secondary); transition: var(--transition); } .schedule-item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); } /* 7. 页脚样式 */ .footer { background-color: var(--color-dark); color: white; padding: calc(var(--spacing-unit) * 4) 0 calc(var(--spacing-unit) * 2); } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: calc(var(--spacing-unit) * 4); margin-bottom: calc(var(--spacing-unit) * 3); } .footer-brand p { color: #ccc; margin-top: var(--spacing-unit); } .footer-social h4 { color: var(--color-secondary); } .social-links { display: flex; gap: var(--spacing-unit); margin-top: var(--spacing-unit); } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: rgba(255,255,255,0.1); border-radius: 50%; color: white; font-weight: bold; } .social-links a:hover { background-color: var(--color-secondary); color: var(--color-dark); } .footer-legal { text-align: center; padding-top: calc(var(--spacing-unit) * 2); border-top: 1px solid #444; color: #aaa; font-size: 0.9rem; } .footer-legal a { color: #ccc; } /* 8. 响应式设计 - 移动端适配 */ @media (max-width: 768px) { :root { font-size: 14px; } h1 { font-size: 2.8rem; } h2 { font-size: 2.2rem; } .hero-title { font-size: 3.5rem; } .header { flex-direction: column; padding: calc(var(--spacing-unit) * 1.5) 0; } .nav { margin-top: var(--spacing-unit); } .nav a { margin: 0 calc(var(--spacing-unit) * 0.75); } .hero-info { flex-direction: column; gap: calc(var(--spacing-unit) * 1.5); } .schedule-grid { grid-template-columns: 1fr; } .footer-content { grid-template-columns: 1fr; text-align: center; } .social-links { justify-content: center; } }样式设计要点：
- CSS 变量：在
:root中定义颜色、字体等，便于全局管理和统一修改。 - 移动优先：基础样式针对移动端，然后使用
@media (min-width: ...)或(max-width: ...)来适配更大屏幕。本例中在最后写了移动端覆盖样式。 - Flexbox 与 Grid：分别用于一维布局（头部、信息项）和二维布局（日程网格、页脚网格），这是实现现代响应式布局的核心。
- 视觉层次：通过字体大小、颜色、阴影和间距来区分信息的重要性。英雄区域的文字阴影和遮罩确保了在复杂背景图上的可读性。
- 交互反馈：为链接和按钮添加了
:hover状态，提升用户体验。
5. 添加交互与动态效果
一个静态页面已经足够好，但一些细微的交互能极大提升质感。我们在script.js中添加一些简单的 JavaScript。
// script.js document.addEventListener('DOMContentLoaded', function() { console.log('Main Stem 2026 page loaded!'); // 1. 平滑滚动导航（增强，如果CSS的scroll-behavior不被支持） const navLinks = document.querySelectorAll('nav a[href^="#"]'); navLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); if(targetId === '#') return; const targetElement = document.querySelector(targetId); if(targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, // 减去头部高度 behavior: 'smooth' }); } }); }); // 2. 头部滚动效果：滚动时给头部添加一个更深的背景 const header = document.querySelector('.header'); window.addEventListener('scroll', function() { if (window.scrollY > 50) { header.style.backgroundColor = 'rgba(255, 255, 255, 0.98)'; header.style.boxShadow = '0 5px 20px rgba(0,0,0,0.1)'; } else { header.style.backgroundColor = 'rgba(255, 255, 255, 0.95)'; header.style.boxShadow = '0 2px 10px rgba(0,0,0,0.05)'; } }); // 3. 简单的倒计时功能（针对活动日期） function updateCountdown() { const eventDate = new Date('August 2, 2026 19:00:00').getTime(); const now = new Date().getTime(); const timeLeft = eventDate - now; if (timeLeft < 0) { document.getElementById('countdown-timer').innerHTML = "Event has started!"; return; } const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); // 在HTML中需要有一个id为'countdown-timer'的元素 const countdownElement = document.getElementById('countdown-timer'); if(countdownElement) { countdownElement.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`; } } // 创建并插入倒计时元素到英雄区域（可选功能） const heroContent = document.querySelector('.hero-content'); if(heroContent && !document.getElementById('countdown-timer')) { const countdownDiv = document.createElement('div'); countdownDiv.id = 'countdown-timer'; countdownDiv.style.marginTop = '20px'; countdownDiv.style.fontSize = '1.5rem'; countdownDiv.style.fontWeight = 'bold'; countdownDiv.style.color = 'var(--color-secondary)'; // 插入到注册按钮之后 const ctaButton = document.querySelector('.btn-cta'); if(ctaButton) { ctaButton.insertAdjacentElement('afterend', countdownDiv); } // 初始化并每秒更新 updateCountdown(); setInterval(updateCountdown, 1000); } // 4. 日程项点击展开详情（简单示例） const scheduleItems = document.querySelectorAll('.schedule-item'); scheduleItems.forEach(item => { item.addEventListener('click', function() { this.classList.toggle('active'); // 可以配合CSS定义 .schedule-item.active 的样式 console.log('Clicked schedule item:', this.querySelector('h4').textContent); }); }); });交互功能说明：
- 平滑滚动：即使浏览器不支持 CSS
scroll-behavior，JS 也能提供备用方案。 - 动态头部：滚动时改变头部背景，增强视觉层次感。
- 倒计时：这是一个很好的“紧迫感”营造工具，能促进用户立即行动。代码中包含了创建动态元素和定时更新的逻辑。
- 日程交互：为日程项添加了点击事件，可以作为未来展示更多详情（如讲师信息）的入口。
6. 常见问题与排查思路
在开发或部署此类静态页面时，你可能会遇到以下问题：
| 问题现象 | 可能原因 | 解决思路 |
|---|---|---|
| 页面布局混乱，元素堆叠或错位 | 1. CSS 文件未正确链接。 2. 浏览器缓存了旧的样式。 3. box-sizing: border-box;未全局应用。4. Flex/Grid 容器属性设置错误。 | 1. 检查index.html中<link>标签的href路径是否正确。2. 使用浏览器开发者工具（F12）的“元素”和“样式”面板，检查问题元素应用的CSS规则。 3. 强制刷新页面（Ctrl+F5）。 4. 确认父容器的 display: flex/grid是否生效。 |
| 背景图片不显示 | 1. 图片路径错误。 2. 图片文件名或扩展名大小写不匹配（尤其在Linux服务器）。 3. 图片文件损坏或格式不被支持。 | 1. 检查style.css中background: url()的路径。使用相对路径./assets/...时，起点是 CSS 文件所在目录。2. 直接在浏览器地址栏输入图片完整路径（如 http://localhost:5500/assets/images/background.jpg）测试是否能访问。3. 尝试换一张简单的图片（如纯色PNG）测试。 |
| 响应式布局在手机上不生效 | 1. 缺少<meta name="viewport">标签。2. 媒体查询（ @media）的条件写错或被更高优先级样式覆盖。3. 宽度单位使用了绝对的 px，而非相对的%,vw,rem。 | 1. 确保 HTML 头部有<meta name="viewport" content="width=device-width, initial-scale=1.0">。2. 使用开发者工具的“设备工具栏”模拟手机，检查媒体查询内的样式是否被应用。 3. 检查覆盖样式的选择器优先级。 |
| JavaScript 功能无效（如点击无反应） | 1. JS 文件未链接或路径错误。 2. 代码中存在语法错误，导致后续代码不执行。 3. 操作的元素在 JS 执行时尚未加载到DOM中。 4. 事件监听器绑定在了不存在的元素上。 | 1. 检查控制台（Console）是否有红色报错信息。 2. 确保 JS 文件在 <body>末尾引入，或使用DOMContentLoaded事件包装代码。3. 使用 console.log在关键位置打印信息，调试执行流程。4. 确认选择器（如 document.querySelector('.btn-cta')）能正确找到元素。 |
| 字体不生效 | 1. Google Fonts 链接被网络拦截。 2. 字体名称在 CSS 中拼写错误。 | 1. 检查网络连接，或考虑将字体文件下载到本地assets/fonts/并使用@font-face引入。2. 核对 font-family属性值与链接中定义的字体族名是否一致。 |
7. 最佳实践与项目扩展建议
一个基础页面完成后，可以考虑以下优化方向，使其更专业、更健壮：
性能优化：
- 图片优化：使用工具（如 Squoosh, TinyPNG）压缩
background.jpg和 Logo，在不损失质量的前提下减小文件体积。考虑使用 WebP 格式（需提供 JPEG/PNG 回退）。 - 代码分割：对于更大的项目，可以考虑将 CSS 和 JS 按需加载。
- 字体子集：如果使用了中文字体或大量字符的英文字体，生成仅包含所需字符的子集文件。
- 图片优化：使用工具（如 Squoosh, TinyPNG）压缩
可访问性（A11y）增强：
- 颜色对比度：使用工具检查文本与背景色的对比度是否达到 WCAG AA 标准（至少 4.5:1）。
- 键盘导航：确保所有交互元素（链接、按钮）都可以通过 Tab 键聚焦，并有清晰的焦点样式（
:focus）。 - ARIA 属性：为复杂的自定义组件（如倒计时）添加适当的
role和aria-live属性。
SEO 与社交媒体优化：
- Open Graph 标签：在
<head>中添加 Facebook、Twitter 等社交平台专用的元标签，确保分享链接时显示正确的标题、描述和缩略图。<meta property="og:title" content="Main Stem by Lindy Hop SG | World Lindy Hop Day 2026"> <meta property="og:description" content="Celebrate World Lindy Hop Day 2026 in Singapore!"> <meta property="og:image" content="https://yourdomain.com/assets/images/social-preview.jpg"> <meta property="og:url" content="https://yourdomain.com"> - 结构化数据：使用 JSON-LD 格式添加 Event 结构化数据，帮助搜索引擎更好地理解页面内容，并可能在搜索结果中显示丰富摘要（如活动时间、地点）。
- Open Graph 标签：在
部署与托管：
- 静态站点托管：这个项目非常适合部署在 GitHub Pages, Netlify, Vercel 等免费平台上。只需将代码推送到 Git 仓库，并按照平台指引连接即可。
- 自定义域名：购买一个简短的域名（如
mainstem2026.sg或lindyhopsg.com/event）并配置到托管平台，看起来更专业。 - HTTPS：确保托管平台提供免费的 SSL 证书，启用 HTTPS。
功能扩展：
- 邮件订阅：集成 Mailchimp 或 ConvertKit 的表单，让感兴趣的用户留下邮箱。
- 图片画廊：添加一个活动往届精彩照片的展示区。
- 讲师/评委介绍：为活动嘉宾创建独立的介绍卡片。
- 简单的后台管理（进阶）：如果活动信息需要频繁更新，可以考虑使用静态站点生成器（如 Jekyll, Hugo）搭配 CMS（如 Forestry, Netlify CMS）来管理内容。
通过以上步骤，我们完成了一个从设计到实现、从基础到进阶的完整活动宣传页开发流程。这个项目不仅是一个可用的成品，更是一个学习现代前端基础技术（语义化 HTML、CSS3、响应式设计、基础 JS）的绝佳范例。你可以随意修改内容、颜色和图片，用于你自己的下一个活动。