建立響應式「即將推出」頁面

我最近解決了前端導師挑戰：為一家時尚零售商製作響應式「即將推出」登陸頁面。 該簡報要求提供電子郵件訂閱表格、迷人的背景圖像以及跨桌面和行動裝置的無縫回應能力。這篇文章詳細介紹了我的方法、關鍵決策和解決問題的策略。

第一階段：專案解構

編碼之前，我仔細分析了專案需求：

• 英雄部分展示徽標和「即將推出」訊息。
• 用於使用者註冊的電子郵件訂閱表單。
• 響應式佈局，背景影像動態適應螢幕尺寸。
• 基本電子郵件驗證，以確保準確的電子郵件輸入。

第 2 期：HTML 結構

我優先考慮使用最少的 div 的乾淨、語意 HTML 結構。版麵包括兩個關鍵部分：

1. 詳細資料部分：容納標誌、標題、描述和電子郵件輸入表單。
2. 影像部分： 顯示背景影像。

我的 HTML 結構：

<code class="language-html"><div class="coming-soon-container">
  <!-- Details Section -->
  <div class="details">
    <!-- Logo, Heading, Description, Form -->
  </div>
  <!-- Image Section -->
  <div class="image-container">
    <img src="..." alt="Coming Soon Image">
  </div>
</div></code>

第 3 階段：CSS 樣式與反應能力

Flexbox 在實現視覺吸引力和響應式佈局方面發揮了重要作用。 它簡化了元素的水平（桌面）和垂直（移動）排列。

最初，.coming-soon-container 使用 display: flex 進行並排桌面佈局。 媒體查詢 (@media (max-width: 768px)) 將行動裝置的 flex-direction 切換為 column-reverse，將影像放置在詳細資料下方。

Flexbox CSS：

<code class="language-css">.coming-soon-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 768px) {
  .coming-soon-container {
    flex-direction: column-reverse;
  }
}</code>

第四階段：電子郵件輸入與箭頭圖示設計

電子郵件表單的設計具有簡潔、現代的美感。 輸入欄位和提交按鈕（箭頭圖示）的樣式具有視覺吸引力。

輸入和圖示的 CSS：

<code class="language-css">.input-container {
  position: relative;
  width: 385px;
}

/* ... (input and span styles) ... */</code>

第 5 期：響應式英雄圖片

object-fit 屬性確保英雄影像響應縮放而不會失真。

圖片容器的 CSS：

<code class="language-css">.image-container {
  width: 40%;
  height: 100vh;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}</code>

第 6 階段：JavaScript 電子郵件驗證

客戶端電子郵件驗證是使用 JavaScript 實現的，以驗證電子郵件格式。 正規表示式根據標準電子郵件模式檢查輸入。

JavaScript 驗證函數：

<code class="language-javascript">function validateEmail() {
  // ... (validation logic) ...
}</code>

結論

這個「即將推出」頁面專案磨練了我的響應式設計和表單驗證技能。 利用 Flexbox 進行佈局、自訂樣式和行動優先原則帶來了簡潔且實用的設計。 我強烈推薦前端導師的挑戰，以提升前端開發技能。 完整的程式碼可以在 GitHub 上找到：GitHub 連結

以上是建立響應式「即將推出」頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！