垦荒学园

简体中文

English

简体中文

English

切换主题

Foundation 面板 ​

Foundation 面板（Card/Callout）是用于组织和展示内容的容器组件。本章将介绍 Foundation 面板的各种用法。

基本面板（Card） ​

使用 .card 类创建基本面板：

html
<div class="card">
    <div class="card-section">
        <h4>这是一个面板</h4>
        <p>面板是用于组织内容的容器组件。</p>
    </div>
</div>

Card 结构 ​

一个完整的 Card 包含以下部分：

html
<div class="card">
    <!-- 图片区域 -->
    <img src="image.jpg" alt="图片描述">

    <!-- 分隔线 -->
    <div class="card-divider">
        <h4>标题区域</h4>
    </div>

    <!-- 内容区域 -->
    <div class="card-section">
        <p>这是卡片的主要内容区域。</p>
    </div>
</div>

Card Divider ​

card-divider 用于创建带背景的标题区域：

html
<div class="card">
    <div class="card-divider">
        <h4>新闻标题</h4>
    </div>
    <div class="card-section">
        <p>这是新闻的正文内容...</p>
    </div>
</div>

Card Section ​

card-section 是卡片的内容区域：

html
<div class="card">
    <div class="card-section">
        <h4>产品名称</h4>
        <p>产品描述信息...</p>
        <a class="button" href="#">了解更多</a>
    </div>
</div>

带图片的 Card ​

顶部图片 ​

html
<div class="card">
    <img src="https://via.placeholder.com/400x200" alt="示例图片">
    <div class="card-section">
        <h4>卡片标题</h4>
        <p>这是带有顶部图片的卡片。</p>
    </div>
</div>

底部图片 ​

html
<div class="card">
    <div class="card-section">
        <h4>卡片标题</h4>
        <p>这是带有底部图片的卡片。</p>
    </div>
    <img src="https://via.placeholder.com/400x200" alt="示例图片">
</div>

Card 网格布局 ​

使用网格系统创建 Card 布局：

html
<div class="grid-x grid-margin-x small-up-1 medium-up-2 large-up-3">
    <div class="cell">
        <div class="card">
            <img src="https://via.placeholder.com/400x200" alt="图片1">
            <div class="card-section">
                <h4>卡片 1</h4>
                <p>卡片内容描述...</p>
            </div>
        </div>
    </div>
    <div class="cell">
        <div class="card">
            <img src="https://via.placeholder.com/400x200" alt="图片2">
            <div class="card-section">
                <h4>卡片 2</h4>
                <p>卡片内容描述...</p>
            </div>
        </div>
    </div>
    <div class="cell">
        <div class="card">
            <img src="https://via.placeholder.com/400x200" alt="图片3">
            <div class="card-section">
                <h4>卡片 3</h4>
                <p>卡片内容描述...</p>
            </div>
        </div>
    </div>
</div>

自定义 Card 样式 ​

带阴影的 Card ​

html
<style>
    .card.shadow {
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transition: box-shadow 0.3s ease;
    }
    .card.shadow:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
</style>

<div class="card shadow">
    <div class="card-section">
        <h4>带阴影的卡片</h4>
        <p>鼠标悬停时阴影会变深。</p>
    </div>
</div>

彩色边框 Card ​

html
<style>
    .card.bordered-primary { border-left: 4px solid #1779ba; }
    .card.bordered-success { border-left: 4px solid #3adb76; }
    .card.bordered-warning { border-left: 4px solid #ffae00; }
    .card.bordered-alert { border-left: 4px solid #cc4b37; }
</style>

<div class="card bordered-primary">
    <div class="card-section">
        <h4>Primary 边框</h4>
        <p>带有主要颜色边框的卡片。</p>
    </div>
</div>

背景色 Card ​

html
<style>
    .card.bg-primary {
        background: #1779ba;
        color: white;
    }
    .card.bg-success {
        background: #3adb76;
        color: white;
    }
</style>

<div class="card bg-primary">
    <div class="card-section">
        <h4>蓝色背景卡片</h4>
        <p>带有彩色背景的卡片。</p>
    </div>
</div>

产品卡片示例 ​

html
<div class="card" style="max-width: 300px;">
    <img src="https://via.placeholder.com/300x200" alt="产品图片">
    <div class="card-section">
        <p class="label success">热卖</p>
        <h4>iPhone 15 Pro</h4>
        <p class="text-muted">最新款智能手机</p>
        <p class="h5" style="color: #cc4b37;">¥7999</p>
        <a class="button expanded" href="#">立即购买</a>
    </div>
</div>

用户卡片示例 ​

html
<div class="card text-center" style="max-width: 250px;">
    <div class="card-section">
        <img src="https://via.placeholder.com/100" alt="用户头像"
             style="border-radius: 50%; width: 100px; height: 100px;">
        <h4 style="margin-top: 15px;">张三</h4>
        <p class="text-muted">前端开发工程师</p>
        <div class="button-group small">
            <a class="button hollow" href="#">关注</a>
            <a class="button hollow" href="#">消息</a>
        </div>
    </div>
</div>

博客卡片示例 ​

html
<div class="card">
    <img src="https://via.placeholder.com/400x200" alt="文章配图">
    <div class="card-divider">
        <span class="label">技术</span>
        <small class="float-right">2024-01-15</small>
    </div>
    <div class="card-section">
        <h4><a href="#">如何使用 Foundation 构建响应式网站</a></h4>
        <p>Foundation 是一个强大的响应式前端框架，本文将介绍如何使用它...</p>
        <div class="grid-x align-middle">
            <div class="cell shrink">
                <img src="https://via.placeholder.com/40" alt="作者"
                     style="border-radius: 50%; width: 40px;">
            </div>
            <div class="cell auto" style="padding-left: 10px;">
                <strong>作者名称</strong>
            </div>
            <div class="cell shrink">
                <a href="#">阅读更多 &raquo;</a>
            </div>
        </div>
    </div>
</div>

统计卡片 ​

html
<div class="grid-x grid-margin-x small-up-2 medium-up-4">
    <div class="cell">
        <div class="card text-center">
            <div class="card-section">
                <h2 style="color: #1779ba;">1,234</h2>
                <p>用户总数</p>
            </div>
        </div>
    </div>
    <div class="cell">
        <div class="card text-center">
            <div class="card-section">
                <h2 style="color: #3adb76;">567</h2>
                <p>今日访问</p>
            </div>
        </div>
    </div>
    <div class="cell">
        <div class="card text-center">
            <div class="card-section">
                <h2 style="color: #ffae00;">89</h2>
                <p>待处理订单</p>
            </div>
        </div>
    </div>
    <div class="cell">
        <div class="card text-center">
            <div class="card-section">
                <h2 style="color: #cc4b37;">12</h2>
                <p>问题报告</p>
            </div>
        </div>
    </div>
</div>

价格卡片 ​

html
<div class="grid-x grid-margin-x small-up-1 medium-up-3">
    <div class="cell">
        <div class="card text-center">
            <div class="card-divider">
                <h4>基础版</h4>
            </div>
            <div class="card-section">
                <h3>¥29<small>/月</small></h3>
                <ul class="no-bullet">
                    <li>5GB 存储空间</li>
                    <li>100 个用户</li>
                    <li>邮件支持</li>
                </ul>
                <a class="button hollow" href="#">选择</a>
            </div>
        </div>
    </div>
    <div class="cell">
        <div class="card text-center" style="border: 2px solid #1779ba;">
            <div class="card-divider" style="background: #1779ba; color: white;">
                <h4>专业版 <span class="label">推荐</span></h4>
            </div>
            <div class="card-section">
                <h3>¥99<small>/月</small></h3>
                <ul class="no-bullet">
                    <li>50GB 存储空间</li>
                    <li>1000 个用户</li>
                    <li>电话支持</li>
                    <li>API 访问</li>
                </ul>
                <a class="button" href="#">选择</a>
            </div>
        </div>
    </div>
    <div class="cell">
        <div class="card text-center">
            <div class="card-divider">
                <h4>企业版</h4>
            </div>
            <div class="card-section">
                <h3>¥299<small>/月</small></h3>
                <ul class="no-bullet">
                    <li>无限存储空间</li>
                    <li>无限用户</li>
                    <li>专属客服</li>
                    <li>自定义功能</li>
                </ul>
                <a class="button hollow" href="#">选择</a>
            </div>
        </div>
    </div>
</div>

完整示例 ​

html
<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation 面板示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <style>
        .demo-section {
            margin-bottom: 40px;
        }
        .demo-section h3 {
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }

        .card.shadow {
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s ease;
        }
        .card.shadow:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .card.bordered-primary { border-left: 4px solid #1779ba; }
        .card.bordered-success { border-left: 4px solid #3adb76; }
        .card.bordered-warning { border-left: 4px solid #ffae00; }
        .card.bordered-alert { border-left: 4px solid #cc4b37; }

        .stat-value {
            font-size: 2.5rem;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation 面板展示</h1>

        <div class="demo-section">
            <h3>基本 Card</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-4">
                    <div class="card">
                        <div class="card-divider">
                            <h4>Card 标题</h4>
                        </div>
                        <div class="card-section">
                            <p>这是一个基本的 Card 组件，包含标题和内容区域。</p>
                        </div>
                    </div>
                </div>
                <div class="cell medium-4">
                    <div class="card">
                        <img src="https://via.placeholder.com/400x150" alt="示例图片">
                        <div class="card-section">
                            <h4>带图片的 Card</h4>
                            <p>这个 Card 包含一张顶部图片。</p>
                        </div>
                    </div>
                </div>
                <div class="cell medium-4">
                    <div class="card shadow">
                        <div class="card-section">
                            <h4>带阴影的 Card</h4>
                            <p>悬停时阴影会变深，增加交互感。</p>
                            <a class="button small" href="#">了解更多</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>彩色边框 Card</h3>
            <div class="grid-x grid-margin-x small-up-2 medium-up-4">
                <div class="cell">
                    <div class="card bordered-primary">
                        <div class="card-section">
                            <h5>Primary</h5>
                            <p>主要信息</p>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card bordered-success">
                        <div class="card-section">
                            <h5>Success</h5>
                            <p>成功信息</p>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card bordered-warning">
                        <div class="card-section">
                            <h5>Warning</h5>
                            <p>警告信息</p>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card bordered-alert">
                        <div class="card-section">
                            <h5>Alert</h5>
                            <p>错误信息</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>统计 Card</h3>
            <div class="grid-x grid-margin-x small-up-2 medium-up-4">
                <div class="cell">
                    <div class="card text-center">
                        <div class="card-section">
                            <div class="stat-value" style="color: #1779ba;">1,234</div>
                            <p>用户总数</p>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card text-center">
                        <div class="card-section">
                            <div class="stat-value" style="color: #3adb76;">567</div>
                            <p>今日访问</p>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card text-center">
                        <div class="card-section">
                            <div class="stat-value" style="color: #ffae00;">89</div>
                            <p>待处理订单</p>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card text-center">
                        <div class="card-section">
                            <div class="stat-value" style="color: #cc4b37;">12</div>
                            <p>问题报告</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>产品 Card</h3>
            <div class="grid-x grid-margin-x small-up-1 medium-up-2 large-up-4">
                <div class="cell">
                    <div class="card shadow">
                        <img src="https://via.placeholder.com/300x200" alt="产品">
                        <div class="card-section">
                            <span class="label success">热卖</span>
                            <h5>产品名称</h5>
                            <p class="text-muted">产品简短描述</p>
                            <p style="color: #cc4b37; font-weight: bold;">¥199.00</p>
                            <a class="button small expanded" href="#">加入购物车</a>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card shadow">
                        <img src="https://via.placeholder.com/300x200" alt="产品">
                        <div class="card-section">
                            <span class="label warning">新品</span>
                            <h5>产品名称</h5>
                            <p class="text-muted">产品简短描述</p>
                            <p style="color: #cc4b37; font-weight: bold;">¥299.00</p>
                            <a class="button small expanded" href="#">加入购物车</a>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card shadow">
                        <img src="https://via.placeholder.com/300x200" alt="产品">
                        <div class="card-section">
                            <h5>产品名称</h5>
                            <p class="text-muted">产品简短描述</p>
                            <p style="color: #cc4b37; font-weight: bold;">¥399.00</p>
                            <a class="button small expanded" href="#">加入购物车</a>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card shadow">
                        <img src="https://via.placeholder.com/300x200" alt="产品">
                        <div class="card-section">
                            <span class="label alert">促销</span>
                            <h5>产品名称</h5>
                            <p class="text-muted">产品简短描述</p>
                            <p>
                                <del style="color: #999;">¥599.00</del>
                                <span style="color: #cc4b37; font-weight: bold;">¥499.00</span>
                            </p>
                            <a class="button small expanded" href="#">加入购物车</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>用户 Card</h3>
            <div class="grid-x grid-margin-x small-up-2 medium-up-4">
                <div class="cell">
                    <div class="card text-center shadow">
                        <div class="card-section">
                            <img src="https://via.placeholder.com/80" alt="用户头像"
                                 style="border-radius: 50%; width: 80px; height: 80px;">
                            <h5 style="margin-top: 10px;">张三</h5>
                            <p class="text-muted">前端开发</p>
                            <div class="button-group tiny">
                                <a class="button hollow" href="#">关注</a>
                                <a class="button hollow" href="#">消息</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card text-center shadow">
                        <div class="card-section">
                            <img src="https://via.placeholder.com/80" alt="用户头像"
                                 style="border-radius: 50%; width: 80px; height: 80px;">
                            <h5 style="margin-top: 10px;">李四</h5>
                            <p class="text-muted">UI设计师</p>
                            <div class="button-group tiny">
                                <a class="button hollow" href="#">关注</a>
                                <a class="button hollow" href="#">消息</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>

面板最佳实践 ​

  1. 一致性：在同一页面中保持卡片样式一致
  2. 层次感：使用阴影和边框创建视觉层次
  3. 响应式：确保卡片在不同屏幕尺寸下都能良好显示
  4. 内容组织：合理使用 card-divider 和 card-section 组织内容
  5. 交互反馈：为可点击的卡片添加悬停效果

总结 ​

本章我们学习了：

  • Card 组件的基本结构
  • 不同样式的 Card（阴影、边框、背景色）
  • Card 网格布局
  • 各种实用的 Card 示例（产品、用户、统计、价格）

下一章，我们将学习 Foundation 图片。

提示：Card 是现代网页设计中常用的组件，善用它可以让你的页面更加整洁有序。