新聞中心
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


咨詢
建站咨詢
