VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >
  • HTML5 教程之Foundation 面板

Foundation 面板是一个灰色边框,内容含有内边距的模块。可以使用 .panel 类来创建:

实例


	
  1. <div class="panel">
  2.   <h3>标题</h3>
  3.   <p>文本内容..</p>
  4. </div>
复制
实例预览 »

面板颜色

使用 .callout 类将面板颜色修改为浅蓝:

实例


	
  1. <div class="panel callout">
  2.   <h3>标题</h3>
  3.   <p>文本内容..</p>
  4. </div>
复制
实例预览 »

圆角面板

使用 .radius 类将面板设置为圆角:

实例


	
  1. <div class="panel radius">
  2.   <h3>标题</h3>
  3.   <p>文本内容..</p>
  4. </div>
复制
实例预览 »

自定义面板

可以使用 CSS 来自定义面板,以下实例中我们将面板作为一个卡片:

实例


	
  1. <style>
  2. .panel {
  3.     padding: 0;
  4.     border: none;
  5.     width: 50%;
  6. }
  7. div.container {
  8.     text-align: center;
  9.     padding: 15px;
  10.     margin-top: 20px;
  11. }
  12. img {
  13.     width: 100%;
  14. }
  15. </style>
  16.  
  17. <div class="panel">
  18.   <img src="//ku.shouce.ren/files/images/201603/56e184762dc19.jpg" alt="Cinque Terre"> 
  19.   <div class="container">
  20.     <h4>长城</h4>
  21.     <p>不到长城非好汉!!!</p>
  22.   </div>
  23. </div>
复制
实例预览 »
 

相关教程