二维码
意见反馈

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.webcn99.com/wp-content/uploads/2015/11/20121204024112919.jpg" alt="Cinque 
	Terre">   <div class="container">    
	<h4>长城</h4>    <p>不到长城非好汉!!!</p>  
	</div></div>
亲自试一试