Membina Halaman 'Akan Datang' Responsif

Baru-baru ini saya telah menangani cabaran Mentor Frontend: menghasilkan halaman pendaratan "Akan Datang" responsif untuk peruncit fesyen. Taklimat itu memerlukan borang langganan e-mel, imej latar belakang yang menawan dan responsif yang lancar merentas desktop dan mudah alih. Catatan ini memperincikan pendekatan saya, keputusan penting dan strategi penyelesaian masalah.

Fasa 1: Penyahbinaan Projek

Sebelum pengekodan, saya menganalisis keperluan projek dengan teliti:

• Bahagian wira yang mempamerkan logo dan mesej "Akan Datang".
• Borang langganan e-mel untuk pendaftaran pengguna.
• Susun letak responsif dengan imej latar belakang menyesuaikan diri secara dinamik dengan saiz skrin.
• Pengesahan e-mel asas untuk memastikan input e-mel yang tepat.

Fasa 2: Struktur HTML

Saya mengutamakan struktur HTML yang bersih dan semantik dengan div minimum. Reka letak terdiri daripada dua bahagian utama:

1. Bahagian Butiran: Menempatkan logo, tajuk, penerangan dan borang input e-mel.
2. Bahagian Imej: Memaparkan imej latar belakang.

Struktur HTML saya:

<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>

Fasa 3: Penggayaan dan Responsif CSS

Flexbox memainkan peranan penting dalam mencapai reka letak yang menarik secara visual dan responsif. Ia memperkemas susunan elemen secara mendatar (desktop) dan menegak (mudah alih).

Pada mulanya, .coming-soon-container menggunakan display: flex untuk reka letak desktop sebelah menyebelah. Pertanyaan media (@media (max-width: 768px)) menukar flex-direction kepada column-reverse untuk mudah alih, meletakkan imej di bawah butiran.

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>

Fasa 4: Input E-mel dan Reka Bentuk Ikon Anak Panah

Borang e-mel direka bentuk untuk estetika moden yang bersih. Medan input dan butang serah (ikon anak panah) telah digayakan untuk daya tarikan visual.

CSS untuk Input dan Ikon:

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

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

Fasa 5: Imej Wira Responsif

Harta object-fit memastikan imej wira berskala responsif tanpa herotan.

CSS untuk Bekas Imej:

<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>

Fasa 6: Pengesahan E-mel JavaScript

Pengesahan e-mel pihak pelanggan telah dilaksanakan menggunakan JavaScript untuk mengesahkan format e-mel. Ungkapan biasa menyemak input terhadap corak e-mel standard.

Fungsi Pengesahan JavaScript:

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

Kesimpulan

Projek halaman "Akan Datang" ini mengasah reka bentuk responsif saya dan kemahiran pengesahan borang. Menggunakan Flexbox untuk reka letak, penggayaan tersuai dan prinsip mengutamakan mudah alih menghasilkan reka bentuk yang bersih dan berfungsi. Saya sangat mengesyorkan cabaran Frontend Mentor untuk mengasah kemahiran pembangunan frontend. Kod lengkap tersedia di GitHub: Pautan GitHub

Atas ialah kandungan terperinci Membina Halaman 'Akan Datang' Responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!