Foundation 面板

Foundation 面板是一個(gè)灰色邊框，內(nèi)容含有內(nèi)邊距的模塊?？梢允褂?.panel 類來創(chuàng)建:

實(shí)例

<
div
class=
"panel"
>

 
<
h3
>標(biāo)題
<
/h3
>

 
<
p
>文本內(nèi)容..
<
/p
>


<
/div
>

嘗試一下 ?

---

面板顏色

使用 .callout 類將面板顏色修改為淺藍(lán)：

實(shí)例

<
div
class=
"panel callout"
>

 
<
h3
>標(biāo)題
<
/h3
>

 
<
p
>文本內(nèi)容..
<
/p
>


<
/div
>

嘗試一下 ?

---

圓角面板

使用 .radius 類將面板設(shè)置為圓角：

實(shí)例

<
div
class=
"panel radius"
>

 
<
h3
>標(biāo)題
<
/h3
>

 
<
p
>文本內(nèi)容..
<
/p
>


<
/div
>

嘗試一下 ?

---

自定義面板

可以使用 CSS 來自定義面板，以下實(shí)例中我們將面板作為一個(gè)卡片：

實(shí)例

<
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=
"http://www.cdcxhl.com/wp-content/uploads/2015/11/20121204024112919.jpg"
alt=
"Cinque Terre"
>

 
<
div
class=
"container"
>

   
<
h4
>長城
<
/h4
>

   
<
p
>不到長城非好漢?。?！
<
/p
>

 
<
/div
>


<
/div
>

嘗試一下 ?

網(wǎng)站名稱：創(chuàng)新互聯(lián)Foundation教程：Foundation 面板
文章出自：http://fisionsoft.com.cn/article/djjgdgg.html