CSS 如何使用HTML和CSS创建一个定价表

我们可以只用HTML和CSS来创建一个基本的定价表。在涉及商品购买的不同网站中，定价表可以是一个有用的功能，例如，电子商务网站应用程序或旅游网站。让我们在下面的例子的帮助下学习如何创建这样的表格。

例子

我们将首先在下面的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>