Plusieurs méthodes de création de barres de navigation Web et solutions aux problèmes courants (pour les débutants)

La liste non ordonnée est une balise très pratique souvent utilisée dans la mise en page html. Cependant, les novices ont souvent des problèmes de mise en page horizontale lorsqu'ils utilisent des listes non ordonnées. L'auteur propose ici plusieurs méthodes et solutions courantes. problèmes lors de l'utilisation de listes non ordonnées pour créer des barres de navigation Web. (Prenez le style interne CSS comme exemple)

[Remarque : certains étudiants m'ont déjà demandé comment créer une page Web, mais ils ne connaissent que le HTML. Tous ceux utilisés dans cet article sont du CSS. Par conséquent, si vous avez besoin de créer une navigation de manière urgente et que vous n'avez aucune base technique CSS, ajoutez dans la balise css dedans. Un code clé est requis, visible à la fin. ]

1. Définissez la disposition flottante via la balise

① Comment utiliser : Ajoutez l'attribut float:left au style CSS.

②Questions fréquemment posées : Lorsque la page Web est ajustée, la navigation change en même temps et la mise en page devient confuse.

③Solution : ⑴Dans l'étude du site Web que l'auteur a rencontrée, une méthode courante consiste à positionner de manière absolue la balise li, puis à ajuster la taille de gauche.

Cette méthode est plus élégante et propice aux modifications individuelles. Mais pour ceux qui ont peu d’exigences en matière de pages Web, cela peut être gênant.

⑵Sur la base de mes propres expériences, l'auteur a proposé une méthode très simple

Vous pouvez définir le format via la balise . La méthode est très simple. Définissez simplement la valeur whith du div pour qu'elle soit égale ou supérieure à la longueur maximale de la page Web.

2. La deuxième méthode :

① Utilisez la valeur d'attribut en ligne de l'attribut d'affichage de la balise Dans le même temps, la distance peut être modifiée en ajustant les valeurs de marge et de remplissage.

②Le problème et la solution sont les mêmes que le premier.

3. La troisième méthode :

① Utilisez entièrement le positionnement absolu, adapté aux exigences particulières en matière de position des boutons. (C'est un peu lourd, et la navigation générale est dans une seule colonne, donc ce n'est pas recommandé, mais ça reste utile pour les amis qui en ont besoin)

② Généralement, il n'y aura pas de problèmes de composition

③Avantages : Stable, généralement aucun problème de mise en page, haut degré de liberté. Inconvénients : Pas aussi unifié et régulier que le précédent, relativement lourd et difficile à composer.

Ce qui précède est tout le contenu compilé par l'auteur. Il n'y a aucune garantie qu'il sera complet et précis, donc les blogueurs qui disposent de meilleures méthodes peuvent laisser un message s'il y a des erreurs à signaler, j'espère que vous pourrez me donner vos conseils. Cet article est destiné à m'aider. des blogueurs qui rencontrent des difficultés dans les premiers stades de l'apprentissage comme l'auteur. Merci à tous n(*≧▽≦*)n. Le code du bouton mentionné précédemment :

a{ position: relative; overflow: hidden; background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius: 10px; margin: 4px; width: 80px; }