手册

Foundation 5 教程 Foundation 起步 Foundation 文本 Foundation 表格 Foundation 按钮 Foundation 按钮组 Foundation 图标 Foundation 标签 Foundation 提醒框 Foundation 进度条 Foundation 面板 Foundation 图片 Foundation 下拉菜单 Foundation 折叠列表 Foundation 列表 Foundation 选项卡 Foundation 分页 Foundation 价格表 Foundation 顶部导航栏 Foundation 侧边栏 Foundation 滑动导航(Off-Canvas) Foundation Magellan Foundation 表单 Foundation 输入框尺寸 Foundation 开关 Foundation 滑块 Foundation 提示框 Foundation 模态框 Foundation Joyride Foundation 均衡器

Foundation 网格

Foundation 网格系统 Foundation 网格 - 水平堆叠 Foundation 网格 - 小型设备 Foundation 网格 - 中型设备 Foundation 网格 - 大型设备 Foundation 块状网格 Foundation 网格实例

Foundation 参考手册

首页大前端 Foundation Foundation 中文手册

Foundation 价格表

阅读22188

更新时间2022-04-14

Foundation 分页

Foundation 顶部导航栏

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

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>价格表</h2>
  <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="a button" href="#">Sign Up</a></li>
  </ul>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例解析

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

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

价格表网格

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

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>网格中的价格表</h2>
  <div class="medium-4 columns">
    <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="a button" href="#">Sign Up</a></li>
    </ul>
  </div>
  <div class="medium-4 columns">
    <ul class="pricing-table">
      <li class="title">Pro</li>
      <li class="price">$29.99</li>
      <li class="description">For the Average Joe</li>
      <li class="bullet-item">24/7 Support</li>
      <li class="bullet-item">25GB Storage</li>
      <li class="bullet-item">2GB Bandwidth</li>
      <li class="cta-button"><a class="a button" href="#">Sign Up</a></li>
    </ul>
  </div>
  <div class="medium-4 columns">
    <ul class="pricing-table">
      <li class="title">Premium</li>
      <li class="price">$49.99</li>
      <li class="description">When only the best is an option</li>
      <li class="bullet-item">24/7 Support</li>
      <li class="bullet-item">Unlimited Storage</li>
      <li class="bullet-item">Unlimited Bandwidth</li>
      <li class="cta-button"><a class="a button" href="#">Sign Up</a></li>
    </ul>
  </div>
</div>
  
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Foundation 分页

Foundation 顶部导航栏