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://www.php.cn">php中文网 link</a></li>
    <li><a href="http://www.php.cn">php中文网 link</a></li>
    <li><a href="http://www.php.cn">php中文网 link</a></li>
    <li><a href="http://www.php.cn">php中文网 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

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