阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Foundation 价格表

      Foundation 价格表

      价格表可用于展示企业产品:

      <ul class="pricing-table">
        <li class="title">Basic</li>
        <li class="price">$19.99</li>
        <li class="description">Great for small business</li>
        <li class="bullet-item">24/7 Support</li>
        <li class="bullet-item">15GB Storage</li>
        <li class="bullet-item">1GB Bandwidth</li>
        <li class="cta-button"><a class="button" href="#">Buy</a></li>
      </ul>
      

      实例解析

      • ul.pricing-table - 定义价格表
      • li.title - 定义产品标题 (黑色背景)
      • li.price - 定义价格 (灰色背景字体大个项)
      • li.description - 定义产品描述 (如果需要)
      • li.bullet-item - 定义产品特点
      • li.ca-button - 按钮文本 (如 “Buy”, “Join”, “Sign Up”, 等)

      注意: 表格会 100% 填充容器的宽度,所有的项都有边框且是居中的。


      价格表网格

      以下实例显示了三个企业产品的价格(三项是均等划分宽度的):

      <div class="row">
        <div class="medium-4 columns">
          <ul class="pricing-table">
            <li class="title">Basic</li>
            ...
          </ul>
        </div>
        <div class="medium-4 columns">
          <ul class="pricing-table">
            <li class="title">Pro</li>
            ...
          </ul>
        </div>
        <div class="medium-4 columns">
          <ul class="pricing-table">
            <li class="title">Premium</li>
            ...
          </ul>
        </div>
      </div>
      
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录