Maison >interface Web >tutoriel HTML >Comment implémenter une disposition de barre de navigation latérale fixe en utilisant HTML et CSS

Comment implémenter une disposition de barre de navigation latérale fixe en utilisant HTML et CSS

PHPzoriginal: 2023-10-28 08:57:271026parcourir

Comment utiliser HTML et CSS pour implémenter une disposition de barre de navigation latérale fixe

La barre de navigation est une partie très importante de la mise en page d'une page Web, et la disposition de la barre de navigation latérale fixe est un modèle de conception courant. Cet article explique comment utiliser HTML et CSS pour implémenter une disposition simple de barre de navigation latérale fixe et fournit des exemples de code spécifiques.

Structure HTML

Tout d'abord, nous devons créer une structure de base dans le fichier HTML. Voici un exemple simple :

<!DOCTYPE html>
<html>
<head>
    <title>固定侧边导航栏布局</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <!-- 导航栏内容 -->
        </div>
        <div class="main-content">
            <!-- 页面主要内容 -->
        </div>
    </div>
</body>
</html>

Dans le code ci-dessus, nous avons créé un élément conteneur nommé "container", qui contient deux éléments enfants, à savoir "sidebar" et "main-content". "sidebar" est utilisé pour placer la barre de navigation et "main-content" est utilisé pour placer le contenu principal de la page.

Styles CSS

Ensuite, nous devons utiliser CSS pour définir le style du conteneur et de la barre de navigation. Ce qui suit est un exemple de style simple :

.container {
    display: flex;
}

.sidebar {
    width: 20%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
}

.main-content {
    margin-left: 20%;
    padding: 20px;
}

Dans le code ci-dessus, nous obtenons la disposition gauche et droite de la barre de navigation et du contenu principal en définissant "conteneur" sur la disposition "flex". Réglez la largeur de la « barre latérale » sur 20 %, la couleur d'arrière-plan sur gris et positionnez-la sur fixe afin qu'elle soit fixée sur le côté gauche de l'écran. La marge gauche du « contenu principal » est définie sur 20 % et un certain remplissage est ajouté pour garantir que le contenu n'est pas masqué par la barre de navigation.

Remplir le contenu

Ensuite, nous pouvons remplir le contenu réel dans la barre de navigation et la section de contenu principal en fonction de nos besoins.

<div class="sidebar">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</div>

<div class="main-content">
    <h1>欢迎访问我们的网站</h1>
    <p>这里是主要内容区域，您可以在这里显示具体的页面内容。</p>
</div>

Dans le code ci-dessus, nous avons créé une liste non ordonnée dans l'élément "sidebar" et ajouté des liens de navigation dans les éléments de la liste. Dans l'élément "main-content", nous ajoutons un titre et un texte pour afficher le contenu principal de la page.

Code complet

<!DOCTYPE html>
<html>
<head>
    <title>固定侧边导航栏布局</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
        <div class="main-content">
            <h1>欢迎访问我们的网站</h1>
            <p>这里是主要内容区域，您可以在这里显示具体的页面内容。</p>
        </div>
    </div>
</body>
</html>

.container {
    display: flex;
}

.sidebar {
    width: 20%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
}

.main-content {
    margin-left: 20%;
    padding: 20px;
}

Avec l'exemple de code ci-dessus, nous avons implémenté avec succès une disposition simple de barre de navigation latérale fixe. Vous pouvez ajuster le style et remplir le contenu en fonction de vos besoins pour obtenir des effets plus complexes et diversifiés. Il s’agit d’un exemple de base qui, je l’espère, sera utile à votre apprentissage et à votre pratique.

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 内边距 flex

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：Comment implémenter la disposition des onglets de navigation horizontale à l'aide de HTML et CSSArticle suivant：Comment implémenter la disposition des onglets de navigation horizontale à l'aide de HTML et CSS

Articles Liés

Voir plus