📌  相关文章
📜  W3.CSS-卡(1)

📅  最后修改于: 2023-12-03 15:05:54.124000             🧑  作者: Mango

W3.CSS-卡

W3.CSS-卡是一个基于W3.CSS框架的卡片式UI组件，适用于程序员快速创建各种卡片布局。

特点
  • 基于W3.CSS框架，轻量、灵活、响应式。
  • 提供多种卡片样式和布局选择。
  • 简单易用，无需编写繁琐的CSS代码。
使用示例
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <style>
        /* 自定义样式 */
        .my-card {
            background-color: lightgray;
            border-radius: 4px;
            padding: 10px;
        }
        .my-card-title {
            font-weight: bold;
        }
        .my-card:hover {
            background-color: darkgray;
        }
    </style>
</head>
<body>

<!-- 基本卡片 -->
<div class="w3-card w3-hover-shadow">
    <header class="w3-container w3-blue">
        <h2>基本卡片</h2>
    </header>
    <div class="w3-container">
        <p>这是一张基本卡片。</p>
    </div>
</div>

<!-- 自定义样式 -->
<div class="w3-card my-card">
    <header class="w3-container w3-light-grey">
        <h2 class="my-card-title">自定义样式</h2>
    </header>
    <div class="w3-container">
        <p>这是一张自定义样式的卡片。</p>
    </div>
</div>

</body>
</html>
效果展示

基本卡片：

基本卡片

自定义样式：

自定义样式

文档参考