W3.CSS 容器和面板介绍

W3.CSS 是一个用于构建现代化网页的 CSS 框架。它提供了一系列的容器和面板组件，用于布局和展示内容。本文将介绍 W3.CSS 提供的容器和面板组件，以及如何在你的网页中使用它们。

容器

W3.CSS 提供了多种容器组件，用于包裹和布局内容。以下是一些常用的容器组件：

容器 (Container)

<div class="w3-container">
  <!-- 内容 -->
</div>

容器使用 w3-container 类来定义。它能够动态适应页面的宽度，并提供默认的边距和填充。你可以在容器中放置任何内容。

栅格容器 (Grid Container)

<div class="w3-row">
  <div class="w3-col">
    <!-- 内容 -->
  </div>
  <div class="w3-col">
    <!-- 内容 -->
  </div>
</div>

栅格容器使用 w3-row 类来定义。它可以帮助你创建响应式的网格布局，允许你在网页中使用栅格系统来进行内容的排列和对齐。

分割容器 (Split Container)

<div class="w3-twothird">
  <!-- 内容 -->
</div>
<div class="w3-third">
  <!-- 内容 -->
</div>

分割容器使用 w3-twothird 和 w3-third 类来定义。它将容器分为两个或多个部分，每个部分可以包含不同的内容。

面板

W3.CSS 提供了多种面板组件，用于展示信息或切换内容。以下是一些常用的面板组件：

盒子 (Box)

<div class="w3-card">
  <header class="w3-container w3-blue">
    <h2>标题</h2>
  </header>
  <div class="w3-container">
    <p>内容</p>
  </div>
  <footer class="w3-container w3-blue">
    <p>页脚</p>
  </footer>
</div>

盒子使用 w3-card 类来定义。它可以用于展示一个完整的区块，包含标题、内容和页脚。

标签页 (Tabs)

<div class="w3-bar w3-light-grey">
  <button class="w3-bar-item w3-button">标签1</button>
  <button class="w3-bar-item w3-button">标签2</button>
  <button class="w3-bar-item w3-button">标签3</button>
</div>
<div class="w3-container">
  <!-- 标签内容 -->
</div>

标签页使用 w3-bar 和 w3-button 类来定义。它可以帮助你在同一区域显示多个标签，并根据用户点击的标签切换内容。

手风琴 (Accordion)

<button class="w3-button w3-block w3-left-align">标题1</button>
<div class="w3-container">
  <!-- 内容1 -->
</div>
<button class="w3-button w3-block w3-left-align">标题2</button>
<div class="w3-container">
  <!-- 内容2 -->
</div>

手风琴使用 w3-button 和 w3-container 类来定义。它可以在点击标题时展开或收起对应的内容，一次只显示一个内容。

以上是 W3.CSS 提供的一些常见的容器和面板组件。你可以根据自己的需求选择合适的组件来优化你的网页布局和展示效果。详细的文档和示例可以在 W3.CSS 官网 上查阅。