W3.CSS 标签介绍

W3.CSS 是一套轻量级的 CSS 框架，旨在为 Web 开发人员提供现代化、响应式的设计样式和工具。它由 W3Schools 创建，用于更快、更易于创建漂亮的网站和 Web 应用程序。

标签介绍

<w3-container>

<w3-container> 标签用于定义一个内容区域。它可以包含文本、图像、表格、表单和其他 HTML 元素。可以使用不同类名来指定容器的颜色、宽度和边距。

<w3-container>
  <h1>Hello World!</h1>
  <p>这是一个 W3.CSS 容器。</p>
</w3-container>

<w3-card>

<w3-card> 标签用于创建卡片式 UI 元素。可以使用不同类名定义卡片的颜色、宽度、高度、边距和阴影效果。

<w3-card class="w3-blue w3-padding">
  <h4>卡片标题</h4>
  <p>这是一个 W3.CSS 卡片。</p>
</w3-card>

<w3-button>

<w3-button> 标签用于创建按钮元素。可以使用不同类名定义按钮的样式、尺寸和颜色。

<w3-button class="w3-red">红色按钮</w3-button>

<w3-input>

<w3-input> 标签用于创建输入字段。可以使用不同类型定义输入字段的类型（如文本、密码、日期、时间、电子邮件等）。

<w3-input type="text" placeholder="请输入用户名"></w3-input>

<w3-dropdown>

<w3-dropdown> 标签用于创建下拉菜单。可以使用不同类名定义菜单的样式、大小、颜色和边距。

<div class="w3-dropdown-hover">
  <button class="w3-button">下拉菜单</button>
  <div class="w3-dropdown-content w3-bar-block w3-card">
    <a href="#" class="w3-bar-item w3-button">选项 1</a>
    <a href="#" class="w3-bar-item w3-button">选项 2</a>
    <a href="#" class="w3-bar-item w3-button">选项 3</a>
  </div>
</div>

<w3-modal>

<w3-modal> 标签用于创建弹出窗口。可以使用不同类名定义弹出窗口的样式、大小、颜色和边距。

<div class="w3-container w3-center">
  <h2>W3.CSS 模态框</h2>
  <p>点击下面的按钮打开模态框：</p>
  <w3-button onclick="document.getElementById('myModal').style.display='block'">打开模态框</w3-button>
</div>

<w3-modal id="myModal">
  <div class="w3-modal-content w3-animate-top w3-card">
    <header class="w3-container w3-teal">
      <h3>模态框标题</h3>
      <span onclick="document.getElementById('myModal').style.display='none'" class="w3-button w3-display-topright">&times;</span>
    </header>
    <div class="w3-container">
      <p>这是一个 W3.CSS 模态框。</p>
    </div>
    <footer class="w3-container w3-light-grey">
      <w3-button onclick="document.getElementById('myModal').style.display='none'" class="w3-right">关闭模态框</w3-button>
    </footer>
  </div>
</w3-modal>

结论

W3.CSS 提供了许多有用的标签和类名称，使 Web 开发人员能够更快、更轻松地创建漂亮的网站和 Web 应用程序。如果您正在寻找一种轻量级的 CSS 框架，那么 W3.CSS 是一个不错的选择。