垦荒学园
  • 中文

      • Foundation 文本

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

      标题

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

      <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> 标签创建副标题：

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

      段落

      基本段落样式：

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

      引导段落（Lead Paragraph）

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

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

      文本样式

      粗体和斜体

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

      小号文本

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

      高亮文本

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

      删除线和插入线

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

      文本对齐

      Foundation 提供了文本对齐类：

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

      响应式文本对齐

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

      <!-- 小屏幕居中，中等屏幕左对齐 -->
<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

      列表

      无序列表

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

      有序列表

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

      无样式列表

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

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

      定义列表

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

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

      引用

      块引用

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

      代码

      行内代码

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

      代码块

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

      键盘输入

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

      缩写

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

      文本颜色

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

      <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 类创建大号数字显示：

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

      响应式排版

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

      显示/隐藏文本

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

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

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

      无障碍访问

      屏幕阅读器类

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

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

      完整示例

      <!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 单位，基于根元素的字体大小，这使得整体缩放更加灵活。