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 HTML standard une barre de navigation est requise

Dans notre exemple nous allons créer un HTML standard barre de navigation de la liste.

La barre de navigation est essentiellement une liste de liens, donc utiliser les éléments <ul> et <li> est très logique :

Exemple

  <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p>注意:我们用 href="#"作为测试连接.用在一个真正的web站点的url。</p>

</body>
</html>

Maintenant, supprimons la marge et le remplissage de la liste :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

Exemple d'analyse :

list-style-type:none - supprimez la petite marque devant la liste. Une barre de navigation ne nécessite pas de balises de liste
Supprimez les paramètres par défaut du navigateur et définissez les marges et le remplissage sur 0

Le code dans l'exemple ci-dessus est destiné aux barres de navigation verticales et horizontales Code standard utilisé.

Barre de navigation verticale

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

Instance

        <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>

Exemple de description :

Remarque : Veuillez vous assurer de spécifier la largeur de l'élément dans la barre de navigation verticale.

Barre de navigation horizontale

Il existe deux façons de créer une barre de navigation horizontale. Utilisez

inline ou float pour les éléments de la liste.

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 ligne

L'une des façons de créer une barre de navigation horizontale consiste à spécifier l'élément

Le code ci-dessus est. un Inline interne standard :

Instance

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
li
{
display:inline;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Analyse d'instance :

est un élément bloc. Ici, nous supprimons les nouvelles lignes avant et après chaque élément de la liste pour afficher une seule ligne.

É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中文网(php.cn)</title>
    <style>
        ul
        {
            list-style-type:none;
            margin:0;
            padding:0;
            overflow:hidden;
        }
        li
        {
            float:left;
        }
        a
        {
            display:block;
            width:60px;
            background-color:#dddddd;
        }
    </style>
</head>

<body>
<ul>
    <li><a href="">Home</a></li>
    <li><a href="">News</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">About</a></li>
</ul>

</body>
</html>

Exemple d'analyse :

float:left - Les diapositives utilisant des éléments de bloc flottants sont adjacentes les unes aux autres
display:block - Afficher les liens vers les éléments de bloc, rendant l'ensemble visible sur clic sur la zone du lien (pas seulement sur le texte), cela nous permet de spécifier la largeur
width:60px - la largeur maximale des éléments de bloc par défaut. Nous voulons spécifier une largeur de 60 pixels

section suivante