Bar navigasi CSS
Mari sesuaikan bar navigasi kita sendiri.
Bar navigasi menegak:
Mula-mula kami menggunakan senarai sebagai pembawa paling asas, dan kemudian kami menambah tempatan atau luaran Pautan adalah seperti berikut :
<ul> <li><a href="http://ipnx.cn">php中文網(wǎng) link</a></li> <li><a href="http://ipnx.cn">php中文網(wǎng) link</a></li> <li><a href="http://ipnx.cn">php中文網(wǎng) link</a></li> <li><a href="http://ipnx.cn">php中文網(wǎng) link</a></li> </ul>
Kemudian kita akan mendapat kesan ini:
Bar navigasi yang biasa kita lihat tidak digariskan, dan Terdapat titik di hadapan, dan apabila tetikus kita bergerak ke atas pautan, warna pautan akan berubah mengikut kesan ini yang ingin kita capai dengan CSS sekarang. >Seterusnya kami mengalih keluar garis bawah (tidak kira sama ada ia dinyahklik atau diklik), kemudian menambah warna latar belakang, dan kemudian memaparkannya sebagai blok:
ul{ list-style: none;
} Akhir sekali, kami menambah warna latar belakang pada bar navigasi yang berubah apabila tetikus bergerak ke atasnya:
a:link,a:visited{ text-decoration: none; background-color: lightgray; display: block;
}Berikut ialah pemaparan
Kesan menegak Selepas gambar selesai, mari kita bercakap tentang navigasi mendatar bar. Kita hanya perlu mengubah suai fail CSS.
Mula-mula kita perlu memadamkan kesan paparan sebelumnya, iaitu ayat ini:
a:active,a:hover{ background-color: cadetblue;
}Namun, kita hanya perlu menukar mod paparan dalam tag li:
display: block;
Dengan cara ini, kita boleh merealisasikan bar navigasi mendatar
Kita boleh mengikut Keutamaan kita sendiri, menetapkan margin, fon, warna, dsb. Kami tidak akan menerangkannya satu persatu di sini
