如何使用CSS和HTML創建自適應的產品價格表布局

當網站需要展示產品價格或服務器價格時，一個自適應的價格表格是非常必要的。在本文中，我們將介紹如何使用CSS和HTML來創建一個自適應的產品/服務器價格表。

我們需要創建一個基本的HTML結構。以下是一個簡單的例子：

<div class="pricing-table">
  <div class="plan">
    <h3>Basic</h3>
    <p class="price">$10/mo</p>
    <ul>
      <li>1GB Storage</li>
      <li>10GB Bandwidth</li>
      <li>Email Support</li>
    </ul>
    <button>Select Plan</button>
  </div>

  <div class="plan popular">
    <h3>Pro</h3>
    <p class="price">$20/mo</p>
    <ul>
      <li>5GB Storage</li>
      <li>50GB Bandwidth</li>
      <li>24/7 Support</li>
    </ul>
    <button>Select Plan</button>
  </div>

  <div class="plan">
    <h3>Premium</h3>
    <p class="price">$50/mo</p>
    <ul>
      <li>10GB Storage</li>
      <li>100GB Bandwidth</li>
      <li>Phone and Email Support</li>
    </ul>
    <button>Select Plan</button>
  </div>
</div>

我們可以使用CSS來樣式化我們的價格表。以下是一些CSS代碼，可以使我們的價格表自適應：

.pricing-table {
  display: flex;
  flex-wrap: wrap;
}

.plan {
  flex-basis: calc(33.33% - 20px);
  margin: 10px;
  padding: 20px;
  border: 1px solid #ddd;
  text-align: center;
}

.popular {
  background-color: #f9f9f9;
}

以上CSS代碼解釋如下：

• .pricing-table被設置為flex布局，并使用flex-wrap屬性使其在行末自動換行。
• .plan元素的寬度被設置為calc(33.33% - 20px)，這將使每個計劃相等地占據其父容器的三分之一，同時減去了一些間距和邊框寬度。
• .popular類添加了一個背景顏色，以突出顯示我們的最受歡迎的計劃。

我們已經創建了一個自適應的產品/服務器價格表，并且使用CSS對其進行了樣式化。但是，我們可以進一步改進該表格，例如添加鼠標懸停效果：

.plan:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

這段代碼將在鼠標懸停時向計劃框添加一個微弱的陰影，以增加用戶交互性。

我們還可以添加其他特殊效果，例如過渡效果、動畫效果等。以下代碼演示了如何通過過渡效果使計劃的價格和選擇按鈕在鼠標懸停時產生微小的動畫效果：

.price,
button {
  transition: all 0.3s ease;
}

.plan:hover .price {
  font-size: 28px;
  margin-top: 10px;
}

.plan:hover button {
  background-color: #4CAF50;
  color: #fff;
}

這段代碼將所有價格和按鈕元素的過渡時間設置為0.3秒，并在鼠標懸停時使價格字體變大，并添加上移動畫，同時也在按鈕上添加背景色和文本顏色。

我們可以使用CSS和HTML創建一個自適應的產品/服務器價格表，并對其進行樣式化和優化。我們還可以添加其他特殊效果，以增強用戶交互性。