文字
分享

Foundation 面板


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

实例

1

2

3

4

<div class="panel">

  <h3>标题</h3>

  <p>文本内容..</p>

</div>

实例预览 »

面板颜色

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

实例

1

2

3

4

<div class="panel callout">

  <h3>标题</h3>

  <p>文本内容..</p>

</div>

实例预览 »

圆角面板

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

实例

1

2

3

4

<div class="panel radius">

  <h3>标题</h3>

  <p>文本内容..</p>

</div>

实例预览 »

自定义面板

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

实例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<style>

.panel {

    padding: 0;

    border: none;

    width: 50%;

}

div.container {

    text-align: center;

    padding: 15px;

    margin-top: 20px;

}

img {

    width: 100%;

}

</style>

 

<div class="panel">

  <img src="//ku.shouce.ren/files/images/201603/56e184762dc19.jpg" alt="Cinque Terre"

  <div class="container">

    <h4>长城</h4>

    <p>不到长城非好汉!!!</p>

  </div>

</div>

实例预览 »


关于我们 联系我们 留言板

手册网