Artikel ini akan berkongsi dengan anda dua kaedah untuk menyediakan struktur navigasi mendatar, terutamanya dengan bantuan struktur senarai.
Kaedah 1: Gabungan struktur blok dan struktur sebaris.
Di sini kami mula-mula memperkenalkan perbezaan antara elemen blok dan struktur sebaris.
(1) Struktur blok boleh menetapkan atribut seperti ketinggian garisan, lebar (lebar, tinggi), jidar (margin, padding) dan sempadan (sempadan). Elemen sebaris hanya boleh menetapkan ketinggian garisan, jidar kiri dan kanan, tetapi tidak mempunyai atribut seperti jidar luar, padding atas dan bawah serta jidar.
(2) Struktur blok lebih menonjol dan tidak berkongsi baris dengan elemen lain. Elemen sebaris boleh disarangkan dalam elemen lain.
Elemen blok biasa termasuk ul, ol, p, bentuk, dsb. Elemen sebaris biasa termasuk meta, img, span, h1-h6, label, dsb.
Tetapi kadangkala, untuk menjadikan struktur bongkah mempunyai ciri-ciri elemen sebaris, atau untuk menjadikan elemen sebaris mempunyai ciri-ciri elemen blok, kedua-duanya digabungkan. Untuk memberikan contoh membuat elemen sebaris mempunyai ciri-ciri elemen blok: teg ialah salah satu teg sebaris yang paling penting dan pengguna boleh mengakses halaman yang sepadan mengikut pautan yang ditentukannya. Untuk menjadikan elemen di bawah teg lebih cantik, kami ingin menetapkan beberapa atribut untuk pautan ini, termasuk sempadan, jidar, warna latar belakang, dsb. Kami tahu bahawa atribut ini hanya dimiliki oleh struktur blok, jadi pada masa ini kami bukan sahaja mahu terus menggunakan tag sebaris a untuk menampung kandungan pautan, tetapi juga berharap elemen sebaris ini juga boleh mempunyai atribut yang berkaitan dengan struktur blok.
Kami boleh menyelesaikan masalah ini melalui tetapan "a{display:block}".
Begitu juga, apabila kami ingin menggunakan senarai untuk mencapai tujuan menyediakan navigasi mendatar, kami mahu setiap baris senarai dipaparkan pada baris yang sama Pada masa ini, kami juga boleh mencapai matlamat ini melalui gabungan struktur blok dan struktur sebaris.
Kami hanya perlu menambah satu baris kod pada senarai: list{display:inline;}
Kaedah 2: Gunakan tetapan atribut apungan.
Apungan atribut boleh ditetapkan untuk terapung dalam dua arah, termasuk kiri dan kanan. Menetapkan navigasi mendatar adalah untuk mengapungkan senarai secara mendatar ke kiri. Terapung ke kiri adalah kerana kami berharap selepas menetapkan terapung, susunan navigasi akan mendatar dari kiri ke kanan, iaitu dari kiri ke kanan, navigasi satu. ke navigasi empat Ini Lebih selaras dengan tabiat lebih ramai pengguna.
Kod:
以上就是本文的全部内容,希望对大家的学习有所帮助.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
