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演示
我们提供了大规模并行生成网页的推理工具：
效果预览：
小说和故事创作
创作任务推荐的解码参数：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>
</div>
