recherche

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

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

WBOY
WBOYoriginal
2023-10-25 08:04:501304parcourir

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>

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

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!

css html margin padding
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Guide de mise en page HTML : comment utiliser des pseudo-éléments pour la décoration d'icônesArticle suivant：Guide de mise en page HTML : comment utiliser des pseudo-éléments pour la décoration d'icônes

Articles Liés

Voir plus