css tetapan bar navigasi

王林
Lepaskan: 2023-05-09 10:01:36
asal
990 orang telah melayarinya

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>
Salin selepas log masuk
.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;
}
Salin selepas log masuk

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

css tetapan bar navigasi

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;
}
Salin selepas log masuk

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:

css tetapan bar navigasi

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);
}
Salin selepas log masuk

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:

css tetapan bar navigasi

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>
Salin selepas log masuk
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:

css tetapan bar navigasi

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!