Cara membuat susun atur navigasi imej responsif menggunakan HTML dan CSS-html tutorial-php.cn

Cara membuat susun atur navigasi imej responsif menggunakan HTML dan CSS

WBOY

Lepaskan： 2023-10-20 09:55:52

asal

1408 orang telah melayarinya

Cara membuat susun atur navigasi imej responsif menggunakan HTML dan CSS

Cara membuat reka letak navigasi imej responsif menggunakan HTML dan CSS

HTML dan CSS ialah alatan penting untuk mencipta reka letak halaman web. Dengan menggunakan tag struktur HTML dan peraturan gaya CSS, kami boleh membuat pelbagai susun atur halaman. Dalam artikel ini, kita akan belajar cara membuat reka letak navigasi imej responsif menggunakan HTML dan CSS.

Mula-mula, mari tulis kod HTML.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式图片导航布局</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <ul>
      <li><a href="#"><img src="home.png" alt="Home"></a></li>
      <li><a href="#"><img src="about.png" alt="About"></a></li>
      <li><a href="#"><img src="services.png" alt="Services"></a></li>
      <li><a href="#"><img src="contact.png" alt="Contact"></a></li>
    </ul>
  </nav>
</body>

</html>

Salin selepas log masuk

Dalam kod di atas, kami mencipta bar navigasi. Bar navigasi mengandungi senarai tidak tertib, dan setiap item senarai mengandungi elemen utama dengan imej dan pautan. Sila pastikan anda meletakkan laluan imej yang sesuai dalam atribut src. src属性中。

接下来，我们将编写CSS代码来为导航栏添加样式。

nav {
  background-color: #333;
  text-align: center;
  padding: 10px 0;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
  margin: 0 10px;
}

nav ul li a img {
  width: 30px;
  height: 30px;
}

@media (max-width: 600px) {
  nav ul li {
    display: block;
    margin: 10px 0;
  }
}

Salin selepas log masuk

在上面的CSS代码中，我们为导航栏和列表项设置了一些基本的样式。我们还使用媒体查询来设置在屏幕宽度小于600px时列表项应该显示为块级元素。

最后，我们需要创建一个名为style.css

Seterusnya, kami akan menulis kod CSS untuk menambah gaya pada bar navigasi.

rrreee

Dalam kod CSS di atas, kami telah menetapkan beberapa gaya asas untuk bar navigasi dan item senarai. Kami juga menggunakan pertanyaan media untuk menetapkan bahawa item senarai harus dipaparkan sebagai elemen peringkat blok apabila lebar skrin kurang daripada 600px.

Akhir sekali, kita perlu mencipta helaian gaya luaran yang dipanggil style.css dan menyambungkannya ke fail HTML.

Kini kami boleh membuka fail HTML dalam penyemak imbas dan melihat susun atur navigasi imej responsif kami. Apabila lebar skrin lebih besar daripada 600px, bar navigasi sepatutnya muncul secara mendatar, seperti ini:

[Laman Utama] [Perihal] [Perkhidmatan] [Hubungi]

Apabila lebar skrin kurang daripada 600px, bar navigasi akan muncul secara menegak , seperti ini:

[Laman Utama]

[Mengenai]🎜[Perkhidmatan]🎜[Kenalan]🎜🎜Dengan menggunakan HTML dan CSS, kami telah mencipta reka letak navigasi imej responsif yang ringkas. Anda boleh memperibadikan gaya dan menambah lebih banyak fungsi untuk memenuhi keperluan anda. 🎜

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