html 实例

一、用css3制作功能表

大家对阴影，圆角，渐变和CSS3特性情有独钟。今天我就用css3为大家做个实例：功能表。 先看下效果图： 这里为了方便大家线下理解，我提供给大家下载地址及演示地址。 演示地址 下…
 

 大家对阴影，圆角，渐变和CSS3特性情有独钟。今天我就用css3为大家做个实例：功能表。
 

先看下效果图：
 


这里为了方便大家线下理解，我提供给大家下载地址及演示地址。
 
演示地址
 




下载附件
 

 
 
HTML代码
 
下面你可以找到的缩写HTML：
 

XML/HTML Code复制内容到剪贴板
 
<table class="features-table">   
         <thead>   
                 <tr>   
                         <td></td>   
                         <td>Standard</td>   
                         <td>Professional</td>   
                         <td>Enterprise</td>   
                 </tr>   
         </thead>   
         <tfoot>   
                 <tr>   
                         <td></td>   
                         <td>$99</td>   
                         <td>$199</td>   
                         <td>$399</td>   
                 </tr>   
         </tfoot>   
         <tbody>   
                 <tr>   
                         <td>Custom domain</td>   
                         <td><img src="check.png" width="16" height="16" alt="check"></td>   
                         <td><img src="check.png" width="16" height="16" alt="check"></td>   
                         <td><img src="check.png" width="16" height="16" alt="check"></td>   
                 </tr>   
                 <tr>   
                         <td>Advanced control</td>   
                         <td><img src="check.png" width="16" height="16" alt="check"></td>   
                         <td><img src="check.png" width="16" height="16" alt="check"></td>   
                         <td><img src="check.png" width="16" height="16" alt="check"></td>   
                 </tr>   
                 <tr>   
                         <td>Unlimited support</td>   
                         <td><img src="cross.png" width="16" height="16" alt="cross"></td>   
                         <td><img src="check.png" width="16" height="16" alt="check"></td>   
                         <td><img src="check.png" width="16" height="16" alt="check"></td>   
                 </tr>   
                 <tr>   
                         <td>User registration</td>   
                         <td><img src="cross.png" width="16" height="16" alt="cross"></td>   
                         <td><img src="cross.png" width="16" height="16" alt="cross"></td>   
                         <td><img src="check.png" width="16" height="16" alt="check"></td>   
                 </tr>   
         </tbody>   
 </table>   
 
 
 
CSS3说明：
 
对于这个例子，我使用CSS3选择器（或伪选择器）：nth-child（N）。当然了，那些老前辈的浏览器不会出现css3的效果。请同学们使用火狐，Chrome，Safari或Opera浏览器。
 
IE9对于这个实例还是支持的。
 

CSS Code复制内容到剪贴板
 
.features-table   
 {   
   width: 100%;   
   margin: 0 auto;   
   border-collapse: separate;   
   border-spacing: 0;   
   text-shadow: 0 1px 0 #fff;   
   color: #2a2a2a;   
   background: #fafafa;   
   background-image: -moz-linear-gradient(top, #fff, #eaeaea, #fff); /* Firefox 3.6 */   
   background-image: -webkit-gradient(linear,center bottombottom,center top,from(#fff),color-stop(0.5, #eaeaea),to(#fff));   
 }   
    
 .features-table td   
 {   
   height: 50px;   
   line-height: 50px;   
   padding: 0 20px;   
   border-bottom: 1px solid #cdcdcd;   
   box-shadow: 0 1px 0 white;   
   -moz-box-shadow: 0 1px 0 white;   
   -webkit-box-shadow: 0 1px 0 white;   
   whitewhite-space: nowrap;   
   text-align: center;   
 }   
    
 /*Body*/   
 .features-table tbody td   
 {   
   text-align: center;   
   font: normal 12px Verdana, Arial, Helvetica;   
   width: 150px;   
 }   
    
 .features-table tbody td:first-child   
 {   
   width: auto;   
   text-align: left;   
 }   
    
 .features-table td:nth-child(2), .features-table td:nth-child(3)   
 {   
   background: #efefef;   
   background: rgba(144,144,144,0.15);   
   border-right: 1px solid white;   
 }   
    
 .features-table td:nth-child(4)   
 {   
   background: #e7f3d4;   
   background: rgba(184,243,85,0.3);   
 }   
    
 /*Header*/   
 .features-table thead td   
 {   
   font: bold 1.3em 'trebuchet MS', 'Lucida Sans', Arial;   
   -moz-border-radius-topright: 10px;   
   -moz-border-radius-topleft: 10px;   
   border-top-rightright-radius: 10px;   
   border-top-left-radius: 10px;   
   border-top: 1px solid #eaeaea;   
 }   
    
 .features-table thead td:first-child   
 {   
   border-top: none;   
 }   
    
 /*Footer*/   
 .features-table tfoot td   
 {   
   font: bold 1.4em Georgia;   
   -moz-border-radius-bottomright: 10px;   
   -moz-border-radius-bottomleft: 10px;   
   border-bottom-rightright-radius: 10px;   
   border-bottom-left-radius: 10px;   
   border-bottom: 1px solid #dadada;   
 }   
    
 .features-table tfoot td:first-child   
 {   
   border-bottom: none;   
 }   
 
其实这个例子当中nth-child，本站已有解释。
 CSS3之伪类选择器：nth-child()
 
同学们可以根据这个例子自己做一个实例出来