垦荒学园

简体中文

English

简体中文

English

切换主题

Foundation 列表 ​

Foundation 提供了多种列表样式，用于创建导航菜单、内容列表等。本章将介绍 Foundation 列表的各种用法。

基本菜单 ​

使用 .menu 类创建基本菜单：

html
<ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
</ul>

垂直菜单 ​

使用 .vertical 类创建垂直菜单：

html
<ul class="vertical menu">
    <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>

菜单对齐 ​

居中对齐 ​

html
<ul class="menu align-center">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
</ul>

右对齐 ​

html
<ul class="menu align-right">
    <li><a href="#">登录</a></li>
    <li><a href="#">注册</a></li>
</ul>

均匀分布 ​

html
<ul class="menu expanded">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
</ul>

活动状态 ​

使用 .is-active 标记当前项：

html
<ul class="menu">
    <li class="is-active"><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
</ul>

嵌套菜单 ​

创建多级嵌套菜单：

html
<ul class="vertical menu">
    <li>
        <a href="#">产品</a>
        <ul class="nested vertical menu">
            <li><a href="#">产品 A</a></li>
            <li><a href="#">产品 B</a></li>
            <li>
                <a href="#">产品 C</a>
                <ul class="nested vertical menu">
                    <li><a href="#">C-1</a></li>
                    <li><a href="#">C-2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于</a></li>
</ul>

带图标的菜单 ​

结合图标使用：

html
<ul class="vertical menu">
    <li><a href="#"><i class="fi-home"></i> 首页</a></li>
    <li><a href="#"><i class="fi-torso"></i> 个人中心</a></li>
    <li><a href="#"><i class="fi-widget"></i> 设置</a></li>
    <li><a href="#"><i class="fi-mail"></i> 消息</a></li>
    <li><a href="#"><i class="fi-power"></i> 退出</a></li>
</ul>

纯图标菜单 ​

html
<ul class="menu icons icon-top">
    <li><a href="#"><i class="fi-home"></i><span>首页</span></a></li>
    <li><a href="#"><i class="fi-torso"></i><span>用户</span></a></li>
    <li><a href="#"><i class="fi-widget"></i><span>设置</span></a></li>
</ul>

简单菜单 ​

使用 .simple 类创建简洁菜单：

html
<ul class="menu simple">
    <li><a href="#">链接 1</a></li>
    <li><a href="#">链接 2</a></li>
    <li><a href="#">链接 3</a></li>
</ul>

菜单文本 ​

使用 .menu-text 添加非链接文本：

html
<ul class="menu">
    <li class="menu-text">网站名称</li>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
</ul>

响应式菜单 ​

根据屏幕尺寸改变方向：

html
<ul class="vertical medium-horizontal menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
</ul>

Drilldown 菜单 ​

多级钻取菜单：

html
<ul class="vertical menu" data-drilldown>
    <li>
        <a href="#">产品</a>
        <ul class="vertical menu">
            <li>
                <a href="#">电子产品</a>
                <ul class="vertical menu">
                    <li><a href="#">手机</a></li>
                    <li><a href="#">电脑</a></li>
                </ul>
            </li>
            <li><a href="#">家居用品</a></li>
        </ul>
    </li>
    <li>
        <a href="#">服务</a>
        <ul class="vertical menu">
            <li><a href="#">咨询服务</a></li>
            <li><a href="#">技术支持</a></li>
        </ul>
    </li>
    <li><a href="#">关于</a></li>
</ul>

定义列表 ​

基本定义列表 ​

html
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于创建网页结构。</dd>

    <dt>CSS</dt>
    <dd>层叠样式表，用于设置网页样式。</dd>

    <dt>JavaScript</dt>
    <dd>脚本语言，用于实现网页交互。</dd>
</dl>

水平定义列表 ​

html
<style>
    .horizontal-dl {
        display: flex;
        flex-wrap: wrap;
    }
    .horizontal-dl dt {
        flex: 0 0 30%;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .horizontal-dl dd {
        flex: 0 0 70%;
        margin-bottom: 10px;
        margin-left: 0;
    }
</style>

<dl class="horizontal-dl">
    <dt>产品名称</dt>
    <dd>Foundation 框架</dd>
    <dt>版本</dt>
    <dd>6.7.5</dd>
    <dt>开发者</dt>
    <dd>ZURB</dd>
</dl>

无序列表样式 ​

无符号列表 ​

html
<ul class="no-bullet">
    <li>没有符号的列表项</li>
    <li>没有符号的列表项</li>
    <li>没有符号的列表项</li>
</ul>

自定义符号 ​

html
<style>
    ul.custom-bullet li::before {
        content: "→ ";
        color: #1779ba;
    }
    ul.custom-bullet {
        list-style: none;
        padding-left: 0;
    }
</style>

<ul class="custom-bullet">
    <li>自定义符号列表</li>
    <li>使用箭头作为符号</li>
    <li>更加美观</li>
</ul>

列表与卡片结合 ​

html
<ul class="no-bullet">
    <li class="card" style="margin-bottom: 10px;">
        <div class="card-section">
            <h5>列表项标题 1</h5>
            <p>列表项描述内容...</p>
        </div>
    </li>
    <li class="card" style="margin-bottom: 10px;">
        <div class="card-section">
            <h5>列表项标题 2</h5>
            <p>列表项描述内容...</p>
        </div>
    </li>
</ul>

媒体列表 ​

html
<style>
    .media-list {
        list-style: none;
        padding: 0;
    }
    .media-list li {
        display: flex;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
    }
    .media-list .media-image {
        flex-shrink: 0;
        width: 80px;
        height: 80px;
        margin-right: 15px;
    }
    .media-list .media-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
    }
    .media-list .media-body h5 {
        margin-bottom: 5px;
    }
    .media-list .media-body p {
        color: #666;
        margin: 0;
    }
</style>

<ul class="media-list">
    <li>
        <div class="media-image">
            <img src="https://via.placeholder.com/80" alt="文章图片">
        </div>
        <div class="media-body">
            <h5>文章标题</h5>
            <p>这是文章的简短描述，介绍文章的主要内容...</p>
            <small class="text-muted">2024-01-15</small>
        </div>
    </li>
    <li>
        <div class="media-image">
            <img src="https://via.placeholder.com/80" alt="文章图片">
        </div>
        <div class="media-body">
            <h5>另一篇文章</h5>
            <p>这是另一篇文章的简短描述...</p>
            <small class="text-muted">2024-01-14</small>
        </div>
    </li>
</ul>

完整示例 ​

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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
    <style>
        .demo-section {
            margin-bottom: 40px;
            padding: 20px;
            background: #f8f8f8;
            border-radius: 4px;
        }
        .demo-section h3 {
            margin-bottom: 20px;
        }

        .menu a i { margin-right: 8px; }

        .media-list { list-style: none; padding: 0; }
        .media-list li {
            display: flex;
            padding: 15px;
            border-bottom: 1px solid #eee;
            background: white;
        }
        .media-list .media-image {
            flex-shrink: 0;
            width: 80px;
            height: 80px;
            margin-right: 15px;
        }
        .media-list .media-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 4px;
        }
        .media-list .media-body h5 { margin-bottom: 5px; }
        .media-list .media-body p { color: #666; margin: 0; font-size: 14px; }

        ul.custom-bullet { list-style: none; padding-left: 0; }
        ul.custom-bullet li::before {
            content: "✓ ";
            color: #3adb76;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation 列表展示</h1>

        <div class="demo-section">
            <h3>水平菜单</h3>
            <ul class="menu">
                <li class="is-active"><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>

        <div class="demo-section">
            <h3>菜单对齐</h3>
            <p>居中对齐：</p>
            <ul class="menu align-center">
                <li><a href="#">首页</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">联系</a></li>
            </ul>
            <p>右对齐：</p>
            <ul class="menu align-right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
            </ul>
            <p>均匀分布：</p>
            <ul class="menu expanded">
                <li><a href="#">首页</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>垂直菜单</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-4">
                    <ul class="vertical menu">
                        <li class="is-active"><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>
                <div class="cell medium-4">
                    <ul class="vertical menu">
                        <li><a href="#"><i class="fi-home"></i> 首页</a></li>
                        <li><a href="#"><i class="fi-torso"></i> 个人中心</a></li>
                        <li><a href="#"><i class="fi-widget"></i> 设置</a></li>
                        <li><a href="#"><i class="fi-mail"></i> 消息</a></li>
                        <li><a href="#"><i class="fi-power"></i> 退出</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>嵌套菜单</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-4">
                    <ul class="vertical menu">
                        <li>
                            <a href="#">产品分类</a>
                            <ul class="nested vertical menu">
                                <li><a href="#">电子产品</a></li>
                                <li><a href="#">家居用品</a></li>
                                <li>
                                    <a href="#">服装配饰</a>
                                    <ul class="nested vertical menu">
                                        <li><a href="#">男装</a></li>
                                        <li><a href="#">女装</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">关于我们</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>简单菜单</h3>
            <ul class="menu simple">
                <li><a href="#">链接 1</a></li>
                <li><a href="#">链接 2</a></li>
                <li><a href="#">链接 3</a></li>
                <li><a href="#">链接 4</a></li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>带文本的菜单</h3>
            <ul class="menu">
                <li class="menu-text">网站名称</li>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>无符号列表</h3>
            <ul class="no-bullet">
                <li>没有符号的列表项 1</li>
                <li>没有符号的列表项 2</li>
                <li>没有符号的列表项 3</li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>自定义符号列表</h3>
            <ul class="custom-bullet">
                <li>自定义符号列表项 1</li>
                <li>自定义符号列表项 2</li>
                <li>自定义符号列表项 3</li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>定义列表</h3>
            <dl>
                <dt>HTML</dt>
                <dd>超文本标记语言，用于创建网页结构。</dd>
                <dt>CSS</dt>
                <dd>层叠样式表，用于设置网页样式。</dd>
                <dt>JavaScript</dt>
                <dd>脚本语言，用于实现网页交互。</dd>
            </dl>
        </div>

        <div class="demo-section">
            <h3>媒体列表</h3>
            <ul class="media-list">
                <li>
                    <div class="media-image">
                        <img src="https://via.placeholder.com/80" alt="图片">
                    </div>
                    <div class="media-body">
                        <h5>Foundation 6 发布</h5>
                        <p>Foundation 6 带来了全新的功能和改进...</p>
                        <small class="text-muted">2024-01-15</small>
                    </div>
                </li>
                <li>
                    <div class="media-image">
                        <img src="https://via.placeholder.com/80" alt="图片">
                    </div>
                    <div class="media-body">
                        <h5>响应式设计最佳实践</h5>
                        <p>了解如何使用 Foundation 创建响应式网站...</p>
                        <small class="text-muted">2024-01-14</small>
                    </div>
                </li>
                <li>
                    <div class="media-image">
                        <img src="https://via.placeholder.com/80" alt="图片">
                    </div>
                    <div class="media-body">
                        <h5>CSS Grid 与 Flexbox 对比</h5>
                        <p>深入了解两种布局方式的优缺点...</p>
                        <small class="text-muted">2024-01-13</small>
                    </div>
                </li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Drilldown 菜单</h3>
            <div style="max-width: 300px;">
                <ul class="vertical menu" data-drilldown style="max-width: 300px;">
                    <li>
                        <a href="#">产品</a>
                        <ul class="vertical menu">
                            <li>
                                <a href="#">电子产品</a>
                                <ul class="vertical menu">
                                    <li><a href="#">手机</a></li>
                                    <li><a href="#">电脑</a></li>
                                    <li><a href="#">平板</a></li>
                                </ul>
                            </li>
                            <li><a href="#">家居用品</a></li>
                            <li><a href="#">服装配饰</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">服务</a>
                        <ul class="vertical menu">
                            <li><a href="#">咨询服务</a></li>
                            <li><a href="#">技术支持</a></li>
                        </ul>
                    </li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </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. 语义化：使用合适的列表元素（ul、ol、dl）
  2. 可访问性：确保导航菜单可以通过键盘操作
  3. 响应式：考虑在不同屏幕尺寸下的显示效果
  4. 状态反馈：使用 .is-active 标记当前状态
  5. 一致性：保持列表样式的一致性

总结 ​

本章我们学习了：

  • 水平和垂直菜单
  • 菜单对齐和活动状态
  • 嵌套菜单和 Drilldown 菜单
  • 带图标的菜单
  • 无序列表和定义列表
  • 媒体列表

下一章，我们将学习 Foundation 选项卡。

提示：列表是网页中最常用的元素之一，善用 Foundation 的菜单类可以快速创建美观的导航。