Foundation 面板

前言

• Foundation 面板。

1、面板

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

• 实例

  <div class="panel">
      <h3>标题</h3>
      <p>文本内容..</p>
  </div>

• 效果 🔗

  

2、面板颜色

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

• 实例

  <div class="panel callout">
      <h3>标题</h3>
      <p>文本内容..</p>
  </div>

• 效果 🔗

  

3、圆角面板

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

• 实例

  <div class="panel radius">
      <h3>标题</h3>
      <p>文本内容..</p>
  </div>

• 效果 🔗

  

4、自定义面板

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

• 实例

  <div class="panel">
      <img src="https://demo.qianchia.com/media/image/demo/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>

• 效果 🔗