一、面板概述
面板是一个带有灰色边框、内容含有内边距的模块化容器，常用于突出显示内容区块、信息卡片或功能区域。
使用 .panel 类即可创建基础面板。
二、基础面板
<div class="panel">
<h3>标题</h3>
<p>文本内容..</p>
</div>Code language: HTML, XML (xml)三、面板颜色变体
使用 .callout 类将面板背景色修改为浅蓝色，用于强调或突出重要内容：
<div class="panel callout">
<h3>标题</h3>
<p>文本内容..</p>
</div>Code language: HTML, XML (xml)四、圆角面板
使用 .radius 类为面板添加圆角效果：
<div class="panel radius">
<h3>标题</h3>
<p>文本内容..</p>
</div>Code language: HTML, XML (xml)多个类可以组合使用，例如
.panel.callout.radius同时实现浅蓝色背景和圆角。
五、完整可运行示例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Foundation 面板示例</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
<script src="foundation-5.5.3/js/vendor/jquery.js"></script>
<script src="foundation-5.5.3/js/foundation.min.js"></script>
<script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</head>
<body>
<div class="row">
<div class="medium-12 columns">
<h3>基础面板</h3>
<div class="panel">
<h3>标题</h3>
<p>文本内容..</p>
</div>
<hr />
<h3>Callout 面板（浅蓝色）</h3>
<div class="panel callout">
<h3>标题</h3>
<p>文本内容..</p>
</div>
<hr />
<h3>圆角面板</h3>
<div class="panel radius">
<h3>标题</h3>
<p>文本内容..</p>
</div>
<hr />
<h3>组合使用（Callout + Radius）</h3>
<div class="panel callout radius">
<h3>标题</h3>
<p>文本内容..</p>
</div>
</div>
</div>
</body>
</html>Code language: HTML, XML (xml)六、使用要点小结
| 功能 | 实现方式 |
|---|---|
| 创建面板 | .panel |
| 强调色（浅蓝） | .callout |
| 圆角 | .radius |
| 组合使用 | 多个类同时添加，如 .panel.callout.radius |
Previous: Foundation 进度条（Progress Bar）