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

Cara membuat susun atur bar navigasi imej responsif menggunakan HTML dan CSS

WBOY

Lepaskan： 2023-10-25 08:04:50

asal

1275 orang telah melayarinya

Cara membuat susun atur bar navigasi imej responsif menggunakan HTML dan CSS

Dengan populariti peranti mudah alih, reka bentuk responsif telah menjadi keperluan asas untuk reka bentuk web. Dalam penghasilan halaman web, bar navigasi adalah komponen yang sangat penting. Artikel ini akan memperkenalkan cara menggunakan HTML dan CSS untuk mencipta reka letak bar navigasi imej responsif Contoh kod khusus adalah seperti berikut:

Bahagian HTML:

<!DOCTYPE html>
<html>
<head>
  <title>响应式图片导航栏</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <header>
    <nav>
      <div class="logo">
        <img src="logo.png" alt="网站Logo">
      </div>
      <ul class="menu">
        <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>
    </nav>
  </header>

  <section>
    <h1>欢迎来到我们的网站</h1>
    <p>这是一个响应式图片导航栏布局的示例。</p>
  </section>
</body>
</html>

Salin selepas log masuk

bahagian CSS:

body {
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  padding: 20px;
  text-align: center;
}

.logo img {
  width: 100px;
}

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

.menu li {
  margin: 0 10px;
}

.menu li a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
}

section {
  text-align: center;
  padding: 20px;
}

@media (max-width: 600px) {
  .menu {
    flex-direction: column;
  }
  
  .menu li {
    margin: 10px 0;
  }
}

Salin selepas log masuk

Dalam kod di atas, kami mula-mula menggunakan HTML untuk mencipta struktur halaman web asas, di mana elemen pengepala digunakan dalam bar navigasi. Bar navigasi termasuk logo di sebelah kiri dan menu di sebelah kanan.

Dalam CSS, kami menetapkan beberapa gaya asas, seperti menetapkan margin dan padding badan kepada 0, menetapkan warna latar belakang bar navigasi kepada #333 dan menetapkan lebar logo kepada 100 piksel menunggu.

Dalam pertanyaan @media, kami menggunakan pertanyaan media dan mengubah suai gaya menu supaya ia berbaris menegak apabila lebar skrin ialah 600 piksel atau kurang.

Dengan kod HTML dan CSS di atas, kami boleh melaksanakan reka letak bar navigasi imej responsif yang mudah. Apabila lebar skrin kecil, menu secara automatik akan disusun secara menegak untuk menyesuaikan diri dengan menyemak imbas pada peranti mudah alih.

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