Petua Reka Letak CSS: Amalan Terbaik untuk Melaksanakan Menu Navigasi Pekeliling-tutorial css-php.cn

Petua Reka Letak CSS: Amalan Terbaik untuk Melaksanakan Menu Navigasi Pekeliling

王林

Lepaskan： 2023-10-16 09:03:12

asal

1143 orang telah melayarinya

Petua Reka Letak CSS: Amalan Terbaik untuk Melaksanakan Menu Navigasi Pekeliling

Petua Susun atur CSS: Amalan Terbaik untuk Melaksanakan Menu Navigasi Pekeliling

Dalam reka bentuk web moden, menu navigasi merupakan elemen yang sangat penting. Untuk meningkatkan pengalaman pengguna dan daya tarikan visual, ramai pereka memilih untuk menggunakan menu navigasi bulat. Artikel ini akan memperkenalkan amalan terbaik untuk melaksanakan menu navigasi bulat menggunakan CSS dan memberikan contoh kod khusus.

Gunakan HTML untuk mencipta struktur asas menu navigasi

Pertama, kita perlu menggunakan HTML untuk mencipta struktur asas menu navigasi. Biasanya, menu navigasi terdiri daripada senarai tidak tertib (ul) dan beberapa item senarai (li). Contohnya:

<ul class="navigation">
  <li><a href="#">首页</a></li>
  <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

Menggunakan gaya CSS untuk menetapkan susun atur menu navigasi

Seterusnya, kami menggunakan gaya CSS untuk menetapkan susun atur menu navigasi. Mula-mula, kami menetapkan item senarai (li) ke dalam bentuk bulat dan tetapkan lebar dan tinggi menjadi sama:

.navigation li {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

Salin selepas log masuk

Kemudian, kami memusatkan menu navigasi secara mendatar dan menetapkan jarak antara item senarai:

.navigation {
  display: flex;
  justify-content: center;
  gap: 20px;
}

Salin selepas log masuk

Sediakan navigasi Warna latar belakang dan gaya lain menu

Berdasarkan susun atur asas menu navigasi, kita boleh menetapkan warna latar belakang dan gaya lain menu mengikut keperluan kita. Sebagai contoh, kita boleh menetapkan warna latar belakang yang berbeza untuk setiap item senarai dan menetapkan kesan gaya apabila tetikus melayang:

.navigation li:nth-child(1) {
  background-color: #ff6347;
}

.navigation li:nth-child(2) {
  background-color: #ffd700;
}

/* 其他列表项的背景颜色设置以此类推 */

.navigation li:hover {
  transform: scale(1.1);
  transition: transform 0.3s;
}

Salin selepas log masuk

Pusatkan kandungan teks item menu secara menegak

Jika menu navigasi perlu memaparkan kandungan teks , kami Anda juga perlu memusatkan kandungan teks secara menegak. Ini boleh dicapai menggunakan kod berikut:

.navigation li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

Salin selepas log masuk

Contoh kod penuh

Berikut ialah contoh kod lengkap yang menunjukkan amalan terbaik menggunakan CSS untuk melaksanakan menu navigasi bulat:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>圆形导航菜单示例</title>
  <style>
    .navigation {
      display: flex;
      justify-content: center;
      gap: 20px;
    }
    
    .navigation li {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    
    .navigation li:nth-child(1) {
      background-color: #ff6347;
    }
    
    .navigation li:nth-child(2) {
      background-color: #ffd700;
    }
    
    /* 其他列表项的背景颜色设置以此类推 */
    
    .navigation li:hover {
      transform: scale(1.1);
      transition: transform 0.3s;
    }
    
    .navigation li a {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
  </style>
</head>
<body>
  <ul class="navigation">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</body>
</html>

Salin selepas log masuk

Dengan kod di atas, dalam penyemak imbas Apabila anda membuka halaman dalam , anda boleh melihat contoh menu navigasi bulat.

Ringkasan

Menggunakan CSS untuk melaksanakan menu navigasi bulat ialah cara yang berkesan untuk meningkatkan kualiti reka bentuk web. Artikel ini menyediakan amalan terbaik untuk melaksanakan menu navigasi bulat dan memberikan contoh kod khusus. Semoga petua ini membantu kerja reka bentuk web anda.

Atas ialah kandungan terperinci Petua Reka Letak CSS: Amalan Terbaik untuk Melaksanakan Menu Navigasi Pekeliling. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!