简约大气的CSS价格表价格卡片

来源:https://www.sucaihuo.com/js/2789.html 2017-08-20 23:50浏览(897) 收藏

一款简约大气的CSS价格表价格卡片,分为3种类型的价格档次,每一种类型对应不同的类目小图片,默认中间一个类目为选中项目,页面的所有内容均可以自由更改。
简约大气的CSS价格表价格卡片
分类:html/css > 按钮 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入页面的CSS样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分,不同的价目类型分别放入不同的div容器里,代码如下:

<div class="background">
  <div class="container">
    <div class="panel pricing-table">
      <div class="pricing-plan">
        <img src="images/paper-plane.png" alt="" class="pricing-img">
        <h2 class="pricing-header">Personal</h2>
        <ul class="pricing-features">
          <li class="pricing-features-item">Custom domains</li>
          <li class="pricing-features-item">Sleeps after 30 mins of inactivity</li>
        </ul>
        <span class="pricing-price">Free</span>
        <a href="#/" class="pricing-button">Sign up</a>
      </div>
      <div class="pricing-plan">
        <img src="images/plane.png" alt="" class="pricing-img">
        <h2 class="pricing-header">Small team</h2>
        <ul class="pricing-features">
          <li class="pricing-features-item">Never sleeps</li>
          <li class="pricing-features-item">Multiple workers for more powerful apps</li>
        </ul>
        <span class="pricing-price">$150</span>
        <a href="#/" class="pricing-button is-featured">Free trial</a>
      </div>
      <div class="pricing-plan">
        <img src="images/space-ship.png" alt="" class="pricing-img">
        <h2 class="pricing-header">Enterprise</h2>
        <ul class="pricing-features">
          <li class="pricing-features-item">Dedicated</li>
          <li class="pricing-features-item">Simple horizontal scalability</li>
        </ul>
        <span class="pricing-price">$400</span>
        <a href="#/" class="pricing-button">Free trial</a>
      </div>
    </div>
  </div>
</div>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2