非常美丽的CSS3定价表效果
本教程中将教大家如果使用CSS3实现一个非常美丽的定价表效果。
我们将创建一个类“定价表”的表,这个类将是我们的造型基础。然后,我们将我们的定价表划分分为三个部分:第一个,<thead>,将有计划的标题和各自的价格,第二个<tbody>,将有计划的特点(例如:带宽,磁盘空间,等),以及最后<tfoot>标记,将用文本描述的页脚。
第一步:HTML代码
<table class="pricing-table"> <thead> <tr class="plan"> <td class="green"> <h2>Light</h2> <em>Great for small business</em> </td> <td class="orange"> <h2>Run</h2> <em>Great for small business</em> </td> <td class="green"> <h2>Fly</h2> <em>Great for small business</em> </td> </tr> <tr class="price"> <td class="green"> <p><span>$</span>5</p> <span>monthly</span> <a href="#">Join</a> </td> <td class="orange"> <p><span>$</span>9<span>79</span></p> <span>monthly</span> <a href="#">Join</a> </td> <td class="green"> <p><span>$</span>12</p> <span>monthly</span> <a href="#">Join</a> </td> </tr> </thead> <tbody> <tr class="clock-icon"> <td>No Support</td> <td>24/7 Tech Support</td> <td>24/7 Tech Support</td> </tr> <tr class="basket-icon"> <td>Basic Options</td> <td>Advanced Options</td> <td>Advanced Options</td> </tr> <tr class="star-icon"> <td>100GB Storage</td> <td>200GB Storage</td> <td>500GB Storage</td> </tr> <tr class="heart-icon"> <td>1TB Bandwidth</td> <td>2TB Bandwidth</td> <td>5TB Bandwidth</td> </tr> </tbody> <tfoot> <tr> <td>Known locally as "SoMa", this neighborhood was home to the dot.com boom and boasts.</td> <td> Known locally as "SoMa", this neighborhood was home to the dot.com boom and boasts. <div class="table-float"> <span class="arrow"></span> <p>while our commercial director was on vacation, we came up with this</p> <p class="big">crazy price</p> </div> </td> <td>Known locally as "SoMa", this neighborhood was home to the dot.com boom and boasts.</td> </tr> </tfoot></table>
第二步:基础CSS
在开始造型定价表之前,我们将添加一个CSS以减少浏览器的默认行高,标题的字体大小之类的东西等CSS复位。
.pricing-table { min-width: 670px; }.pricing-table td { position: relative; display: inline-block; margin: 0 5px; vertical-align: text-top;}
第3步: Plan Section
我们将设置宽度,高度,使用“边界半径”属性添加一些填充和圆角。然后,我们将添加排版样式(字体,大小,线体高度等),该计划的标题和简短描述。.pricing-table thead .plan td { width: 210px; height: 42px; padding: 15px 0; text-align: center; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}.pricing-table thead .plan h2 { font-family: 'Arial Black', Arial, Helvetica, sans-serif; font-weight: bold; font-size: 22px; text-transform: uppercase; line-height: 24px;} .pricing-table thead .plan em { font-family: Georgia, Arial, Helvetica, sans-serif; font-style: italic; font-size: 14px; line-height: 16px;}
我们也有两种不同的配色方案,绿色和橙色。对于每种颜色方案中,我们将设置不同的颜色,文字阴影和背景图像。.pricing-table thead .plan .green { color: #36611e; text-shadow: 1px 1px 0px rgba(255,255,255, .2); background: url(../img/green_pattern.png) repeat-x 0 0;} .pricing-table thead .plan .orange { color: #fafafa; text-shadow: 1px 1px 2px rgba(0,0,0, .4); background: url(../img/orange_pattern.png) repeat-x 0 0;}
第4步 - Price Section
价格部分是最困难的,因为我们这里有很多细节。我们将设置相同的宽度值,添加CSS3渐变,一些排版样式等.
.pricing-table thead .price td { position: relative; width: 210px; padding: 25px 0; font-family: 'Arial Black', Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; text-align: center; color: #b6b07c; background: #f9f8f1; background: -moz-linear-gradient(top, #f9f8f1 0%, #f4f2e2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f8f1), color-stop(100%,#f4f2e2)); background: -webkit-linear-gradient(top, #f9f8f1 0%,#f4f2e2 100%); background: -o-linear-gradient(top, #f9f8f1 0%,#f4f2e2 100%); background: -ms-linear-gradient(top, #f9f8f1 0%,#f4f2e2 100%); background: linear-gradient(to bottom, #f9f8f1 0%,#f4f2e2 100%);} .pricing-table thead .price p { display: table; margin: 0 auto; font-size: 50px; line-height: 60px;} .pricing-table thead .price p span { font-size: 0.5em; display: table-cell; vertical-align: middle;} .pricing-table thead .price span { font-size: 14px; }.pricing-table thead .price a { display: block; position: absolute; top: 41px; right: -5px; height: 32px; padding: 0 10px; line-height: 32px; font-size: 12px; text-decoration: none;} .pricing-table thead .price .green a { color: #37621f; text-shadow: 1px 1px 0px rgba(255,255,255, .2); background: #82d344; background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d344), color-stop(100%,#51af34)); background: -webkit-linear-gradient(top, #82d344 0%,#51af34 100%); background: -o-linear-gradient(top, #82d344 0%,#51af34 100%); background: -ms-linear-gradient(top, #82d344 0%,#51af34 100%); background: linear-gradient(to bottom, #82d344 0%,#51af34 100%);} .pricing-table thead .price .orange a { color: #fafafa; text-shadow: 1px 1px 2px rgba(0,0,0, .3); background: #ff8042; background: -moz-linear-gradient(top, #ff8042 0%, #f55a0e 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8042), color-stop(100%,#f55a0e)); background: -webkit-linear-gradient(top, #ff8042 0%,#f55a0e 100%); background: -o-linear-gradient(top, #ff8042 0%,#f55a0e 100%); background: -ms-linear-gradient(top, #ff8042 0%,#f55a0e 100%); background: linear-gradient(to bottom, #ff8042 0%,#f55a0e 100%);}.pricing-table thead .price .green a:before,.pricing-table thead .price .orange a:before,.pricing-table thead .price .green a:after,.pricing-table thead .price .orange a:after { display: block; position: absolute; content: '';} .pricing-table thead .price .green a:before,.pricing-table thead .price .orange a:before { width: 8px; height: 32px; top: 0; left: -8px; background: url(../img/badge.png) no-repeat;} .pricing-table thead .price .green a:after,.pricing-table thead .price .orange a:after { width: 0; height: 0; bottom: -5px; right: 0; border-bottom: 5px solid transparent;} .pricing-table thead .price .green a:before { background-position: 0 0; }.pricing-table thead .price .orange a:before { background-position: 0 -32px; }.pricing-table thead .price .green a:after { border-left: 5px solid #1c5d40; }.pricing-table thead .price .orange a:after { border-left: 5px solid #88330a; }
第5步 - Features Section
我们将在本节的顶部开始的“条纹”,我们将设置宽度,顶部边框和一些排版样式。
.pricing-table tbody tr:first-child td:before { position: absolute; display: block; content: ''; width: 100%; height: 5px; top: -25px; left: 0; background: url(../img/stripe.png) repeat-x 0 0;} .pricing-table tbody td { width: 170px; padding-left: 40px; line-height: 30px; border-top: 1px solid #f2f2f2; font-family: Helvetica, Arial, sans-serif; font-size: 11px; color: #828282;} .pricing-table tbody tr:first-child td { border-top: 20px solid #ffffff; } .pricing-table .clock-icon td,.pricing-table .basket-icon td,.pricing-table .star-icon td,.pricing-table .heart-icon td { background: #ffffff url(../img/icons.png) no-repeat 0 0; } .pricing-table .clock-icon td { background-position: 0 0; }.pricing-table .basket-icon td { background-position: 0 -30px; }.pricing-table .star-icon td { background-position: 0 -60px; }.pricing-table .heart-icon td { background-position: 0 -90px; }
点击进入详细教程 在线演示
【非常美丽的CSS3定价表效果】相关文章
9. cssSandpaper-兼容IE的CSS3 JavaScript库
本文来源:https://www.51html5.com/a958.html
上一篇:纯CSS3实现圆角按钮
下一篇:CSS3+jQuery的图像画廊Photobox
﹝非常美丽的CSS3定价表效果﹞相关内容
- 7款非常实用的jQuery/CSS3插件演示和源码
- 一款非常棒的纯CSS3 3D菜单演示及制作教程
- 7款非常实用的jQuery/CSS3插件演示和源码
- 华丽的3d俄罗斯方块
- 华丽的HTML5/jQuery动画和应用 前端必备
- 干货分享 超炫丽的HTML5/jQuery应用及代码
- 14款华丽的最新jQuery焦点图动画插件
- 华丽的HTML5/jQuery动画和应用 前端必备
- 你需要了解的CSS3技巧
- 兼容所有浏览器的CSS3圆角