Barre de navigation CSS

Barre de navigation

Une utilisation compétente de la barre de navigation est très importante pour tout site Web.

En utilisant CSS, vous pouvez le transformer en une belle barre de navigation au lieu d'un menu HTML ennuyeux.

Barre de navigation = liste de liens

En tant que base HTML standard, une barre de navigation est nécessaire

. Dans notre exemple, nous allons créer une barre de navigation de liste HTML standard.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网</title> 
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
<p>注意:我们用 href="#"作为测试连接.用在一个真正的web站点的url。</p>
</body>
</html>

Barre de navigation verticale

Dans le code ci-dessus, nous n'avons besoin que du style de l'élément <a> 🎜> Exemple :

display:block - affiche les liens vers les éléments de blocage, rendant toute la zone du lien cliquable (pas seulement le texte). Cela nous permet de spécifier la largeur

width:60px - block. éléments La valeur par défaut est la largeur maximale. Nous devons spécifier une largeur de 60 pixels

Remarque : Assurez-vous de spécifier la largeur de l'élément <a> dans la barre de navigation verticale. Si vous omettez la largeur, IE6 peut avoir des effets inattendus.

Barre de navigation horizontale Il existe deux façons de créer une barre de navigation horizontale. Utilisez des éléments de liste en ligne ou flottants.

Les deux méthodes conviennent, mais si vous souhaitez que les liens aient la même taille, vous devez utiliser la méthode float.

Éléments de liste en ligneL'une des façons de créer une barre de navigation horizontale consiste à spécifier l'élément

. Le code ci-dessus est Standard en ligne :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>

éléments de liste flottante

Dans l'exemple ci-dessus, les liens ont des largeurs différentes.

Pour que tous les liens aient la même largeur, faites flotter l'élément <li> et spécifiez la largeur de l'élément <a> :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>

Exemple de résolution :

float:left - diapositives utilisant des éléments de bloc flottants les uns à côté des autres

display:block - affiche des liens vers des éléments de bloc, transformant le tout en une zone de lien cliquable (pas seulement du texte), cela permet us Spécifiez la largeur

width:60px - Les éléments de bloc ont une largeur maximale par défaut. Nous voulons spécifier une largeur de 60 pixels

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</title> <style> ul { list-style-type:none; margin:0; padding:0; } a { display:block; width:60px; background-color:#dddddd; } </style> </head> <body> <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">娱乐</a></li> <li><a href="#">关于</a></li> </ul> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Barre de navigation CSS

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]