|
[tr][td]
本教程中将教大家如果使用CSS3实现一个非常美丽的定价表效果。 图片：090922tnezeh5tene66b2x.jpg  我们将创建一个类“定价表”的表，这个类将是我们的造型基础。然后，我们将我们的定价表划分分为三个部分：第一个，，将有计划的标题和各自的价格，第二个，将有计划的特点（例如：带宽，磁盘空间，等），以及最后标记，将用文本描述的页脚。 第一步：HTML代码
第二步：基础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; } 点击进入详细教程 在线演示 [/td][/tr] |
||||||||
