如何使用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文件创建了基本的结构布局,然后添加了样式。