热门推荐

    [CSS3] CSS3 实现的定价表

    百宝网 Lv.7 显示全部楼层 发表于 2021-8-19 19:37:54

    实现效果:


    202146161546907.png

    202146161546907.png

    实现代码


    html

    1. <div id="pricing-table" class="clear">
    2.     <div class="plan">
    3.         <h3>Enterprise<span>$59</span></h3>
    4.         <a class="signup" href="">Sign up</a>         
    5.         <ul>
    6.             <li><b>10GB</b> Disk Space</li>
    7.             <li><b>100GB</b> Monthly Bandwidth</li>
    8.             <li><b>20</b> Email Accounts</li>
    9.                         <li><b>Unlimited</b> subdomains</li>                       
    10.         </ul>
    11.     </div>
    12.     <div class="plan" id="most-popular">
    13.         <h3>Professional<span>$29</span></h3>
    14.         <a class="signup" href="">Sign up</a>        
    15.         <ul>
    16.             <li><b>5GB</b> Disk Space</li>
    17.             <li><b>50GB</b> Monthly Bandwidth</li>
    18.             <li><b>10</b> Email Accounts</li>
    19.                         <li><b>Unlimited</b> subdomains</li>                       
    20.         </ul>   
    21.     </div>
    22.     <div class="plan">
    23.         <h3>Standard<span>$17</span></h3>
    24.                 <a class="signup" href="">Sign up</a>
    25.         <ul>
    26.             <li><b>3GB</b> Disk Space</li>
    27.             <li><b>25GB</b> Monthly Bandwidth</li>
    28.             <li><b>5</b> Email Accounts</li>
    29.                         <li><b>Unlimited</b> subdomains</li>                       
    30.         </ul>
    31.     </div>
    32.     <div class="plan">
    33.         <h3>Basic<span>$9</span></h3>
    34.         <a class="signup" href="">Sign up</a>               
    35.         <ul>
    36.             <li><b>1GB</b> Disk Space</li>
    37.             <li><b>10GB</b> Monthly Bandwidth</li>
    38.             <li><b>2</b> Email Accounts</li>
    39.                         <li><b>Unlimited</b> subdomains</li>                       
    40.         </ul>
    41.     </div>        
    42. </div>
    复制代码

    css3


    1. body{
    2.   background: #303030;
    3. }
    4. #pricing-table {
    5.         margin: 100px auto;
    6.         text-align: center;
    7.         width: 892px; /* total computed width = 222 x 3 + 226 */
    8. }
    9. #pricing-table .plan {
    10.         font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
    11.         text-shadow: 0 1px rgba(255,255,255,.8);        
    12.         background: #fff;      
    13.         border: 1px solid #ddd;
    14.         color: #333;
    15.         padding: 20px;
    16.         width: 180px; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */      
    17.         float: left;
    18.         position: relative;
    19. }
    20. #pricing-table #most-popular {
    21.         z-index: 2;
    22.         top: -13px;
    23.         border-width: 3px;
    24.         padding: 30px 20px;
    25.         -moz-border-radius: 5px;
    26.         -webkit-border-radius: 5px;
    27.         border-radius: 5px;
    28.         -moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
    29.         -webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
    30.         box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);   
    31. }
    32. #pricing-table .plan:nth-child(1) {
    33.         -moz-border-radius: 5px 0 0 5px;
    34.         -webkit-border-radius: 5px 0 0 5px;
    35.         border-radius: 5px 0 0 5px;        
    36. }
    37. #pricing-table .plan:nth-child(4) {
    38.         -moz-border-radius: 0 5px 5px 0;
    39.         -webkit-border-radius: 0 5px 5px 0;
    40.         border-radius: 0 5px 5px 0;        
    41. }
    42. /* --------------- */        
    43. #pricing-table h3 {
    44.         font-size: 20px;
    45.         font-weight: normal;
    46.         padding: 20px;
    47.         margin: -20px -20px 50px -20px;
    48.         background-color: #eee;
    49.         background-image: -moz-linear-gradient(#fff,#eee);
    50.         background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));   
    51.         background-image: -webkit-linear-gradient(#fff, #eee);
    52.         background-image: -o-linear-gradient(#fff, #eee);
    53.         background-image: -ms-linear-gradient(#fff, #eee);
    54.         background-image: linear-gradient(#fff, #eee);
    55. }
    56. #pricing-table #most-popular h3 {
    57.         background-color: #ddd;
    58.         background-image: -moz-linear-gradient(#eee,#ddd);
    59.         background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));   
    60.         background-image: -webkit-linear-gradient(#eee, #ddd);
    61.         background-image: -o-linear-gradient(#eee, #ddd);
    62.         background-image: -ms-linear-gradient(#eee, #ddd);
    63.         background-image: linear-gradient(#eee, #ddd);
    64.         margin-top: -30px;
    65.         padding-top: 30px;
    66.         -moz-border-radius: 5px 5px 0 0;
    67.         -webkit-border-radius: 5px 5px 0 0;
    68.         border-radius: 5px 5px 0 0;                 
    69. }
    70. #pricing-table .plan:nth-child(1) h3 {
    71.         -moz-border-radius: 5px 0 0 0;
    72.         -webkit-border-radius: 5px 0 0 0;
    73.         border-radius: 5px 0 0 0;      
    74. }
    75. #pricing-table .plan:nth-child(4) h3 {
    76.         -moz-border-radius: 0 5px 0 0;
    77.         -webkit-border-radius: 0 5px 0 0;
    78.         border-radius: 0 5px 0 0;      
    79. }        
    80. #pricing-table h3 span {
    81.         display: block;
    82.         font: bold 25px/100px Georgia, Serif;
    83.         color: #777;
    84.         background: #fff;
    85.         border: 5px solid #fff;
    86.         height: 100px;
    87.         width: 100px;
    88.         margin: 10px auto -65px;
    89.         -moz-border-radius: 100px;
    90.         -webkit-border-radius: 100px;
    91.         border-radius: 100px;
    92.         -moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
    93.         -webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
    94.         box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
    95. }
    96. /* --------------- */
    97. #pricing-table ul {
    98.         margin: 20px 0 0 0;
    99.         padding: 0;
    100.         list-style: none;
    101. }
    102. #pricing-table li {
    103.         border-top: 1px solid #ddd;
    104.         padding: 10px 0;
    105. }
    106. /* --------------- */
    107.         
    108. #pricing-table .signup {
    109.         position: relative;
    110.         padding: 8px 20px;
    111.         margin: 20px 0 0 0;  
    112.         color: #fff;
    113.         font: bold 14px Arial, Helvetica;
    114.         text-transform: uppercase;
    115.         text-decoration: none;
    116.         display: inline-block;      
    117.         background-color: #72ce3f;
    118.         background-image: -moz-linear-gradient(#72ce3f, #62bc30);
    119.         background-image: -webkit-gradient(linear, left top, left bottom, from(#72ce3f), to(#62bc30));   
    120.         background-image: -webkit-linear-gradient(#72ce3f, #62bc30);
    121.         background-image: -o-linear-gradient(#72ce3f, #62bc30);
    122.         background-image: -ms-linear-gradient(#72ce3f, #62bc30);
    123.         background-image: linear-gradient(#72ce3f, #62bc30);
    124.         -moz-border-radius: 3px;
    125.         -webkit-border-radius: 3px;
    126.         border-radius: 3px;     
    127.         text-shadow: 0 1px 0 rgba(0,0,0,.3);        
    128.         -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
    129.         -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
    130.         box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
    131. }
    132. #pricing-table .signup:hover {
    133.         background-color: #62bc30;
    134.         background-image: -moz-linear-gradient(#62bc30, #72ce3f);
    135.         background-image: -webkit-gradient(linear, left top, left bottom, from(#62bc30), to(#72ce3f));      
    136.         background-image: -webkit-linear-gradient(#62bc30, #72ce3f);
    137.         background-image: -o-linear-gradient(#62bc30, #72ce3f);
    138.         background-image: -ms-linear-gradient(#62bc30, #72ce3f);
    139.         background-image: linear-gradient(#62bc30, #72ce3f);
    140. }
    141. #pricing-table .signup:active, #pricing-table .signup:focus {
    142.         background: #62bc30;      
    143.         top: 2px;
    144.         -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
    145.         -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
    146.         box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
    147. }
    148. /* --------------- */
    149. .clear:before, .clear:after {
    150.   content:"";
    151.   display:table
    152. }
    153. .clear:after {
    154.   clear:both
    155. }
    156. .clear {
    157.   zoom:1
    158. }
    复制代码

    以上就是CSS3 实现的定价表的详细内容,更多关于CSS3 定价表的资料请关注百宝网其它相关文章!
    回复

    使用道具 举报

    发表回复

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

  • 返回顶部

  • 快速回复 返回顶部 返回列表