cari

Rumah >hujung hadapan web >html tutorial >Cara melaksanakan susun atur teg navigasi menggunakan HTML dan CSS

Cara melaksanakan susun atur teg navigasi menggunakan HTML dan CSS

WBOY
WBOYasal
2023-10-16 08:19:54995semak imbas

. Berikut akan memperkenalkan secara terperinci cara menggunakan HTML dan CSS untuk melaksanakan reka letak label navigasi, dan melampirkan contoh kod tertentu.

Cara melaksanakan susun atur teg navigasi menggunakan HTML dan CSS

Menulis struktur HTML

Pertama, anda perlu menentukan struktur HTML teg navigasi. Anda boleh menggunakan senarai tidak tersusun (ul) dan item senarai (li) untuk melaksanakan susun atur senarai teg navigasi. Kod sampel adalah seperti berikut: 

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

    Tambah gaya CSS
  1. Seterusnya, anda perlu menambah gaya CSS yang sesuai pada teg navigasi untuk mencapai susunan mendatar dan kesan yang cantik. Kod sampel adalah seperti berikut: 
    2. .nav {
  background-color: #f1f1f1;
}

.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.nav li {
  margin: 0 10px;
}

.nav li a {
  color: #333;
  text-decoration: none;
}

.nav li a:hover {
  color: #f00;
}
Penjelasan: Kelas

  1. .nav ialah bekas untuk teg navigasi dan warna latar belakang ditetapkan dengan menetapkan warna latar belakang . Kelas
.nav ul ialah senarai tidak tertib, dan kesan susunan mendatar dicapai dengan menetapkan display: flex. Kelas

.nav li ialah item senarai dan selang antara item senarai dicapai dengan menetapkan margin.
  • .nav li a class ialah teks pautan item senarai dan warna fon pautan boleh ditetapkan dengan menetapkan warna. .nav 类为导航标签的容器，通过设置 background-color 实现背景颜色的设定。
  • .nav ul 类为无序列表，通过设置 display: flex 实现水平排列的效果。
  • .nav li 类为列表项，通过设置 margin 实现列表项之间的间隔。
  • .nav li a 类为列表项的链接文本，通过设置 color 实现链接字体颜色的设定。
  • .nav li a:hover 类为鼠标悬停时的样式，通过设置 color 实现链接颜色的切换。
  1. 使用示例
    将HTML代码和CSS代码放在合适的位置，如放在页面的 和
    2. .nav li a:hover class ialah gaya apabila tetikus melayang Dengan menetapkan color, warna pautan boleh ditukar.
      Contoh penggunaan
    1. Letakkan kod HTML dan kod CSS di lokasi yang sesuai, seperti dan &lt ;body> tag. Kod sampel adalah seperti berikut: 
      2. <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>导航标签布局</title>
  <style>
    /* CSS代码 */
  </style>
</head>
<body>
  <!-- HTML代码 -->
</body>
</html>

    Pratonton keputusan

    Buka fail HTML dalam penyemak imbas untuk melihat kesan reka letak tag navigasi. Apabila tetikus dialihkan ke atas label navigasi, warna pautan berubah. 🎜🎜🎜Melalui empat langkah di atas, kami berjaya melaksanakan reka letak label navigasi mudah menggunakan HTML dan CSS. Mengikut keperluan sebenar, label navigasi boleh dikembangkan dan dipercantikkan lagi, seperti menambah menu lungsur, susun atur responsif, dsb. Harap artikel ini membantu anda! 🎜

Atas ialah kandungan terperinci Cara melaksanakan susun atur teg navigasi menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html display margin background flex ul li
Kenyataan：
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
Artikel sebelumnya：Cara membuat susun atur galeri foto responsif menggunakan HTML dan CSSArtikel seterusnya：Cara membuat susun atur galeri foto responsif menggunakan HTML dan CSS

Artikel berkaitan

Lihat lagi