食譜書網頁介面

在此專案中，您將使用 HTML 和 CSS 建立一個 食譜書 Web 介面。本專案向學習者介紹高階佈局概念，例如 CSS 網格、Flexbox 和 懸停效果，同時也涵蓋影像和響應式設計的使用。

---

？ 專案概況

目的：

建立一個具有視覺吸引力的 Web 介面，顯示包含圖像、描述和詳細食譜視圖的食譜。稍後可以使用 JavaScript 擴充該介面以實現動態功能。

主要特點：

1. 食譜卡網格用於顯示多個食譜。
2. 懸停效果以反白食譜。
3. 響應式設計以確保版面配置適用於不同的螢幕尺寸。

---

?️ 檔案結構

recipe-book/
│-- index.html
│-- styles.css
└-- images/
    │-- recipe1.jpg
    │-- recipe2.jpg
    │-- recipe3.jpg

---

• 關鍵技術：
  • 邊框半徑：圓角打造現代外觀。
  • 盒子陰影：增加卡片的深度。
  • 過渡效果：變換和盒子陰影上的平滑懸停效果。
  • 物件適合：確保影像覆蓋該區域而不失真。

---

？ 5.懸停效果

.recipe-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
}

• 說明：
  • 變形：懸停時稍微抬起卡片。
  • 盒子陰影：增加陰影以達到「彈出」效果。

---

？ 6.頁腳樣式

.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
  position: relative;
  bottom: 0;
  width: 100%;
}

---

？ 教授概念

1. CSS 網格:

   • 具有反應行為的動態網格佈局。

2. 彈性與反應能力：

   • 具有自動適應功能的網格模板列允許設計適應不同的螢幕寬度。

3. 卡片設計：

   • 使用圖像和文字建立可重複使用、美觀的卡片。

4. 懸停效果：

   • 加入微妙的動畫以改善使用者體驗。

5. 盒子陰影和邊框：

   • 增強深度和視覺層次。

6. 語意 HTML:

   • 使用有意義的標籤，如頁首、部分和頁尾。

---

?️ 增強功能和後續步驟

1. 新增 JavaScript:

   • 實作搜尋列依名稱過濾食譜。
   • 新增模態以顯示詳細食譜。

2. 響應式設計：

   • 使用媒體查詢微調較小裝置的版面。

3. 動畫：

   • 載入頁面或與卡片互動時添加微妙的動畫。

在 GitHub 上查看專案

以上是食譜書網頁介面的詳細內容。更多資訊請關注PHP中文網其他相關文章！