🎨 MDX 样板库实战演示

欢迎来到 MDX 样板库的可视化演示中心！这里展示了所有样板组件的真实效果，每个组件都附带完整的可复制源代码。无论您是初学者还是经验丰富的开发者，这里都是您创作精美内容的最佳起点。

📖 如何使用本演示

🎯 查看效果

• 实时预览：所有组件在本页面中实时渲染，您可以直观看到最终效果
• 真实环境：在实际的博客文章环境中展示，确保效果准确

📋 复制代码

• 完整代码：每个效果下方都有对应的完整 HTML 代码
• 一键复制：点击代码块右上角的复制按钮即可
• 即粘即用：直接粘贴到您的 .mdx 文件中即可使用

🔧 定制修改

• 参数调整：根据需要修改颜色、尺寸、文字等参数
• 样式组合：将不同样板组合使用，创造独特效果

🎨 信息卡片展示

1. 基础信息卡片

效果预览：

源代码：

<div style="background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 20px; margin: 20px 0;">
  <h3 style="margin-top: 0; color: #495057;">欢迎使用 MDX</h3>
  <p style="margin-bottom: 0; color: #6c757d;">MDX 让您能够在 Markdown 中使用 HTML 元素，创建更丰富的内容体验。</p>
</div>

2. 现代渐变卡片

效果预览：

源代码：

<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 25px; border-radius: 12px; text-align: center; margin: 25px 0; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);">
  <h2 style="margin: 0 0 10px 0;">魅力紫蓝卡片</h2>
  <p style="margin: 0; opacity: 0.9;">现代化的视觉效果</p>
</div>

3. 多彩渐变卡片组合

效果预览：

源代码：

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 25px 0;">
  <div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; padding: 20px; border-radius: 12px; text-align: center; box-shadow: 0 4px 15px rgba(240, 147, 251, 0.3);">
    <h3 style="margin: 0 0 8px 0;">浪漫粉红</h3>
    <p style="margin: 0; opacity: 0.9; font-size: 14px;">温柔甜美的配色</p>
  </div>
  <div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; padding: 20px; border-radius: 12px; text-align: center; box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);">
    <h3 style="margin: 0 0 8px 0;">清新蓝色</h3>
    <p style="margin: 0; opacity: 0.9; font-size: 14px;">清爽的海洋风格</p>
  </div>
  <div style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); color: white; padding: 20px; border-radius: 12px; text-align: center; box-shadow: 0 4px 15px rgba(67, 233, 123, 0.3);">
    <h3 style="margin: 0 0 8px 0;">薄荷绿色</h3>
    <p style="margin: 0; opacity: 0.9; font-size: 14px;">清新自然的感觉</p>
  </div>
</div>

⚠️ 提示框组件

1. 现代渐变提示框

效果预览：

源代码：

<!-- 成功提示 -->
<div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 18px; border-radius: 12px; margin: 20px 0; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);">
  <strong>✅ 成功！</strong> MDX 配置已正确完成，所有功能正常运行。
</div>

<!-- 警告提示 -->
<div style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; padding: 18px; border-radius: 12px; margin: 20px 0; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);">
  <strong>⚠️ 警告：</strong> 在使用复杂样式时，请确保在不同设备上测试显示效果。
</div>

<!-- 信息提示 -->
<div style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; padding: 18px; border-radius: 12px; margin: 20px 0; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);">
  <strong>ℹ️ 信息：</strong> 您可以在 MDX-样板库.md 文件中找到所有样板代码。
</div>

2. 经典边框提示框

效果预览：

源代码：

<!-- 成功边框提示 -->
<div style="background: #ecfdf5; border: 2px solid #10b981; color: #065f46; padding: 18px; border-radius: 10px; margin: 15px 0;">
  <strong>✅ 成功！</strong> 经典边框样式，适合需要突出显示但又不过于强烈的场景。
</div>

<!-- 警告边框提示 -->
<div style="background: #fffbeb; border: 2px solid #f59e0b; color: #92400e; padding: 18px; border-radius: 10px; margin: 15px 0;">
  <strong>⚠️ 注意：</strong> 这种样式更加内敛，适合长篇文档中的提示信息。
</div>

📋 美化引用组件

经典引用块

效果预览：

源代码：

<div style="border-left: 4px solid #6c757d; background: #f8f9fa; padding: 20px; margin: 20px 0; font-style: italic; position: relative;">
  <div style="font-size: 48px; color: #dee2e6; position: absolute; top: 10px; left: 15px;">"</div>
  <p style="margin: 0; padding-left: 30px; color: #495057;">设计不是关于外观，而是关于它如何工作。好的设计是简单的设计。</p>
  <div style="text-align: right; margin-top: 10px; color: #6c757d; font-size: 14px;">—— Steve Jobs</div>
</div>

🎯 按钮组件展示

1. 现代渐变按钮

效果预览：

源代码：

<div style="text-align: center; margin: 30px 0;">
  <a href="#" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px 30px; text-decoration: none; border-radius: 25px; display: inline-block; font-weight: bold; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); margin: 0 10px;">
    🚀 开始使用
  </a>
  <a href="#" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; padding: 15px 30px; text-decoration: none; border-radius: 25px; display: inline-block; font-weight: bold; box-shadow: 0 4px 15px rgba(240, 147, 251, 0.3); margin: 0 10px;">
    📚 查看文档
  </a>
</div>

2. 彩色按钮组

效果预览：

源代码：

<div style="text-align: center; margin: 30px 0; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">
  <a href="#" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 12px 20px; text-decoration: none; border-radius: 8px; display: inline-block; font-weight: bold; box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);">🌿 下载</a>
  <a href="#" style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; padding: 12px 20px; text-decoration: none; border-radius: 8px; display: inline-block; font-weight: bold; box-shadow: 0 3px 10px rgba(59, 130, 246, 0.3);">🎯 演示</a>
  <a href="#" style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white; padding: 12px 20px; text-decoration: none; border-radius: 8px; display: inline-block; font-weight: bold; box-shadow: 0 3px 10px rgba(139, 92, 246, 0.3);">📚 文档</a>
  <a href="#" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; padding: 12px 20px; text-decoration: none; border-radius: 8px; display: inline-block; font-weight: bold; box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3);">⭐ 收藏</a>
</div>

📊 数据展示组件

1. 统计卡片组

效果预览：

源代码：

<div style="display: flex; gap: 20px; margin: 30px 0; flex-wrap: wrap;">
  <div style="flex: 1; min-width: 200px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 25px; border-radius: 10px; text-align: center;">
    <div style="font-size: 36px; font-weight: bold; margin-bottom: 10px;">100+</div>
    <div style="opacity: 0.9;">样板组件</div>
  </div>
  <div style="flex: 1; min-width: 200px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; padding: 25px; border-radius: 10px; text-align: center;">
    <div style="font-size: 36px; font-weight: bold; margin-bottom: 10px;">0</div>
    <div style="opacity: 0.9;">编译错误</div>
  </div>
  <div style="flex: 1; min-width: 200px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; padding: 25px; border-radius: 10px; text-align: center;">
    <div style="font-size: 36px; font-weight: bold; margin-bottom: 10px;">∞</div>
    <div style="opacity: 0.9;">创意可能</div>
  </div>
</div>

2. 技能进度条

效果预览：

源代码：

<!-- 进度条 1 -->
<div style="margin: 20px 0;">
  <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
    <span><strong>MDX 掌握度</strong></span>
    <span>95%</span>
  </div>
  <div style="background: #e9ecef; border-radius: 10px; height: 10px;">
    <div style="background: linear-gradient(90deg, #007bff, #0056b3); width: 95%; height: 100%; border-radius: 10px;"></div>
  </div>
</div>

<!-- 进度条 2 -->
<div style="margin: 20px 0;">
  <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
    <span><strong>HTML/CSS 技能</strong></span>
    <span>88%</span>
  </div>
  <div style="background: #e9ecef; border-radius: 10px; height: 10px;">
    <div style="background: linear-gradient(90deg, #28a745, #1e7e34); width: 88%; height: 100%; border-radius: 10px;"></div>
  </div>
</div>

🔥 特殊效果组件

1. 悬浮卡片

效果预览：

源代码：

<div style="background: white; border-radius: 12px; padding: 25px; margin: 25px 0; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #f1f5f9;">
  <h3 style="margin-top: 0; color: #1e293b;">优雅的阴影效果</h3>
  <p style="color: #64748b; margin-bottom: 0;">这个卡片具有微妙的阴影效果，营造出浮在页面上的视觉感受，非常适合突出重要内容。</p>
</div>

2. 霓虹科技风格

效果预览：

源代码：

<div style="background: #1a1a1a; color: #ffffff; padding: 30px; margin: 30px 0; border-radius: 10px; border: 2px solid #00ffff; box-shadow: 0 0 20px rgba(0, 255, 255, 0.3), inset 0 0 20px rgba(0, 255, 255, 0.1); text-align: center;">
  <h2 style="margin: 0 0 15px 0; color: #00ffff; text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);">FUTURE DESIGN</h2>
  <p style="margin: 0; opacity: 0.9;">科技感十足的霓虹边框效果</p>
</div>

🎨 创意布局组件

双列对比布局

效果预览：

源代码：

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 30px 0;">
  <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 25px; border-radius: 10px;">
    <h3 style="margin-top: 0;">传统 Markdown</h3>
    <ul style="margin-bottom: 0; opacity: 0.9;">
      <li>纯文本格式</li>
      <li>有限的样式选项</li>
      <li>简单快速</li>
    </ul>
  </div>
  <div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; padding: 25px; border-radius: 10px;">
    <h3 style="margin-top: 0;">MDX 格式</h3>
    <ul style="margin-bottom: 0; opacity: 0.9;">
      <li>HTML + Markdown</li>
      <li>丰富的视觉效果</li>
      <li>高度可定制</li>
    </ul>
  </div>
</div>

🎯 经典颜色主题

Bootstrap 经典配色

效果预览：

源代码：

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px; margin: 25px 0;">
  <div style="background: #007bff; color: white; padding: 15px; border-radius: 6px; text-align: center; font-size: 12px;">主要蓝色<br/>#007bff</div>
  <div style="background: #28a745; color: white; padding: 15px; border-radius: 6px; text-align: center; font-size: 12px;">成功绿色<br/>#28a745</div>
  <div style="background: #dc3545; color: white; padding: 15px; border-radius: 6px; text-align: center; font-size: 12px;">危险红色<br/>#dc3545</div>
  <div style="background: #ffc107; color: #212529; padding: 15px; border-radius: 6px; text-align: center; font-size: 12px;">警告黄色<br/>#ffc107</div>
  <div style="background: #17a2b8; color: white; padding: 15px; border-radius: 6px; text-align: center; font-size: 12px;">信息青色<br/>#17a2b8</div>
  <div style="background: #6c757d; color: white; padding: 15px; border-radius: 6px; text-align: center; font-size: 12px;">次要灰色<br/>#6c757d</div>
</div>

🎨 色彩主题展示

精美渐变色彩库

效果预览：

源代码：

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; margin: 25px 0;">
  <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 12px; text-align: center; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);">
    <div style="font-weight: bold; margin-bottom: 8px;">魅力紫蓝</div>
    <div style="font-size: 11px; opacity: 0.9;">#667eea → #764ba2</div>
  </div>
  <!-- 更多颜色卡片... -->
</div>

🎬 视频组件展示

基础视频播放器

效果预览：

源代码：

<div style="background: #f8f9fa; padding: 20px; border-radius: 12px; margin: 25px 0;">
  <h3 style="margin-top: 0; margin-bottom: 15px; color: #495057; text-align: center;">演示视频</h3>
  <video controls style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
    <source src="your-video-url.mp4" type="video/mp4">
    您的浏览器不支持视频标签。
  </source>
  <p style="margin-top: 15px; margin-bottom: 0; color: #6c757d; text-align: center; font-size: 14px;">视频描述文字</p>
</div>

🚀 学习与应用总结

📚 您学到了什么

通过本演示，您已经掌握了：

✅ 10+ 种信息卡片样式 - 从基础到高级渐变效果
✅ 多种提示框类型 - 现代渐变和经典边框两大风格
✅ 丰富的按钮组件 - 单个按钮到按钮组的完整方案
✅ 数据展示组件 - 统计卡片、进度条等数据可视化
✅ 特殊效果元素 - 霓虹边框、悬浮卡片等创意设计
✅ 视频媒体组件 - 完整的视频播放器解决方案
✅ 色彩搭配理论 - 6 大主题，50+ 种精美配色

🎯 实践指南

立即开始：

1. 选择模板 - 从演示中选择您喜欢的组件样式
2. 复制代码 - 直接复制对应的 HTML 源代码
3. 粘贴使用 - 粘贴到您的 .mdx 文件中
4. 个性定制 - 根据需求修改文字、颜色、尺寸

进阶技巧：

• 📱 响应式优化 - 在移动设备上测试效果
• 🎨 颜色统一 - 在整个网站中保持色彩一致性
• ⚡ 性能考虑 - 避免过度复杂的样式影响加载速度
• 🔧 代码复用 - 将常用样式保存为代码片段

🌟 下一步行动

📞 获取帮助

遇到问题？这里有一些资源：

• 📖 完整样板库 - 查看 MDX-样板库.md 获取所有组件
• 🔧 技术支持 - 通过 Issues 或评论区反馈问题
• 🌟 分享交流 - 在社交媒体上分享您的创作成果

记住：优秀的设计是为内容服务的，而不是相反。让这些美观的样板帮助您更好地传达思想和信息！✨