css tetapan bar navigasi

Sebagai pembangun web, banyak kali kita perlu mereka bentuk bar navigasi halaman yang cantik dan praktikal. Dalam HTML, anda boleh menggunakan teg <ul></ul> dan <li> untuk mencipta bar navigasi asas, tetapi jika anda ingin menambah beberapa gaya dan interaktiviti, kami perlu menggunakan CSS.

Artikel ini akan memperkenalkan cara menggunakan CSS untuk mereka bentuk bar navigasi, daripada gaya ringkas kepada kesan kompleks, langkah demi langkah.

Gaya Asas

Mula-mula, mari buat bar navigasi ringkas. Dalam kod HTML, kami menggunakan tag <ul></ul> dan <li> untuk mencipta senarai tidak tertib, dan kemudian menggunakan CSS untuk menetapkan atribut seperti gaya senarai, saiz dan warna, seperti berikut:

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #333;
}

.nav li {
  margin: 0;
}

.nav a {
  display: block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
}

Melalui tetapan gaya di atas , kami telah mendapat bar navigasi ringkas, seperti yang ditunjukkan di bawah:

Kesan tuding

Seterusnya, kami boleh menambah tuding mudah dan praktikal kesan membolehkan anda meningkatkan kesan visual pengguna dengan menukar atribut seperti warna latar belakang dan warna teks apabila penunjuk tetikus melayang di atas bar navigasi. Kita boleh mencapai ini dengan menetapkan :hover pseudo-class, seperti berikut:

.nav a:hover {
  background-color: #555;
  color: #fff;
}

Kod di atas bermakna apabila pengguna menuding tetikus di atas pautan navigasi, warna latar belakang pautan akan bertukar kepada # 555, dan teks akan menjadi Putih. Kesan yang lengkap adalah seperti berikut:

Kesan garis bawah

Kesan seterusnya yang perlu dicapai ialah apabila pengguna menuding pada pautan bar navigasi, ia akan muncul di bawah pautan Kesan garis bawah. Ini adalah kesan yang agak biasa, yang membolehkan pengguna mengetahui dengan lebih jelas pautan navigasi yang sedang mereka pilih.

Kita boleh melakukan ini dengan menambahkan elemen pseudo: sebelum di bawah pautan. Apabila pengguna melayang di atas pautan, elemen pseudo akan dipaparkan dan menambah panjang sempadan bawah. Kod tersebut adalah seperti berikut:

.nav a:hover:before {
  content:'';
  display: block;
  border-bottom: 4px solid #fff;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

.nav a:hover:before {
  transform: scaleX(1);
}

Kod di atas bermakna apabila penuding tetikus melayang di atas pautan navigasi, elemen pseudo akan dipaparkan dan terjemahan, putaran, penskalaan dan kesan animasi lain bagi elemen tersebut akan ditetapkan melalui atribut transformasi. Kesan yang lengkap adalah seperti berikut:

Kesan gelongsor

Kesan seterusnya yang perlu dicapai ialah apabila pengguna memilih pautan navigasi, penunjuk gelongsor muncul di bawah bar navigasi Kesan peranti. Kesan ini boleh menjadikannya lebih jelas untuk pengguna mengetahui di mana pautan navigasi yang mereka pilih.

Kita boleh melakukan ini dengan mencipta bekas penunjuk dan elemen anak penunjuk. Apabila pengguna memilih pautan navigasi, penunjuk meluncur dari satu kedudukan ke kedudukan yang lain. Kod adalah seperti berikut:

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">联系我们</a></li>
  <div class="indicator"></div>
</ul>

rrree

Kod di atas bermakna apabila pengguna memilih pautan navigasi, penunjuk yang sepadan akan meluncur di bawah pautan. Dengan menetapkan lebar dan tindak balas mengimbangi penunjuk yang sepadan dengan pautan yang berbeza, kita boleh mencapai kesan gelongsor yang berbeza. Kesan siap adalah seperti berikut:

Ringkasan

Artikel ini memperkenalkan cara menggunakan CSS untuk mencipta pelbagai jenis bar navigasi, termasuk gaya asas, kesan tuding , Garis bawah kesan dan kesan gelongsor, dsb. Kesan ini boleh meningkatkan pengalaman interaktif pengguna dan menjadikan halaman lebih cantik dan lebih mudah untuk digunakan. Melalui pembelajaran dan amalan berterusan, kami boleh menambah baik dan menyempurnakan reka bentuk dan kesan halaman secara berterusan untuk membawa pengalaman yang lebih baik kepada pengguna.

Atas ialah kandungan terperinci css tetapan bar navigasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!