如何使用 HTML 和 CSS 创建价格表?

csshtmlweb developmentfront end technology更新于 2025/1/25 18:20:17

我们可以仅使用 HTML 和 CSS 创建一个基本的价格表。价格表在涉及商品购买的各种网站中都非常有用，例如电商 Web 应用程序或旅游网站。让我们借助以下示例学习如何创建这样的表格 -

示例

我们将首先在以下 index.html 文件中创建表格的 HTML 布局，然后为其添加样式。

<html lang="en">
<head>
   <title>How to Create Pricing Table using HTML and CSS?</title>
   <style>
      .cards {
         display: flex;
         gap: 10px;
      }
      .cards ul {
         list-style-type: none;
         border: 1px solid;
         margin: 0;
         padding: 0;
      }
      .cards ul li {
         border-bottom: 1px solid;
         text-align: center;
         padding: 10px;
      }
      .cards ul .header {
         background-color: black;
         color: white;
         font-size: 1rem;
      }
      .cards ul .button {
         background-color: green;
         cursor: pointer;
         color: white;
         padding: 5px 10px;
      }
   </style>  
</head>
<body>
   <h3>How to Create Pricing Table using HTML and CSS?</h3>
   <div class="cards">
      <ul class="gold">
         <li class="header">Gold</li>
         <li>$9.99</li>
         <li>10 API calls per day</li>
         <li class="button">Sign up</li>
      </ul>
      <ul class="silver">
         <li class="header">Silver</li>
         <li>$19.99</li>
         <li>100 API calls per day</li>
         <li class="button">Sign up</li>
      </ul>
      <ul class="platinum">
         <li class="header">Platinum</li>
         <li>$29.99</li>
         <li>500 API calls per day</li>
         <li class="button">Sign up</li>
      </ul>
   </div>
</body>
</html>