极客教程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>
总结
在这篇文章中，我们学习了如何只用HTML和CSS来创建一个基本的定价表。我们首先使用index.html文件创建了我们的基本结构布局，然后我们为它添加了样式。