Foundation 面板 - 学习 Foundation 5 - 简单教程，简单编程

Foundation 面板是一个带有灰色边框，内容含有内边距的模块

Foundation 使用 .panel CSS class 创建面板

<div class="panel">
    <h3>标题</h3>  
    <p>文本内容..</p>
</div>

运行范例 »

面板颜色

可以使用 .callout CSS 类将面板颜色修改为浅蓝

<div class="panel callout">
    <h3>标题</h3>  
    <p>文本内容..</p>
</div>

运行范例 »

圆角面板

可以使用 .radius CSS 类将面板设置为圆角

<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="/static/i/foundation/panel_1.jpg" alt="Cinque Terre">
    <div class="container">    
        <h4>简单教程</h4>
        <p>简单教程，简单编程</p>  
    </div>
</div>

运行范例 »