Maison >interface Web >tutoriel HTML >Comment créer une mise en page de navigation d'images réactive à l'aide de HTML et CSS
Comment créer une mise en page de navigation d'images réactive à l'aide de HTML et CSS
- WBOYoriginal
- 2023-10-20 09:55:521383parcourir
Comment créer une mise en page de navigation d'images réactive à l'aide de HTML et CSS
HTML et CSS sont des outils importants pour créer des mises en page de pages Web. En utilisant des balises structurelles HTML et des règles de style CSS, nous pouvons créer une variété de mises en page. Dans cet article, nous apprendrons comment créer une mise en page de navigation d'images réactive en utilisant HTML et CSS.
Tout d’abord, écrivons le code 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>Dans le code ci-dessus, nous créons une barre de navigation. La barre de navigation contient une liste non ordonnée et chaque élément de liste contient un élément d'ancrage avec une image et un lien. Veuillez vous assurer de mettre le chemin d'image approprié dans l'attribut 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;
}
}在上面的CSS代码中，我们为导航栏和列表项设置了一些基本的样式。我们还使用媒体查询来设置在屏幕宽度小于600px时列表项应该显示为块级元素。
最后，我们需要创建一个名为style.css
rrreee
Dans le code CSS ci-dessus, nous avons défini quelques styles de base pour la barre de navigation et les éléments de la liste. Nous utilisons également des requêtes multimédias pour définir que les éléments de la liste doivent être affichés sous forme d'éléments de niveau bloc lorsque la largeur de l'écran est inférieure à 600 pixels. Enfin, nous devons créer une feuille de style externe appeléestyle.css et la connecter au fichier HTML. Nous pouvons maintenant ouvrir le fichier HTML dans le navigateur et afficher notre mise en page de navigation d'images réactive. Lorsque la largeur de l'écran est supérieure à 600 px, la barre de navigation doit apparaître horizontalement, comme ceci :
[Accueil] [À propos] [Services] [Contact]
Lorsque la largeur de l'écran est inférieure à 600 px, la barre de navigation doit apparaître verticalement , comme ceci :
[Accueil]
[À propos]🎜[Services]🎜[Contact]🎜🎜En utilisant HTML et CSS, nous avons créé une mise en page de navigation d'image simple et réactive. Vous pouvez personnaliser davantage le style et ajouter plus de fonctionnalités en fonction de vos besoins. 🎜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!