Foundation 面板

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

實例

<
div
class=
"panel"
>

 
<
h3
>標題
<
/h3
>

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


<
/div
>

嘗試一下 ?

---

面板顏色

使用 .callout 類將面板顏色修改為淺藍：

實例

<
div
class=
"panel callout"
>

 
<
h3
>標題
<
/h3
>

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


<
/div
>

嘗試一下 ?

---

圓角面板

使用 .radius 類將面板設置為圓角：

實例

<
div
class=
"panel radius"
>

 
<
h3
>標題
<
/h3
>

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


<
/div
>

嘗試一下 ?

---

自定義面板

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

實例

<
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
>

嘗試一下 ?

本文標題：創(chuàng)新互聯(lián)Foundation教程：Foundation 面板
網站鏈接：http://m.5511xx.com/article/djjgdgg.html