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
section suivante