如何使用HTML和CSS创建定价表？-html教程-PHP中文网

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

WBOY

发布： 2023-09-02 23:17:06

转载

865 人浏览过

如何使用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>

登录后复制