Bina Navbar Responsif
20 minitPertengahanCSS
Laman web Kopi Pak Mat tak cantik di mana-mana skrin: pautan duduk janggal di bawah logo pada laptop dan berhimpit pada telefon. Bina semula layout header dengan CSS supaya ia menyesuaikan diri dengan lebar skrin.
- Lebar (≥ 600px):
Kopi Pak Matdi kiri,Menu · About · Location · Contactdalam satu baris pada garisan yang sama, di sebelah kanannya. - Sempit (< 600px): logo di atas, kemudian empat pautan bersusun satu di bawah yang lain.
- Pada setiap lebar: tiada apa yang terkeluar ke tepi (tiada scrollbar mendatar).
Kekangan
- Guna CSS sahaja — tiada JavaScript dan tiada butang hamburger untuk cabaran ini. Kekalkan struktur HTML dan class
.logo. - Penyemak memaparkan halaman anda dalam bingkai ujian tersembunyi yang lebarnya tepat 360px dan 900px, jadi media query anda betul-betul mesti berfungsi.
Jadikan header responsif: pada skrin 600px dan lebih lebar, logo di kiri dengan pautan dalam satu baris di sebelahnya; bawah 600px, pautan bersusun dalam satu lajur di bawah logo.
Semakan
- Pada 900px: logo di kiri, pautan sebaris di sebelahnya
- Pada 360px: pautan bersusun di bawah logo
- Tiada skrol ke tepi pada 360px atau 900px
Pratonton
Output konsol daripada kod anda akan dipaparkan di sini.