Latest web development tutorials

Foundation 面板

Foundation 面板是一個灰色邊框,內容含有內邊距的模塊。 可以使用.panel類來創建:

實例

< 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.w3big.com/wp-content/uploads/2015/11/20121204024112919.jpg" alt= "Cinque Terre" >
< div class= "container" >
< h4 >長城< /h4 >
< p >不到長城非好漢! ! ! < /p >
< /div >
< /div >

嘗試一下»