Comment créer une disposition de barre de navigation d'image réactive à l'aide de HTML et CSS-tutoriel HTML-php.cn

Comment créer une disposition de barre de navigation d'image réactive à l'aide de HTML et CSS

WBOY

Libérer： 2023-10-25 08:04:50

original

1299 Les gens l'ont consulté

Comment créer une disposition de barre de navigation dimage réactive à laide de HTML et CSS

Comment créer une disposition de barre de navigation d'images réactive en utilisant HTML et CSS

Avec la popularité des appareils mobiles, la conception réactive est devenue une exigence de base pour la conception Web. Dans la production de pages Web, la barre de navigation est un élément très important. Cet article expliquera comment utiliser HTML et CSS pour créer une disposition de barre de navigation d'image réactive. Les exemples de code spécifiques sont les suivants :

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

Copier après la connexion

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

Copier après la connexion

Dans le code ci-dessus, nous utilisons d'abord HTML. pour créer une structure de page Web de base, dans laquelle la barre de navigation utilise un élément d'en-tête. La barre de navigation comprend un logo à gauche et un menu à droite.

En CSS, nous définissons certains styles de base, tels que définir la marge et le remplissage du corps sur 0, définir la couleur d'arrière-plan de la barre de navigation sur #333 et définir la largeur du logo sur 100 pixels, etc.

Dans la requête @media, nous utilisons une requête multimédia et modifions le style du menu afin qu'il s'aligne verticalement lorsque la largeur de l'écran est de 600 pixels ou moins.

Avec le code HTML et CSS ci-dessus, nous pouvons implémenter une disposition simple de barre de navigation d'image réactive. Lorsque la largeur de l'écran est petite, le menu s'organisera automatiquement verticalement pour s'adapter à la navigation sur les appareils mobiles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!