Cara melaksanakan susun atur teg navigasi menggunakan HTML dan CSS-html tutorial-php.cn

Cara melaksanakan susun atur teg navigasi menggunakan HTML dan CSS

WBOY

Lepaskan： 2023-10-16 08:19:54

asal

988 orang telah melayarinya

. 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>

Salin selepas log masuk

Seterusnya, anda perlu menambah gaya CSS yang sesuai pada teg navigasi untuk mencapai susunan mendatar dan kesan yang cantik. Kod sampel adalah seperti berikut:

.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;
}

Salin selepas log masuk

Penjelasan: Kelas

.nav ialah bekas untuk teg navigasi dan warna latar belakang ditetapkan dengan menetapkan warna latar belakang</code > . Kelas </li></ol><code>.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代码放在合适的位置，如放在页面的 <head> 和 <body>