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中文網(wǎng)</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中文網(wǎng)</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中文網(wǎng)</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
