Contoh menunjukkan cara melaksanakan kesan khas bar navigasi menggunakan css

Bar navigasi sangat penting dalam reka bentuk web, ia boleh membantu pengguna mencari kandungan yang mereka inginkan dengan cepat dan meningkatkan pengalaman pengguna. Oleh itu, cara melaksanakan bar navigasi yang cantik dan mudah digunakan adalah kemahiran yang harus dikuasai oleh setiap jurutera hadapan.

Dalam artikel ini, kami akan memperkenalkan cara menggunakan CSS untuk melaksanakan bar navigasi ringkas, termasuk menetapkan gaya, reka letak, kesan interaktif, dsb. bar navigasi. Dengan membaca artikel ini, anda akan belajar cara menggunakan beberapa sifat asas dan teknik CSS untuk melaksanakan bar navigasi.

Persediaan

Sebelum kita mula menulis kod, kita perlu menyediakan beberapa pengetahuan asas HTML dan CSS supaya kita boleh lebih memahami dan melaksanakan bar navigasi. Jika anda tidak biasa dengan HTML dan CSS, anda boleh merujuk artikel berikut:

• Tutorial video HTML
• Tutorial video CSS

Melaksanakan bar navigasi

Di bawah ini kami akan memperkenalkan cara menggunakan CSS untuk melaksanakan bar navigasi mendatar yang ringkas.

Langkah Pertama: Struktur HTML

Pertama, kita perlu mencipta struktur HTML asas untuk menempatkan bar navigasi. Dalam HTML, kami boleh menggunakan senarai tidak tertib (

) dan item senarai (
• ) untuk melaksanakan bar navigasi.

  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>

  Dalam kod di atas, kami menggunakan teg

  untuk mewakili bar navigasi dan meletakkan teg

  Pada masa yang sama, kami turut menambah empat item senarai (
  • ), yang setiap satunya mengandungi pautan ().

    Langkah 2: Gaya asas

    Seterusnya, kita perlu menambah beberapa gaya asas pada bar navigasi, termasuk menetapkan warna latar belakang, warna teks, saiz fon, dsb. Kodnya adalah seperti berikut:

    nav {
      background: #333;
      color: #fff;
    }
    
    nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    
    nav li {
      display: inline-block;
    }
    
    nav a {
      display: block;
      padding: 10px 20px;
      color: #fff;
      text-decoration: none;
    }
    
    nav a:hover {
      background-color: #555;
    }

    Dalam kod di atas, kami menetapkan gaya bar navigasi, bekas bar navigasi, item senarai dan pautan masing-masing Pautan akan menukar warna latar belakang apabila melayang.

    Langkah 3: Laksanakan reka letak

    Sekarang kita telah melengkapkan gaya asas bar navigasi, kita perlu melaksanakan reka letak bar navigasi. Kita boleh menggunakan sifat apungan CSS untuk mencapai susun atur mendatar. Kodnya adalah seperti berikut:

    nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      text-align: center;
    }
    
    nav li {
      display: inline-block;
      float: left;
    }
    
    nav a {
      display: block;
      padding: 10px 20px;
      color: #fff;
      text-decoration: none;
    }
    
    nav a:hover {
      background-color: #555;
    }

    Dalam kod di atas, kami menetapkan bekas bar navigasi untuk dipusatkan dan menetapkan sifat paparan item senarai kepada sekatan sebaris supaya ia boleh disusun secara mendatar. Gunakan juga atribut float: left untuk mencapai kesan susun atur yang lebih baik.

    Langkah 4: Kesan interaktif

    Dalam langkah terakhir, kita perlu menambahkan beberapa kesan interaktif tetikus pada bar navigasi untuk meningkatkan pengalaman pengguna. Kita boleh menggunakan :hover pseudo-class untuk mencapai kesan pautan apabila tetikus melayang Kod adalah seperti berikut:

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

    Dalam kod di atas, kami menambah :hover pseudo-class. untuk pautan Apabila tetikus melayang di atas pautan Apabila hidup, warna latar belakang akan bertukar kepada kelabu.

    Ringkasan

    Dalam artikel ini, kami mempelajari cara melaksanakan bar navigasi mendatar ringkas menggunakan HTML dan CSS. Melalui artikel ini, anda sepatutnya memahami struktur HTML asas bar navigasi dan beberapa sifat CSS utama seperti paparan, apungan dan kelas pseudo .hover. Pada masa yang sama, anda juga mempelajari cara menetapkan gaya, reka letak dan kesan interaktif bar navigasi untuk mencapai pengalaman pengguna yang terbaik.

    Saya harap artikel ini dapat membantu anda Jika anda berminat dengan kemahiran hadapan yang lain, anda boleh terus mempelajari lebih lanjut.

    Atas ialah kandungan terperinci Contoh menunjukkan cara melaksanakan kesan khas bar navigasi menggunakan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!