垦荒学园

简体中文

English

简体中文

English

切换主题

Foundation 文本 ​

Foundation 提供了丰富的排版样式，帮助你创建美观、易读的文本内容。本章将详细介绍 Foundation 的文本和排版功能。

标题 ​

Foundation 支持 HTML 的六级标题（h1-h6）：

html
<h1>标题 1</h1>
<h2>标题 2</h2>
<h3>标题 3</h3>
<h4>标题 4</h4>
<h5>标题 5</h5>
<h6>标题 6</h6>

标题默认尺寸 ​

标题移动端尺寸桌面端尺寸
h124px48px
h220px40px
h319px31px
h418px25px
h517px20px
h616px16px

副标题 ​

使用 <small> 标签创建副标题：

html
<h1>主标题 <small>副标题</small></h1>
<h2>主标题 <small>副标题</small></h2>

段落 ​

基本段落样式：

html
<p>这是一个普通段落。Foundation 默认段落字体大小为 16px，行高为 1.6。</p>

引导段落（Lead Paragraph） ​

使用 .lead 类创建突出显示的引导段落：

html
<p class="lead">这是一个引导段落，字体更大，适合用于文章开头或重要说明。</p>

文本样式 ​

粗体和斜体 ​

html
<p><strong>粗体文本</strong> 使用 strong 标签</p>
<p><b>粗体文本</b> 使用 b 标签</p>
<p><em>斜体文本</em> 使用 em 标签</p>
<p><i>斜体文本</i> 使用 i 标签</p>

小号文本 ​

html
<p><small>这是小号文本</small></p>

高亮文本 ​

html
<p>这是 <mark>高亮显示</mark> 的文本。</p>

删除线和插入线 ​

html
<p><del>删除的文本</del></p>
<p><s>不再准确的文本</s></p>
<p><ins>新插入的文本</ins></p>
<p><u>带下划线的文本</u></p>

文本对齐 ​

Foundation 提供了文本对齐类：

html
<p class="text-left">左对齐文本</p>
<p class="text-right">右对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-justify">两端对齐文本。这段文本会自动调整单词间距，使每行文本的左右两端都对齐。</p>

响应式文本对齐 ​

可以针对不同屏幕尺寸设置不同的对齐方式：

html
<!-- 小屏幕居中，中等屏幕左对齐 -->
<p class="small-text-center medium-text-left">响应式对齐</p>

<!-- 小屏幕左对齐，大屏幕右对齐 -->
<p class="small-text-left large-text-right">响应式对齐</p>

可用的响应式类：

  • small-text-left、small-text-center、small-text-right、small-text-justify
  • medium-text-left、medium-text-center、medium-text-right、medium-text-justify
  • large-text-left、large-text-center、large-text-right、large-text-justify

列表 ​

无序列表 ​

html
<ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3
        <ul>
            <li>嵌套项 1</li>
            <li>嵌套项 2</li>
        </ul>
    </li>
</ul>

有序列表 ​

html
<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

无样式列表 ​

使用 .no-bullet 类移除列表符号：

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

定义列表 ​

html
<dl>
    <dt>术语标题</dt>
    <dd>术语的定义和解释。</dd>

    <dt>另一个术语</dt>
    <dd>另一个术语的定义。</dd>
</dl>

引用 ​

块引用 ​

html
<blockquote>
    这是一段引用文本。引用通常用于显示来自其他来源的内容。
    <cite>— 引用来源</cite>
</blockquote>

代码 ​

行内代码 ​

html
<p>使用 <code>code</code> 标签显示行内代码。</p>

代码块 ​

html
<pre>
<code>
function sayHello() {
    console.log("Hello, Foundation!");
}
</code>
</pre>

键盘输入 ​

html
<p>按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制。</p>

缩写 ​

html
<p><abbr title="Hypertext Markup Language">HTML</abbr> 是网页的基础。</p>

文本颜色 ​

Foundation 提供了预定义的颜色类：

html
<p class="primary-color">主要颜色文本</p>
<p class="secondary-color">次要颜色文本</p>
<p class="success-color">成功颜色文本</p>
<p class="warning-color">警告颜色文本</p>
<p class="alert-color">警报颜色文本</p>

统计数字样式 ​

使用 .stat 类创建大号数字显示：

html
<div class="stat">
    10,000
    <span class="stat-label">用户数量</span>
</div>

响应式排版 ​

Foundation 的排版会根据屏幕尺寸自动调整。你也可以使用以下类来手动控制：

显示/隐藏文本 ​

html
<!-- 只在小屏幕显示 -->
<p class="show-for-small-only">只在手机上显示</p>

<!-- 在中等及以上屏幕显示 -->
<p class="show-for-medium">在平板和电脑上显示</p>

<!-- 只在大屏幕显示 -->
<p class="show-for-large">只在大屏幕显示</p>

无障碍访问 ​

屏幕阅读器类 ​

html
<!-- 视觉隐藏，但屏幕阅读器可读 -->
<span class="show-for-sr">这段文字只有屏幕阅读器能读到</span>

<!-- 聚焦时显示（跳过链接） -->
<a class="show-on-focus" href="#main-content">跳到主要内容</a>

完整示例 ​

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">
</head>
<body>
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="cell">
                <h1>文章标题 <small>副标题</small></h1>

                <p class="lead">这是文章的引导段落，用于概述文章的主要内容。</p>

                <h2>第一章节</h2>
                <p>这是普通段落文本。你可以使用 <strong>粗体</strong>、<em>斜体</em>、<mark>高亮</mark> 等样式。</p>

                <blockquote>
                    学习是一个持续的过程，Foundation 可以帮助你更高效地构建网站。
                    <cite>— 网页开发者</cite>
                </blockquote>

                <h3>代码示例</h3>
                <p>使用 <code>.lead</code> 类创建引导段落。</p>

                <h3>特性列表</h3>
                <ul>
                    <li>响应式设计</li>
                    <li>丰富的组件</li>
                    <li>可定制性强</li>
                </ul>

                <p class="text-center">
                    <small>版权所有 &copy; 2024</small>
                </p>
            </div>
        </div>
    </div>
</body>
</html>

总结 ​

本章我们学习了：

  • 标题和副标题的使用
  • 各种文本样式（粗体、斜体、高亮等）
  • 文本对齐方式
  • 列表的创建
  • 引用和代码显示
  • 无障碍访问支持

下一章，我们将学习 Foundation 表格。

提示：Foundation 的排版样式默认使用 rem 单位，基于根元素的字体大小，这使得整体缩放更加灵活。