Ajar anda langkah demi langkah cara menggunakan CSS untuk mencipta bar navigasi yang ringkas dan cantik (penjelasan kod terperinci)-tutorial css-php.cn

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

奋力向前

Lepaskan： 2021-08-06 16:09:13

asal

3594 orang telah melayarinya

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.

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

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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!