資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物
數學
英語
經濟學
心理學
社會學
時裝設計
法律如何使用 HTML 和 CSS 建立一個定價表？
我們可以僅使用 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>
結論
在本文中，我們學習瞭如何僅使用 HTML 和 CSS 建立一個基本定價表。我們首先使用 index.html 檔案建立了基本結構佈局，然後為它添加了樣式。
更新於： 22-Feb-2023
694 次瀏覽
廣告