Foundation 面板

前言

  • Foundation 面板。

1、面板

  • Foundation 面板是一个灰色边框,内容含有内边距的模块。可以使用 .panel 类来创建:

  • 实例

    1
    2
    3
    4
    <div class="panel">
    <h3>标题</h3>
    <p>文本内容..</p>
    </div>
  • 效果 🔗

2、面板颜色

  • 使用 .callout 类将面板颜色修改为浅蓝:

  • 实例

    1
    2
    3
    4
    <div class="panel callout">
    <h3>标题</h3>
    <p>文本内容..</p>
    </div>
  • 效果 🔗

3、圆角面板

  • 使用 .radius 类将面板设置为圆角:

  • 实例

    1
    2
    3
    4
    <div class="panel radius">
    <h3>标题</h3>
    <p>文本内容..</p>
    </div>
  • 效果 🔗

4、自定义面板

  • 可以使用 CSS 来自定义面板,以下实例中将面板作为一个卡片:

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <div class="panel">
    <img src="https://demo.qianchia.com/media/image/demo11.png" alt="Cinque Terre" width="400" height="300" />
    <div class="container">
    <h3>标题</h3>
    <p>文本内容..</p>
    </div>
    </div>

    <style>
    body {
    padding: 20px;
    }
    .panel {
    padding: 0;
    border: none;
    width: 50%;
    }
    div.container {
    text-align: center;
    padding: 15px;
    margin-top: 20px;
    }
    img {
    width: 100%;
    }
    </style>
  • 效果 🔗

文章目录
  1. 1. 前言
  2. 2. 1、面板
  3. 3. 2、面板颜色
  4. 4. 3、圆角面板
  5. 5. 4、自定义面板
隐藏目录