Bahagian Utama dan Navigasi
Bina pengepala halaman dengan bar navigasi melekit dan bahagian utama yang menampilkan tajuk, teks sokongan, butang CTA serta kecerunan latar belakang hiasan.
Bahagian Utama dan Navigasi ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Merancang Reka Letak Halaman Pendaratan
Halaman pendaratan pemasaran biasanya mengikut struktur yang mudah dijangka: bar navigasi melekat di bahagian atas, bahagian utama dengan tajuk dan CTA, diikuti ciri, testimoni, harga dan pengaki. Memulakan dengan bar navigasi dan bahagian utama membolehkan anda menetapkan gaya visual halaman serta rentak menegak untuk semua kandungan yang menyusul.
<!-- Page structure overview -->
<body class="bg-white text-gray-900">
<header><!-- Sticky navbar --></header>
<main>
<section><!-- Hero --></section>
<section><!-- Features --></section>
<section><!-- Testimonials --></section>
<section><!-- Pricing --></section>
</main>
<footer><!-- Footer --></footer>
</body>Membina Rangka Bar Navigasi Melekat
Gunakan sticky top-0 z-50 untuk memastikan bar navigasi kekal kelihatan semasa pengguna menatal. Tambahkan bg-white/90 backdrop-blur-sm untuk menghasilkan penampilan kaca kabur yang moden. border-b border-gray-200 menghasilkan pemisah halus daripada kandungan halaman. Balut semuanya dalam bekas max-w-7xl mx-auto px-4 untuk mengehadkan lebar navigasi pada skrin besar.
<header class="sticky top-0 z-50 border-b border-gray-200 bg-white/90 backdrop-blur-sm">
<nav class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">
<!-- Logo -->
<!-- Nav links -->
<!-- CTA button -->
</nav>
</header>Menambahkan Logo dan Pautan Navigasi
Letakkan logo di sebelah kiri menggunakan flex items-center gap-2. Pautan navigasi berada di tengah sebagai baris lentur dengan hidden md:flex gap-6 — disembunyikan pada peranti mudah alih dan kelihatan mulai skrin sederhana ke atas. Setiap pautan menggunakan text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors untuk memberikan pengalaman interaktif yang kemas.
<nav class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">
<!-- Logo -->
<a href="/" class="flex items-center gap-2 font-bold text-gray-900">
<div class="h-8 w-8 rounded-lg bg-blue-600"></div>
Launchify
</a>
<!-- Nav links (hidden on mobile) -->
<div class="hidden gap-8 md:flex">
<a href="#features" class="text-sm font-medium text-gray-600 transition-colors hover:text-gray-900">Features</a>
<a href="#pricing" class="text-sm font-medium text-gray-600 transition-colors hover:text-gray-900">Pricing</a>
<a href="#about" class="text-sm font-medium text-gray-600 transition-colors hover:text-gray-900">About</a>
</div>
</nav>Menambahkan Butang CTA pada Bar Navigasi
Letakkan butang seruan tindakan di sebelah kanan bar navigasi. CTA utama menggunakan latar terisi bg-blue-600 text-white, manakala pautan hantu sekunder atau pautan log masuk boleh diletakkan di sebelahnya. Pastikan butang dalam bar navigasi kekal padat dengan px-4 py-2 text-sm supaya tidak mendominasi ruang pengepala.
<div class="flex items-center gap-3">
<a href="/login"
class="hidden text-sm font-medium text-gray-600 hover:text-gray-900 md:inline">
Log in
</a>
<a href="/signup"
class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white
shadow-sm transition hover:bg-blue-700">
Get started
</a>
<!-- Hamburger for mobile -->
<button class="rounded-md p-2 text-gray-600 hover:bg-gray-100 md:hidden">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>Reka Letak Bahagian Utama
Bahagian utama biasanya merupakan bahagian halaman yang paling memberi kesan. Tengahkan kandungannya secara menegak dan mendatar menggunakan flex flex-col items-center justify-center text-center. Tetapkan ketinggian minimum yang lapang dengan min-h-[calc(100vh-4rem)] untuk memenuhi ruang pandang di bawah bar navigasi, dan tambahkan px-4 py-24 untuk memberikan ruang.
<section class="flex min-h-[calc(100vh-4rem)] flex-col items-center
justify-center px-4 py-24 text-center">
<!-- Badge -->
<!-- Headline -->
<!-- Subtext -->
<!-- CTA buttons -->
<!-- Hero image / illustration -->
</section>Menambahkan Kecerunan Latar
Berikan kedalaman visual kepada bahagian utama dengan kecerunan jejari atau linear yang halus. Penggunaan bg-gradient-to-b from-blue-50 to-white menghasilkan pudar lembut daripada bahagian atas berwarna samar kepada bahagian bawah putih bersih. Untuk kesan yang lebih dramatik, gabungkan kecerunan dengan bentuk hiasan yang diletakkan secara mutlak di belakang kandungan.
<section class="relative flex min-h-[calc(100vh-4rem)] flex-col items-center
justify-center overflow-hidden bg-gradient-to-b
from-blue-50 to-white px-4 py-24 text-center">
<!-- Decorative blob -->
<div class="absolute -top-40 left-1/2 h-[500px] w-[500px] -translate-x-1/2
rounded-full bg-blue-100 opacity-40 blur-3xl"></div>
<!-- Content on top of blob -->
<div class="relative z-10">
<!-- Hero content here -->
</div>
</section>Tajuk dan Teks Sokongan Bahagian Utama
Tajuk ialah teks paling penting pada halaman. Gunakan teks besar seperti text-4xl md:text-6xl font-extrabold tracking-tight text-gray-900 untuk menarik perhatian. Susulinya dengan subtajuk dalam mt-6 max-w-2xl text-lg text-gray-500. Hadkan lebar teks sokongan dengan max-w-2xl mx-auto supaya panjang baris kekal mudah dibaca.
<div class="relative z-10 flex flex-col items-center">
<!-- Eyebrow badge -->
<span class="mb-4 rounded-full bg-blue-100 px-4 py-1.5 text-xs font-semibold
uppercase tracking-widest text-blue-700">
Now in Public Beta
</span>
<!-- Headline -->
<h1 class="text-4xl font-extrabold tracking-tight text-gray-900 md:text-6xl">
Ship faster with
<span class="text-blue-600">Launchify</span>
</h1>
<!-- Subtext -->
<p class="mx-auto mt-6 max-w-2xl text-lg text-gray-500">
The all-in-one platform for indie makers to build, launch, and grow
their SaaS products without the infrastructure headaches.
</p>
</div>Butang CTA Bahagian Utama
Sediakan butang CTA utama dan sekunder di bawah teks sokongan. Gunakan mt-10 flex flex-col items-center gap-4 sm:flex-row supaya butang tersusun menegak pada peranti mudah alih dan bersebelahan pada skrin kecil ke atas. Butang utama menggunakan gaya terisi, manakala butang sekunder menggunakan gaya berbingkai atau hantu untuk membentuk hierarki yang jelas.
<div class="mt-10 flex flex-col items-center gap-4 sm:flex-row">
<!-- Primary CTA -->
<a href="/signup"
class="rounded-xl bg-blue-600 px-8 py-3.5 text-base font-semibold
text-white shadow-lg transition hover:bg-blue-700
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Start for free
</a>
<!-- Secondary CTA -->
<a href="#demo"
class="flex items-center gap-2 text-base font-semibold text-gray-700
transition hover:text-gray-900">
<span class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100">
▶
</span>
Watch demo
</a>
</div>Jalur Bukti Sosial Bahagian Utama
Di bawah CTA, tambahkan elemen bukti sosial yang ringkas seperti susunan avatar dan penarafan bintang. Ini meyakinkan pelawat kali pertama tanpa mengalih perhatian daripada CTA utama. Gunakan jidar negatif pada avatar yang bertindih dengan -ml-2 dan cincin bulat kecil untuk memberikan sempadan tersendiri kepada setiap avatar.
<div class="mt-10 flex flex-col items-center gap-2">
<!-- Avatars -->
<div class="flex -space-x-2">
<img class="h-8 w-8 rounded-full ring-2 ring-white" src="/avatar1.jpg" alt="User">
<img class="h-8 w-8 rounded-full ring-2 ring-white" src="/avatar2.jpg" alt="User">
<img class="h-8 w-8 rounded-full ring-2 ring-white" src="/avatar3.jpg" alt="User">
<div class="flex h-8 w-8 items-center justify-center rounded-full
bg-blue-100 text-xs font-semibold text-blue-700 ring-2 ring-white">
+2k
</div>
</div>
<!-- Stars -->
<p class="text-sm text-gray-500">
<span class="text-yellow-400">★★★★★</span>
Loved by 2,000+ makers
</p>
</div>Tangkapan Skrin atau Ilustrasi Bahagian Utama
Tangkapan skrin produk atau ilustrasi di bawah teks memberikan pelawat gambaran awal tentang perkara yang mereka akan daftarkan. Gunakan mt-16 rounded-2xl shadow-2xl border border-gray-200 overflow-hidden untuk memaparkannya dalam bingkai yang kemas. Pada peranti mudah alih, jadikannya selebar penuh; pada skrin lebih besar, hadkan lebarnya dengan max-w-4xl mx-auto.
<div class="mx-auto mt-16 max-w-4xl">
<div class="overflow-hidden rounded-2xl border border-gray-200 shadow-2xl">
<img
src="/screenshot.png"
alt="Launchify dashboard preview"
class="w-full"
/>
</div>
</div>Pelarasan Responsif Bahagian Utama
Semak bahagian utama pada setiap titik henti. Pada peranti mudah alih, saiz tajuk berkurang daripada text-6xl kepada text-4xl. Butang CTA tersusun secara menegak dengan flex-col dan bertukar kepada sm:flex-row pada titik henti kecil. Tangkapan skrin mungkin memerlukan hidden md:block jika terlalu kecil untuk berguna pada telefon. Sentiasa uji pada ruang pandang mudah alih sebenar.
<!-- Responsive headline example -->
<h1 class="text-3xl font-extrabold tracking-tight text-gray-900
sm:text-5xl md:text-6xl lg:text-7xl">
Ship faster with Launchify
</h1>
<!-- Hide large screenshot on mobile -->
<div class="mx-auto mt-16 hidden max-w-4xl md:block">
<img src="/screenshot.png" class="w-full rounded-2xl shadow-2xl" alt="Dashboard">
</div>Semakan Pantas
Uji pemahaman anda tentang konsep Penguasaan CSS Tailwind daripada pelajaran ini.
Ringkasan Pelajaran
Dalam pelajaran ini, anda telah mempelajari: membina bar navigasi kaca kabur yang melekat dengan logo, pautan dan CTA, mencipta bahagian utama dengan latar kecerunan, tajuk, teks sokongan dan bukti sosial, serta menambahkan pelarasan responsif untuk titik henti mudah alih dan desktop. Seterusnya, kita akan membina bahagian ciri dan bukti sosial.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Bahagian Utama dan Navigasi” percuma?
Ya — teks penuh “Bahagian Utama dan Navigasi” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Bahagian Utama dan Navigasi”?
Bina pengepala halaman dengan bar navigasi melekit dan bahagian utama yang menampilkan tajuk, teks sokongan, butang CTA serta kecerunan latar belakang hiasan. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “Bahagian Utama dan Navigasi” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Bahagian Utama dan Navigasi
- Bahagian Ciri dan Bukti Sosial
- Bahagian Jadual Harga
- Pengaki dan Kemasan Responsif