Liste de prix des fondations


La liste de prix peut être utilisée pour présenter les produits de l'entreprise :

Instances

<!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">.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>

Exécuter l'instance »

Cliquez sur " Bouton Exécuter l'instance " " pour afficher les instances en ligne

Analyse d'instance

  • ul.pricing-table - Définir la liste de prix

  • li.title - Définir le titre du produit (fond noir)

  • li.price - Définir le prix (articles volumineux avec police de fond gris)

  • li.description - Définir la description du produit (si nécessaire)

  • li.bullet-item - Définir les caractéristiques du produit

  • li.ca-button - Texte du bouton (par ex. "Acheter", "Rejoindre", "Inscrivez-vous", etc.)

Remarque : Le tableau remplit 100 % de la largeur du conteneur, et tout les éléments ont des bordures et sont centrés.

Grille de liste de prix

L'exemple suivant montre les prix de trois produits d'entreprise (les trois articles sont également divisés en largeur) :

Exemple

<!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">.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">.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">.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>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne