RWKV7-G0a3 7.2B发布：迄今最强RNN，高并发vibe coding
2025 年 10 月 30 日，RWKV7-G0a3 7.2B 推理模型开源发布。它基于 RWKV7-G0a2 7.2B 继续训练高质量数据，显著提升能力。 RWKV 模型名称的 G1/G1a/G1a2/G0a3 等字段是训练数据的版本，数据质量 G#a3 > G#a2 > G#a > G#，数据数量 G1 > G0。简单规则：同一参数选择最新的模型，效果最好。 模型性能评估 MMLU & MMLU PRO 评估模型在多学科知识的综合能力（MMLU PRO 难度比 MMLU 更高）。 GSM8K 评估模型在中学难度数学应用题的推理能力。 MATH500 测试模型在更难数学问题的解题能力。 CEval 以多行业真实试题，评估模型中文理解和专业知识。 模型实战 G0a3 模型加入更多数据，显著提升 vibe coding 能力。回顾上版模型：RWKV7-G0a2 7.2B发布：纯RNN也能vibe coding 代码推荐解码参数：Temperature=1，Top_P=0.3，Presence Penalty=1，Frequency Penalty=0.1，decay=0.99 我们使用上次测试的 prompt：请生成一个蓝紫色主题（主色调为#6A5ACD，辅助色为白色）的现代用户卡片组件。卡片内必须包含：1. 用户头像（圆形占位符）；2. 用户名；3. 一句签名（使用斜体字）；4. 一个蓝色关注按钮；5. 整体 布局居中。 然后把输出放到 https://html.onlineviewer.net/ 看效果，显著更好： 上次的第二个 vibe coding prompt：请给前沿科技媒体机器之心设计一个前沿风格网页，要求置顶部分滚动播出实时AI新闻。在抽卡几次后，G0a3 成功实现了滚动文字。 第三个 vibe coding prompt：请生成精美的HTML网页：鲁迅纪念馆 尝试更详细的 prompt: 请生成一个主题为“鲁迅纪念馆”的精美 HTML 网页，要求：* 包含顶部导航、横幅、展览介绍、鲁迅生平时间线、代表作品、纪念照片墙、参观信息、页脚 * 网页整体要符合纪念馆庄重、文化的气质，G0a3 模型遵循了指令： 所有生成的代码都在文末附录。我们会持续发布 vibe coding 能力显著更强的模型。 如前所述，RWKV作为纯RNN模型，尤其适合大规模并行生成：RWKV-7 7B单5090解码10000+ tok/s演示 我们提供了大规模并行生成网页的推理工具： 后端：https://github.com/RWKV-Vibe/rwkv_lightning 前端：https://github.com/xun082/RWKV-code 效果预览： 小说和故事创作 创作任务推荐的解码参数：Temperature=0.6，Top_P=0.7，Presence Penalty=2，Frequency Penalty=0.2 我们在新模型主蒸 DeepSeek v3.1，可以看到它的显著风格： 模型下载 下载 RWKV7-G0a3 7.2B 模型（.pth 格式）： Hugging Face：https://huggingface.co/BlinkDL/rwkv7-g1/resolve/main/rwkv7-g0a3-7.2b-20251029-ctx8192.pth?download=true 魔搭：https://modelscope.cn/models/RWKV/rwkv7-g1/resolve/master/rwkv7-g0a3-7.2b-20251029-ctx8192.pth Wisemodel：https://download.wisemodel.cn/file-proxy/rwkv4fun/RWKV-7-G1/-/raw/main/rwkv7-g0a3-7.2b-20251029-ctx8192.pth?inline=false 下载 .gguf 格式：https://modelscope.cn/models/shoumenchougou/RWKV7-G0a3-7.2B-GGUF/files 下载 Ollama 格式：https://ollama.com/mollysama 如何使用 RWKV 模型 我们提供在线 demo，也提供本地部署的教程。 在线 demo（续写模式） 可在 RWKV 官方 Demo 中试用 RWKV7-G0a3 7.2B 模型： Hugging Face Gradio Demo：https://huggingface.co/spaces/BlinkDL/RWKV-Gradio-2 本地部署 可以使用 RWKV Runner、Ai00、RWKV pip 等推理工具本地部署 RWKV 模型。 以及目前最快的推理方式 Albatross：https://github.com/BlinkDL/Albatross 此外，RWKV 模型也适配了 llama.cpp、ollama 等热门的模型推理工具。 由于 RWKV7-G0a3 7.2B 是新模型，目前建议使用 RWKV Runner 以保证得到正确结果。 可以在 RWKV 官网 - 模型推理教程中查看上述推理工具的使用教程。 加入 RWKV 社区 欢迎大家加入 RWKV 社区，可以从 RWKV 中文官网了解 RWKV 模型，也可以加入 RWKV 论坛、QQ 频道和 QQ 群聊，一起探讨 RWKV 模型。 📖 RWKV 中文文档：https://www.rwkv.cn 💬 RWKV 论坛：https://community.rwkv.cn/ 🐧 QQ 频道：https://pd.qq.com/s/9n21eravc | QQ 交流群：224287095 📺 BiliBili 视频教程：https://space.bilibili.com/3546689096910933 欢迎大家基于 RWKV-7 进行创业、科研，我们也会为基于 RWKV 的项目提供技术支持。 如果您的团队正在基于 RWKV 创业或开展研究，请联系我们！（在“RWKV元始智能”微信公众号留言您的联系方式，或发送邮件到“contact@rwkvos.com”。） 附录代码 vibe coding prompt：请生成一个蓝紫色主题（主色调为#6A5ACD，辅助色为白色）的现代用户卡片组件。卡片内必须包含：1. 用户头像（圆形占位符）；2. 用户名；3. 一句签名（使用斜体字）；4. 一个蓝色关注按钮；5. 整体布局居中。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>蓝紫色用户卡片</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); padding: 20px; } .user-card { background: rgba(255, 255, 255, 0.95); border-radius: 20px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); padding: 30px; max-width: 400px; width: 100%; text-align: center; transition: transform 0.3s ease; } .user-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } .avatar { width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(45deg, #6a5acd, #4a7bc9); display: flex; justify-content: center; align-items: center; font-size: 48px; color: white; margin: 0 auto 20px; border: 4px solid #4a7bc9; } .username { font-size: 28px; font-weight: 600; margin-bottom: 10px; color: #4a7bc9; } .signature { font-style: italic; color: #666; margin-bottom: 25px; line-height: 1.5; } .follow-btn { display: inline-block; background: linear-gradient(45deg, #4a7bc9, #6a5acd); color: white; padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 16px; transition: all 0.3s ease; border: none; cursor: pointer; position: relative; overflow: hidden; } .follow-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: all 0.5s ease; } .follow-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .follow-btn:hover::before { left: 100%; } .social-icons { display: flex; justify-content: center; gap: 15px; margin-top: 20px; } .social-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: flex; justify-content: center; align-items: center; color: white; font-size: 18px; cursor: pointer; transition: all 0.3s ease; } .social-icon:hover { background: rgba(255, 255, 255, 0.4); transform: scale(1.1); } .tagline { font-style: italic; color: #aaa; margin-top: 10px; font-size: 14px; } @media (max-width: 600px) { .user-card { padding: 20px; } .avatar { width: 80px; height: 80px; font-size: 36px; } .username { font-size: 22px; } .signature { font-size: 14px; } } </style> </head> <body> <div class="user-card"> <div class="avatar">👤</div> <h2 class="username">小明</h2> <p class="signature">"探索世界，发现美好"</p> <a href="#" class="follow-btn">关注</a> <div class="social-icons"> <div class="social-icon">📸</div> <div class="social-icon">🎵</div> <div class="social-icon">📚</div> <div class="social-icon">🎮</div> </div> <p class="tagline">"每一天都是新的开始"</p> </div> </body> </html> vibe coding prompt：请给前沿科技媒体机器之心设计一个前沿风格网页，要求置顶部分滚动播出实时AI新闻 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>机器之心 - AI前沿动态</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> :root { --primary: #007bff; --secondary: #ff6b6b; --dark: #1a1a2e; --light: #f8f9fa; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, sans-serif; } body { background: linear-gradient(135deg, var(--dark) 0%, #16213e 100%); color: white; overflow-x: hidden; } /* 顶部滚动新闻区 */ .news-ticker { position: fixed; top: 0; left: 0; right: 0; height: 80px; background: rgba(0, 0, 0, 0.9); display: flex; align-items: center; padding: 0 20px; z-index: 1000; backdrop-filter: blur(10px); } .ticker-content { flex: 1; overflow: hidden; white-space: nowrap; } .ticker-item { display: inline-block; padding: 0 15px; height: 100%; line-height: 80px; font-size: 14px; opacity: 0.8; animation: ticker 30s linear infinite; } @keyframes ticker { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* 导航栏 */ nav { position: sticky; top: 0; background: rgba(0, 0, 0, 0.95); padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .nav-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 24px; font-weight: 700; color: var(--primary); text-decoration: none; } .nav-links { display: flex; list-style: none; } .nav-links li { margin-left: 30px; } .nav-links a { color: white; text-decoration: none; transition: color 0.3s; } .nav-links a:hover { color: var(--secondary); } /* 主内容区 */ .hero { height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 20px; } .hero-content { max-width: 800px; } h1 { font-size: 4rem; margin-bottom: 20px; background: linear-gradient(90deg, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; } .subtitle { font-size: 1.5rem; margin-bottom: 40px; opacity: 0.9; } .cta-button { display: inline-block; padding: 12px 30px; background: var(--primary); color: white; text-decoration: none; border-radius: 50px; font-weight: 600; transition: all 0.3s; } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } /* 内容区域 */ .content-section { padding: 80px 20px; max-width: 1200px; margin: 0 auto; } .section-title { text-align: center; margin-bottom: 40px; font-size: 2.5rem; color: var(--primary); } .article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; } .article-card { background: rgba(255, 255, 255, 0.05); border-radius: 15px; padding: 25px; transition: transform 0.3s; } .article-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); } .article-image { width: 100%; height: 200px; object-fit: cover; border-radius: 10px; margin-bottom: 15px; } .article-title { font-size: 1.5rem; margin-bottom: 10px; color: var(--primary); } .article-meta { display: flex; justify-content: space-between; font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); } /* 底部 */ footer { background: rgba(0, 0, 0, 0.9); padding: 40px 20px; text-align: center; } .footer-content { max-width: 1200px; margin: 0 auto; } .social-links { display: flex; justify-content: center; gap: 20px; margin: 30px 0; } .social-links a { color: white; font-size: 1.5rem; transition: color 0.3s; } .social-links a:hover { color: var(--secondary); } .copyright { margin-top: 30px; font-size: 0.9rem; opacity: 0.7; } </style> </head> <body> <!-- 顶部滚动新闻 --> <div class="news-ticker"> <div class="ticker-content"> <div class="ticker-item"> <span class="ticker-text">GPT-5预计2024年Q3发布，模型规模达万亿参数</span> </div> <div class="ticker-item"> <span class="ticker-text">DeepMind推出AlphaFold 3，突破蛋白质结构预测极限</span> </div> <div class="ticker-item"> <span class="ticker-text">OpenAI与微软达成战略合作，共建AI安全框架</span> </div> <div class="ticker-item"> <span class="ticker-text">MIT发布脑机接口新突破，实现人机思维直接交互</span> </div> <div class="ticker-item"> <span class="ticker-text">中国科学院发布《人工智能伦理白皮书》</span> </div> </div> </div> <!-- 导航栏 --> <nav> <div class="nav-container"> <a href="#" class="logo">机器之心</a> <ul class="nav-links"> <li><a href="#">首页</a></li> <li><a href="#">热点</a></li> <li><a href="#">资讯</a></li> <li><a href="#">技术</a></li> <li><a href="#">产业</a></li> <li><a href="#">观点</a></li> </ul> </div> </nav> <!-- 主内容区 --> <main class="hero"> <div class="hero-content"> <h1>AI正在重塑世界</h1> <p class="subtitle">从自动驾驶到生物医药，人工智能正在引领第四次工业革命</p> <a href="#" class="cta-button">探索最新AI技术</a> </div> </main> <!-- 内容区域 --> <div class="content-section"> <div class="section-title">热点头条</div> <div class="article-grid"> <!-- 文章卡片将通过JavaScript动态生成 --> </div> </div> <!-- 底部 --> <footer> <div class="footer-content"> <div class="social-links"> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-facebook"></i></a> <a href="#"><i class="fab fa-linkedin"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </div> <p>© 2023 机器之心 | 版权所有</p> </div> </footer> <script> // 滚动新闻动画 document.addEventListener('DOMContentLoaded', function() { const tickerItems = document.querySelectorAll('.ticker-item'); // 创建滚动新闻效果 function createTicker() { tickerItems.forEach((item, index) => { setTimeout(() => { item.classList.add('active'); }, index * 500); }); } // 初始化滚动新闻 createTicker(); // 滚动监听 window.addEventListener('scroll', function() { const scrollY = window.scrollY; const totalHeight = document.documentElement.scrollHeight - window.innerHeight; const scrollPercent = (scrollY / totalHeight) * 100; // 根据滚动位置调整新闻动画速度 tickerItems.forEach((item, index) => { const speed = Math.max(0, 1 - (scrollPercent / 100)) * 0.5; item.style.animationDuration = `${speed}s`; }); }); }); </script> </body> </html> vibe coding prompt：请生成精美的HTML网页：鲁迅纪念馆 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>鲁迅纪念馆 - 永恒的精神灯塔</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: "SimSun", "宋体", serif; } body { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: #e6e6e6; line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } header { text-align: center; padding: 60px 0 40px; border-bottom: 2px solid #c19a6b; margin-bottom: 40px; } .logo { font-size: 3.5rem; color: #d4af37; text-shadow: 0 0 15px rgba(209, 167, 59, 0.5); margin-bottom: 20px; } .subtitle { font-size: 1.5rem; color: #a89f7a; letter-spacing: 5px; } nav { display: flex; justify-content: center; gap: 30px; margin-bottom: 40px; } nav a { color: #d4af37; text-decoration: none; font-weight: bold; transition: all 0.3s ease; } nav a:hover { color: #ffd700; transform: translateY(-5px); } .main-content { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 60px; } @media (max-width: 768px) { .main-content { grid-template-columns: 1fr; } } .card { background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; } .card:hover { transform: translateY(-10px); } .card h2 { color: #d4af37; margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 10px; } .exhibit-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-top: 30px; } .exhibit-item { background: rgba(0, 0, 0, 0.3); border-radius: 8px; overflow: hidden; position: relative; } .exhibit-image { width: 100%; height: 180px; object-fit: cover; transition: transform 0.5s ease; } .exhibit-item:hover .exhibit-image { transform: scale(1.1); } footer { text-align: center; padding: 40px 0; border-top: 1px solid #333; margin-top: 60px; color: #888; } .timeline { position: relative; max-width: 800px; margin: 40px auto; } .timeline::after { content: ''; position: absolute; width: 6px; background-color: #d4af37; top: 0; bottom: 0; left: 50%; margin-left: -3px; } .timeline-item { padding: 10px 40px; position: relative; width: 50%; box-sizing: border-box; } .timeline-item::after { content: ''; position: absolute; width: 20px; height: 20px; background-color: #fff; border: 4px solid #d4af37; top: 15px; border-radius: 50%; z-index: 1; } .left { left: 0; } .right { left: 50%; } .left::before, .right::before { content: ""; position: absolute; top: 15px; width: 20px; height: 20px; background-color: #d4af37; border: 4px solid #fff; border-radius: 50%; z-index: 1; } .left::before { left: -10px; } .right::before { right: -10px; } .timeline-content { padding: 20px; background-color: rgba(209, 167, 59, 0.1); border-radius: 8px; } .timeline-date { font-weight: bold; color: #d4af37; margin-bottom: 5px; } .quote-carousel { position: relative; height: 300px; overflow: hidden; } .carousel-track { display: flex; transition: transform 0.5s ease; } .carousel-slide { min-width: 100%; padding: 20px; background: rgba(209, 167, 59, 0.1); border-radius: 8px; } .carousel-controls { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; display: flex; justify-content: space-between; padding: 0 20px; } .carousel-btn { background: rgba(209, 167, 59, 0.3); border: none; color: white; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; } .carousel-indicators { display: flex; justify-content: center; margin-top: 20px; } .indicator { width: 12px; height: 12px; border-radius: 50%; background: #ccc; margin: 0 5px; cursor: pointer; } .indicator.active { background: #d4af37; } </style> </head> <body> <div class="container"> <header> <h1 class="logo">鲁迅纪念馆</h1> <p class="subtitle">永恒的精神灯塔</p> </header> <nav> <a href="#history">历史背景</a> <a href="#personage">人物介绍</a> <a href="#exhibition">展览信息</a> <a href="#interact">互动体验</a> </nav> <div class="main-content"> <div class="card"> <h2>鲁迅简介</h2> <p>周树人（1881年9月25日－1936年10月19日），字豫山，后改名为豫才，笔名鲁迅，浙江绍兴人，中国现代文学家、思想家、革命家。他是中国现代文学的奠基人之一，被誉为"民族魂"。</p> <p>鲁迅的作品以深刻的社会批判和独特的艺术风格著称，代表作有《呐喊》、《彷徨》、《故事新编》等。他的思想影响了一代又一代中国人，至今仍具有强烈的现实意义。</p> </div> <div class="card"> <h2>纪念馆概况</h2> <p>鲁迅纪念馆位于浙江省绍兴市柯桥区，是中国第一座以纪念鲁迅为主题的专题纪念馆。馆内陈列着鲁迅生前使用过的文房四宝、手稿、照片等珍贵文物，还展示了鲁迅的生平事迹和思想发展历程。</p> <p>纪念馆建筑融合了中国传统园林风格与现代建筑元素，营造出浓厚的文化氛围。游客可以在这里感受到鲁迅的精神世界，领略中国近代文学的辉煌。</p> </div> </div> <div class="exhibit-gallery"> <div class="exhibit-item"> <img src="https://via.placeholder.com/300x200?text=鲁迅手稿" alt="鲁迅手稿"> <div class="exhibit-info"> <h3>《狂人日记》手稿</h3> <p>中国现代文学史上第一篇白话小说</p> </div> </div> <div class="exhibit-item"> <img src="https://via.placeholder.com/300x200?text=鲁迅照片" alt="鲁迅照片"> <div class="exhibit-info"> <h3>青年时期照片</h3> <p>1904年，鲁迅在日本留学时的照片</p> </div> </div> <div class="exhibit-item"> <img src="https://via.placeholder.com/300x200?text=鲁迅书房" alt="鲁迅书房"> <div class="exhibit-info"> <h3>书房陈列</h3> <p>展示鲁迅生前使用的文房四宝</p> </div> </div> </div> <div class="timeline"> <div class="timeline-track"> <div class="timeline-item left"> <div class="timeline-content"> <div class="timeline-date">1902年</div> <p>鲁迅赴日本留学，开始接触西方文化</p> </div> </div> <div class="timeline-item right"> <div class="timeline-content"> <div class="timeline-date">1918年</div> <p>发表《狂人日记》，中国现代文学诞生</p> </div> </div> <div class="timeline-item left"> <div class="timeline-content"> <div class="timeline-date">1926年</div> <p>创办《语丝》周刊，推动新文化运动</p> </div> </div> <div class="timeline-item right"> <div class="timeline-content"> <div class="timeline-date">1936年</div> <p>鲁迅逝世，享年55岁</p> </div> </div> </div> </div> <div class="quote-carousel"> <div class="carousel-track"> <div class="carousel-slide"> <p>"我以为，只要有爱，就有希望。"</p> <p>- 鲁迅《野草》</p> </div> <div class="carousel-slide"> <p>"我们不能忘记，我们曾经拥有过的光明。"</p> <p>- 鲁迅《坟》</p> </div> <div class="carousel-slide"> <p>"我以为，真正的自由，是敢于直面黑暗的勇气。"</p> <p>- 鲁迅《阿Q正传》</p> </div> </div> <div class="carousel-controls"> <button id="prevBtn"><</button> <button id="nextBtn">></button> </div> </div> <footer> <p>鲁迅纪念馆 © 2023 | 浙江省绍兴市柯桥区</p> <p>电话：0575-82288888 | 邮箱：luxunmuseum@example.com</p> </footer> </div> <script> // 简单的轮播图功能 document.addEventListener('DOMContentLoaded', function() { const slides = document.querySelectorAll('.carousel-slide'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); let currentSlide = 0; function showSlide(n) { slides.forEach((slide, index) => { slide.style.transform = `translateX(${n * 100}%)`; }); } prevBtn.addEventListener('click', () => { currentSlide = (currentSlide - 1 + slides.length) % slides.length; showSlide(currentSlide); }); nextBtn.addEventListener('click', () => { currentSlide = (currentSlide + 1) % slides.length; showSlide(currentSlide); }); // 初始显示第一张幻灯片 showSlide(0); }); </script> </body> </html> vibe coding prompt: 请生成一个主题为“鲁迅纪念馆”的精美 HTML 网页，要求：* 包含顶部导航、横幅、展览介绍、鲁迅生平时间线、代表作品、纪念照片墙、参观信息、页脚 * 网页整体要符合纪念馆庄重、文化的气质 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>鲁迅纪念馆 - 致敬文学巨匠</title> <style> /* 基础样式 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: "SimSun", "宋体", serif; } body { background-color: #f5f2e9; color: #333; line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* 头部样式 */ header { background: linear-gradient(to bottom, #8b0000, #5a0000); color: #fff; padding: 40px 0; text-align: center; position: relative; overflow: hidden; } header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M50,5 C60,15 70,25 80,35 A70,70 0 0,1 20,35 C30,25 40,15 50,5 Z" fill="%238b0000" opacity="0.3"/></svg>'); opacity: 0.1; } .logo { font-size: 3.5rem; font-weight: bold; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); letter-spacing: 5px; } .subtitle { font-size: 1.5rem; font-weight: normal; margin-bottom: 30px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); } /* 导航栏 */ nav { background-color: #5a0000; padding: 15px 0; position: sticky; top: 0; z-index: 100; } nav ul { display: flex; justify-content: center; list-style: none; } nav li { margin: 0 20px; } nav a { color: #fff; text-decoration: none; font-size: 1.1rem; transition: color 0.3s; } nav a:hover { color: #ffd700; } /* 横幅区域 */ .banner { background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400"><rect width="800" height="400" fill="%235a0000"/><text x="400" y="200" font-family="SimSun" font-size="24" text-anchor="middle" fill="%23ffd700" dy="0.3em">鲁迅纪念馆</text></svg>'); background-size: cover; background-position: center; color: #fff; text-align: center; padding: 100px 20px; min-height: 400px; } .banner h1 { font-size: 3.5rem; margin-bottom: 20px; text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8); } .banner p { font-size: 1.2rem; max-width: 800px; margin: 0 auto 30px; } /* 展览介绍 */ .exhibition { padding: 60px 0; background-color: #f9f5eb; } .exhibition h2 { text-align: center; font-size: 2.5rem; margin-bottom: 40px; color: #5a0000; border-bottom: 2px solid #8b0000; padding-bottom: 15px; } .exhibition-content { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 30px; } .exhibition-item { flex: 1 1 300px; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); text-align: center; } .exhibition-item h3 { font-size: 1.5rem; margin-bottom: 15px; color: #5a0000; } /* 生平时间线 */ .timeline { padding: 60px 0; background-color: #f9f5eb; } .timeline h2 { text-align: center; font-size: 2.5rem; margin-bottom: 40px; color: #5a0000; border-bottom: 2px solid #8b0000; padding-bottom: 15px; } .timeline-container { position: relative; max-width: 800px; margin: 0 auto; } .timeline-item { position: relative; margin-bottom: 40px; width: 100%; } .timeline-item::after { content: ''; position: absolute; width: 20px; height: 20px; background-color: #8b0000; border-radius: 50%; top: 20px; left: 50%; transform: translateX(-50%); } .timeline-content { padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); } .timeline-date { font-weight: bold; color: #8b0000; margin-bottom: 10px; } /* 代表作品 */ .works { padding: 60px 0; background-color: #f9f5eb; } .works h2 { text-align: center; font-size: 2.5rem; margin-bottom: 40px; color: #5a0000; border-bottom: 2px solid #8b0000; padding-bottom: 15px; } .works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; } .work-card { background-color: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s; } .work-card:hover { transform: translateY(-10px); } .work-img { width: 100%; height: 200px; object-fit: cover; } .work-content { padding: 20px; } .work-title { font-size: 1.3rem; margin-bottom: 10px; color: #5a0000; } /* 纪念照片墙 */ .photo-wall { padding: 60px 0; background-color: #f9f5eb; } .photo-wall h2 { text-align: center; font-size: 2.5rem; margin-bottom: 40px; color: #5a0000; border-bottom: 2px solid #8b0000; padding-bottom: 15px; } .photos { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .photo { width: 250px; height: 350px; background-color: #8b0000; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; cursor: pointer; transition: transform 0.3s; } .photo:hover { transform: scale(1.05); } /* 参观信息 */ .visit-info { padding: 60px 0; background-color: #f9f5eb; } .visit-info h2 { text-align: center; font-size: 2.5rem; margin-bottom: 40px; color: #5a0000; border-bottom: 2px solid #8b0000; padding-bottom: 15px; } .visit-details { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 30px; } .visit-card { flex: 1 1 300px; background-color: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .visit-card h3 { font-size: 1.5rem; margin-bottom: 15px; color: #5a0000; } /* 页脚 */ footer { background-color: #5a0000; color: #fff; padding: 40px 0 20px; } .footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; } .footer-section { flex: 1 1 250px; margin-bottom: 30px; } .footer-section h3 { font-size: 1.2rem; margin-bottom: 15px; color: #ffd700; } .footer-section p { margin-bottom: 10px; } .copyright { text-align: center; padding-top: 20px; border-top: 1px solid #444; font-size: 0.9rem; color: #aaa; } /* 响应式设计 */ @media (max-width: 768px) { .logo { font-size: 2.5rem; } .banner h1 { font-size: 2.5rem; } .exhibition-content, .works-grid, .visit-details { flex-direction: column; } .timeline-item { flex-direction: column; align-items: flex-start; } .timeline-content { margin-left: 0; margin-top: 20px; } } </style> </head> <body> <!-- 顶部导航 --> <header> <div class="container"> <nav> <ul> <li><a href="#home">首页</a></li> <li><a href="#exhibition">展览</a></li> <li><a href="#timeline">生平</a></li> <li><a href="#works">作品</a></li> <li><a href="#photos">照片墙</a></li> <li><a href="#visit">参观信息</a></li> </ul> </nav> <div class="banner"> <h1>鲁迅纪念馆</h1> <p>致敬文学巨匠，传承革命精神</p> </div> </div> </header> <!-- 横幅区域 --> <section class="banner" id="home"> <div class="container"> <h2>鲁迅纪念馆</h2> <p>中国现代文学史上最重要的作家之一，中国共产党早期领导人之一，伟大的民族解放运动战士。</p> </div> </section> <!-- 展览介绍 --> <section class="exhibition" id="exhibition"> <div class="container"> <h2>展览介绍</h2> <div class="exhibition-content"> <div class="exhibition-item"> <h3>鲁迅生平</h3> <p>鲁迅（1881年9月25日－1936年10月19日），原名周树人，字豫山、豫才，后改名阿城，笔名、号有二十余个。浙江绍兴人。中国现代文学的奠基人之一，中国现代文学史上最重要的作家之一，中国共产党早期领导人之一，伟大的民族解放运动战士。</p> </div> <div class="exhibition-item"> <h3>纪念馆历史</h3> <p>鲁迅纪念馆成立于1958年，是中国第一座以纪念鲁迅为主题的纪念馆。馆内陈列着鲁迅生前使用过的文房四宝、书籍、照片等珍贵文物，展示了鲁迅的生平事迹和文学成就。</p> </div> <div class="exhibition-item"> <h3>展览特色</h3> <p>本次展览通过文献资料、实物展品、多媒体展示等形式，全面呈现鲁迅的思想世界、文学创作和革命活动，让观众更深入地了解这位伟大作家的精神世界。</p> </div> </div> </div> </section> <!-- 生平时间线 --> <section class="timeline" id="timeline"> <div class="container"> <h2>鲁迅生平时间线</h2> <div class="timeline-container"> <div class="timeline-item"> <div class="timeline-content"> <div class="timeline-date">1881年9月25日</div> <p>周树人（鲁迅）出生于浙江绍兴一个封建官僚家庭。</p> </div> </div> <div class="timeline-item"> <div class="timeline-content"> <div class="timeline-date">1902年</div> <p>赴日本留学，开始接触西方思想。</p> </div> </div> <div class="timeline-item"> <div class="timeline-content"> <div class="timeline-date">1906年</div> <p>发表第一篇白话小说《狂人日记》，开创中国现代文学新纪元。</p> </div> </div> <div class="timeline-item"> <div class="timeline-content"> <div class="timeline-date">1918年</div> <p>发表《呐喊》自序，揭示社会黑暗，引发轰动。</p> </div> </div> <div class="timeline-item"> <div class="timeline-content"> <div class="timeline-date">1926年</div> <p>发表《坟》，批判旧文化，倡导新文化。</p> </div> </div> <div class="timeline-item"> <div class="timeline-content"> <div class="timeline-date">1936年10月19日</div> <p>因病逝世，享年55岁。</p> </div> </div> </div> </div> </section> <!-- 代表作品 --> <section class="works" id="works"> <div class="container"> <h2>代表作品</h2> <div class="works-grid"> <div class="work-card"> <img src="https://via.placeholder.com/350x250/8b0000/ffffff?text=呐喊" alt="呐喊" class="work-img"> <h3>呐喊</h3> <p>鲁迅的第一部短篇小说集，收录了《狂人日记》、《孔乙己》、《药》等著名作品。</p> </div> <div class="work-card"> <img src="https://via.placeholder.com/350x250/8b0000/ffffff?text=彷徨" alt="彷徨" class="work-img"> <h3>彷徨</h3> <p>鲁迅的第二部短篇小说集，收录了《祝福》、《孤独者》、《伤逝》等作品。</p> </div> <div class="work-card"> <img src="https://via.placeholder.com/350x250/8b0000/ffffff?text=故事新编" alt="故事新编" class="work-img"> <h3>故事新编</h3> <p>鲁迅的散文集，以古代神话故事为题材，讽刺现实社会。</p> </div> <div class="work-card"> <img src="https://via.placeholder.com/350x250/8b0000/ffffff?text=朝花夕拾" alt="朝花夕拾" class="work-img"> <h3>朝花夕拾</h3> <p>鲁迅的回忆录，回顾童年往事，反映旧社会的种种弊端。</p> </div> </div> </div> </section> <!-- 纪念照片墙 --> <section class="photo-wall" id="photos"> <div class="container"> <h2>纪念照片墙</h2> <div class="photos"> <div class="photo" data-src="https://via.placeholder.com/350x450/8b0000/ffffff?text=鲁迅照片1"> <img src="https://via.placeholder.com/350x250/8b0000/ffffff?text=照片1" alt="鲁迅照片1"> </div> <div class="photo" data-src="https://via.placeholder.com/350x450/8b0000/ffffff?text=鲁迅照片2"> <img src="https://via.placeholder.com/350x250/8b0000/ffffff?text=照片2" alt="鲁迅照片2"> </div> <div class="photo" data-src="https://via.placeholder.com/350x450/8b0000/ffffff?text=鲁迅照片3"> <img src="https://via.placeholder.com/350x250/8b0000/ffffff?text=照片3" alt="鲁迅照片3"> </div> <div class="photo" data-src="https://via.placeholder.com/350x450/8b0000/ffffff?text=鲁迅照片4"> <img src="https://via.placeholder.com/350x250/8b0000/ffffff?text=照片4" alt="鲁迅照片4"> </div> <div class="photo" data-src="https://via.placeholder.com/350x450/8b0000/ffffff?text=鲁迅照片5"> <img src="https://via.placeholder.com/350x250/8b0000/ffffff?text=照片5" alt="鲁迅照片5"> </div> </div> </div> </section> <!-- 参观信息 --> <section class="visit-info" id="visit"> <div class="container"> <h2>参观信息</h2> <div class="visit-details"> <div class="visit-card"> <h3>地址</h3> <p>北京市海淀区颐和园路10号</p> </div> <div class="visit-card"> <h3>开放时间</h3> <p>周一至周日 9:00-17:00（最后入馆时间16:30）</p> </div> <div class="visit-card"> <h3>联系电话</h3> <p>010-88888888</p> </div> <div class="visit-card"> <h3>门票价格</h3> <p>免费参观</p> </div> </div> </div> </section> <!-- 页脚 --> <footer class="footer-content"> <div class="container"> <div class="footer-section"> <h3>关于我们</h3> <p>鲁迅纪念馆是中国第一座以纪念鲁迅为主题的纪念馆，致力于传承鲁迅精神，弘扬革命文化。</p> </div> <div class="footer-section"> <h3>联系我们</h3> <p>地址：北京市海淀区颐和园路10号</p> <p>电话：010-88888888</p> <p>邮箱：ruxueminyuan@example.com</p> </div> <div class="footer-section"> <h3>友情链接</h3> <p>中国共产党历史展览馆</p> <p>中国革命博物馆</p> <p>中国人民大学</p> </div> </div> <div class="copyright"> <p>© 2023 鲁迅纪念馆 版权所有</p> </div> </footer> <script> // 简单的JavaScript交互功能 document.addEventListener('DOMContentLoaded', function() { // 时间线项目点击效果 const timelineItems = document.querySelectorAll('.timeline-item'); timelineItems.forEach(item => { item.addEventListener('click', function() { this.classList.toggle('active'); }); }); // 照片墙点击效果 const photoWall = document.querySelector('.photo-wall'); const photos = document.querySelectorAll('.photo'); photos.forEach(photo => { photo.addEventListener('click', function() { alert('这是一张鲁迅的照片，点击查看更多相关信息。'); }); }); // 导航栏滚动效果 window.addEventListener('scroll', function() { const nav = document.querySelector('nav'); if (window.scrollY > 100) { nav.style.backgroundColor = '#5a0000'; nav.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.3)'; } else { nav.style.backgroundColor = '#8b0000'; nav.style.boxShadow = 'none'; } }); }); </script> </body> </html>
