html5中文学习网

您的位置: 首页 > 视频教程 > CSS3视频教程 » 正文

用css3制作功能表_HTML5中文网 - 我们以促进HTML5在中国的普及而努力

2013-10-15 22:13:04 [小 大] 已经帮助：人解决问题

 大家对阴影，圆角，渐变和CSS3特性情有独钟。今天我就用css3为大家做个实例：功能表。nfRHTML5中文学习网 - HTML5先行者学习网

nfRHTML5中文学习网 - HTML5先行者学习网
先看下效果图：nfRHTML5中文学习网 - HTML5先行者学习网

这里为了方便大家线下理解，我提供给大家下载地址及演示地址。nfRHTML5中文学习网 - HTML5先行者学习网
nfRHTML5中文学习网 - HTML5先行者学习网
演示地址nfRHTML5中文学习网 - HTML5先行者学习网
nfRHTML5中文学习网 - HTML5先行者学习网

下载附件

 nfRHTML5中文学习网 - HTML5先行者学习网

HTML代码nfRHTML5中文学习网 - HTML5先行者学习网

下面你可以找到的缩写HTML：nfRHTML5中文学习网 - HTML5先行者学习网

XML/HTML Code复制内容到剪贴板
  1. <table class="features-table">   
  2.         <thead>   
  3.                 <tr>   
  4.                         <td></td>   
  5.                         <td>Standard</td>   
  6.                         <td>Professional</td>   
  7.                         <td>Enterprise</td>   
  8.                 </tr>   
  9.         </thead>   
  10.         <tfoot>   
  11.                 <tr>   
  12.                         <td></td>   
  13.                         <td>$99</td>   
  14.                         <td>$199</td>   
  15.                         <td>$399</td>   
  16.                 </tr>   
  17.         </tfoot>   
  18.         <tbody>   
  19.                 <tr>   
  20.                         <td>Custom domain</td>   
  21.                         <td><img src="check.png" width="16" height="16" alt="check"></td>   
  22.                         <td><img src="check.png" width="16" height="16" alt="check"></td>   
  23.                         <td><img src="check.png" width="16" height="16" alt="check"></td>   
  24.                 </tr>   
  25.                 <tr>   
  26.                         <td>Advanced control</td>   
  27.                         <td><img src="check.png" width="16" height="16" alt="check"></td>   
  28.                         <td><img src="check.png" width="16" height="16" alt="check"></td>   
  29.                         <td><img src="check.png" width="16" height="16" alt="check"></td>   
  30.                 </tr>   
  31.                 <tr>   
  32.                         <td>Unlimited support</td>   
  33.                         <td><img src="cross.png" width="16" height="16" alt="cross"></td>   
  34.                         <td><img src="check.png" width="16" height="16" alt="check"></td>   
  35.                         <td><img src="check.png" width="16" height="16" alt="check"></td>   
  36.                 </tr>   
  37.                 <tr>   
  38.                         <td>User registration</td>   
  39.                         <td><img src="cross.png" width="16" height="16" alt="cross"></td>   
  40.                         <td><img src="cross.png" width="16" height="16" alt="cross"></td>   
  41.                         <td><img src="check.png" width="16" height="16" alt="check"></td>   
  42.                 </tr>   
  43.         </tbody>   
  44. </table>   

 nfRHTML5中文学习网 - HTML5先行者学习网

CSS3说明：nfRHTML5中文学习网 - HTML5先行者学习网
nfRHTML5中文学习网 - HTML5先行者学习网
对于这个例子，我使用CSS3选择器（或伪选择器）：nth-child（N）。当然了，那些老前辈的浏览器不会出现css3的效果。请同学们使用火狐，Chrome，Safari或Opera浏览器。
IE9对于这个实例还是支持的。
CSS Code复制内容到剪贴板
  1. .features-table   
  2. {   
  3.   width: 100%;   
  4.   margin: 0 auto;   
  5.   border-collapse: separate;   
  6.   border-spacing: 0;   
  7.   text-shadow: 0 1px 0 #fff;   
  8.   color: #2a2a2a;   
  9.   background: #fafafa;   
  10.   background-image: -moz-linear-gradient(top, #fff, #eaeaea, #fff); /* Firefox 3.6 */   
  11.   background-image: -webkit-gradient(linear,center bottombottom,center top,from(#fff),color-stop(0.5, #eaeaea),to(#fff));   
  12. }   
  13.    
  14. .features-table td   
  15. {   
  16.   height: 50px;   
  17.   line-height: 50px;   
  18.   padding: 0 20px;   
  19.   border-bottom: 1px solid #cdcdcd;   
  20.   box-shadow: 0 1px 0 white;   
  21.   -moz-box-shadow: 0 1px 0 white;   
  22.   -webkit-box-shadow: 0 1px 0 white;   
  23.   whitewhite-space: nowrap;   
  24.   text-align: center;   
  25. }   
  26.    
  27. /*Body*/   
  28. .features-table tbody td   
  29. {   
  30.   text-align: center;   
  31.   font: normal 12px Verdana, Arial, Helvetica;   
  32.   width: 150px;   
  33. }   
  34.    
  35. .features-table tbody td:first-child   
  36. {   
  37.   width: auto;   
  38.   text-align: left;   
  39. }   
  40.    
  41. .features-table td:nth-child(2), .features-table td:nth-child(3)   
  42. {   
  43.   background: #efefef;   
  44.   background: rgba(144,144,144,0.15);   
  45.   border-right: 1px solid white;   
  46. }   
  47.    
  48. .features-table td:nth-child(4)   
  49. {   
  50.   background: #e7f3d4;   
  51.   background: rgba(184,243,85,0.3);   
  52. }   
  53.    
  54. /*Header*/   
  55. .features-table thead td   
  56. {   
  57.   font: bold 1.3em 'trebuchet MS', 'Lucida Sans', Arial;   
  58.   -moz-border-radius-topright: 10px;   
  59.   -moz-border-radius-topleft: 10px;   
  60.   border-top-rightright-radius: 10px;   
  61.   border-top-left-radius: 10px;   
  62.   border-top: 1px solid #eaeaea;   
  63. }   
  64.    
  65. .features-table thead td:first-child   
  66. {   
  67.   border-top: none;   
  68. }   
  69.    
  70. /*Footer*/   
  71. .features-table tfoot td   
  72. {   
  73.   font: bold 1.4em Georgia;   
  74.   -moz-border-radius-bottomright: 10px;   
  75.   -moz-border-radius-bottomleft: 10px;   
  76.   border-bottom-rightright-radius: 10px;   
  77.   border-bottom-left-radius: 10px;   
  78.   border-bottom: 1px solid #dadada;   
  79. }   
  80.    
  81. .features-table tfoot td:first-child   
  82. {   
  83.   border-bottom: none;   
  84. }   
其实这个例子当中nth-child，本站已有解释。nfRHTML5中文学习网 - HTML5先行者学习网
CSS3之伪类选择器：nth-child()nfRHTML5中文学习网 - HTML5先行者学习网
nfRHTML5中文学习网 - HTML5先行者学习网
同学们可以根据这个例子自己做一个实例出来
（责任编辑：）
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助

CopyRight © 2011-2018 html5中文学习网 html5cn.Com.cn, All Rights Reserved. 京ICP备18048875号