Rumah >hujung hadapan web >tutorial css >Ajar anda langkah demi langkah cara menggunakan CSS untuk mencipta bar navigasi yang ringkas dan cantik (penjelasan kod terperinci)

Ajar anda langkah demi langkah cara menggunakan CSS untuk mencipta bar navigasi yang ringkas dan cantik (penjelasan kod terperinci)

奋力向前asal: 2021-08-06 16:03:563668semak imbas

Dalam artikel sebelumnya "Cara menambah sempadan atau kesan amplifikasi fon pada teks dengan css (penjelasan kod terperinci)", saya memperkenalkan anda cara menggunakan teks css untuk menambah sempadan atau amplifikasi fon kesan. Artikel berikut akan memperkenalkan kepada anda cara menggunakan CSS untuk mencipta bar navigasi yang ringkas dan cantik Mari kita lihat cara melakukannya bersama-sama.

Apabila menggunakan css untuk mencipta halaman, anda ingin membuat bar navigasi yang mudah dan cantik Bagaimana untuk melakukannya?

Senarai Pautan Bar Navigasi

Bar navigasi pada asasnya ialah senarai pautan, jadi gunakan elemen <ul></ul> dan <li>.

Contoh kod

<body>
<ul>
<li><a href="#">php主页</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">技术</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>

Penyampaian kod

Ajar anda langkah demi langkah cara menggunakan CSS untuk mencipta bar navigasi yang ringkas dan cantik (penjelasan kod terperinci)

Nota: Di sini kami menggunakan href="#" sebagai sambungan ujian.

Anda boleh menambah kelas "active" dan memilih pilihan [halaman utama php].

Contoh kod

<li><a class="active" href="#">php主页</a></li>

Membuat bar navigasi

Gunakan format <ul><li><a href=""></a></li></ul> untuk melaksanakan bar navigasi.

Contoh kod








  <li><a class="active" href="#">php主页</a></li>
  <li>视频
  <li>技术
  <li>关于

Penyampaian kod

Ajar anda langkah demi langkah cara menggunakan CSS untuk mencipta bar navigasi yang ringkas dan cantik (penjelasan kod terperinci)

Pembelajaran yang disyorkan: Tutorial video CSS

Atas ialah kandungan terperinci Ajar anda langkah demi langkah cara menggunakan CSS untuk mencipta bar navigasi yang ringkas dan cantik (penjelasan kod terperinci). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php css href ul li

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Lima petua bahagian hadapan yang membuat orang bersinarArtikel seterusnya：Lima petua bahagian hadapan yang membuat orang bersinar

Artikel berkaitan

Lihat lagi