CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 非常美丽的CSS3定价表效果

非常美丽的CSS3定价表效果

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定价表效果】相关文章

1. 非常美丽的CSS3定价表效果

2. 使用 jQuery & CSS3 制作美丽的照片画廊

3. jQuery和CSS3定制HTML5视频播放器

4. jQuery和CSS3定制HTML5视频播放器

5. 10 款非常棒的CSS代码格式化工具推荐

6. 效果非常酷!纯CSS3实现的图片滑块程序

7. 不用图片和JS,照样创建绚丽的动态CSS3菜单

8. 不用图片和JS也可创建绚丽的动态CSS3菜单

9. cssSandpaper-兼容IE的CSS3 JavaScript库

10. 快速实现超酷动画/过渡效果的CSS3类库

本文来源:https://www.51html5.com/a958.html

点击展开全部
上一篇:纯CSS3实现圆角按钮 下一篇:CSS3+jQuery的图像画廊Photobox

﹝非常美丽的CSS3定价表效果﹞相关内容

「非常美丽的CSS3定价表效果」相关专题

background orange position css table green td
复制网址 收藏网址 分享到微信 分享到微博 分享到QQ

其它栏目

HTML5教程 CSS3教程 JQUERY教程

也许您还喜欢