Maison >interface Web >tutoriel CSS >Méthode CSS pour implémenter la navigation horizontale et la barre de navigation verticale (code)

Méthode CSS pour implémenter la navigation horizontale et la barre de navigation verticale (code)

不言original: 2018-08-21 10:53:4317628parcourir

Ce que cet article vous apporte concerne la méthode (code) de CSS pour implémenter la navigation horizontale et la barre de navigation verticale. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Navigation verticale

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul{
list-style-type:none;
margin:0;
padding:0;
}

a{
display:block;
background-color:green;
color:white;
width:80px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active{
background-color:#98bf21;
}

</style>
</head>
<body>
<ul>
<li><a herf="">首页</a></li>
<li><a herf="">学习中心</a></li>
<li><a herf="">考试中心</a></li>
<li><a herf="">考试动态</a></li>
</ul>
</body>
</html>

Résultat de l'exécution :

Méthode CSS pour implémenter la navigation horizontale et la barre de navigation verticale (code)

2. Navigation horizontale :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
float:left;
}
a{
display:block;
background-color:pink;
color:white;
width:80px;
text-align:center;
padding:4px 0px;
text-decoration:none;
}
a:hover,a:active{
background-color:gray;
}

</style>
</head>
<body>
<ul>
<li><a herf="">首页</a></li>
<li><a herf="">学习中心</a></li>
<li><a herf="">考试中心</a></li>
<li><a herf="">考试动态</a></li>
</ul>
</body>
</html>

Exécuter les résultats :

Méthode CSS pour implémenter la navigation horizontale et la barre de navigation verticale (code)

Remarque :

1 Le display=block de la balise a fait du lien une zone cliquable à la place. de texte.

2. Après avoir spécifié un lien comme élément de bloc, vous pouvez définir la largeur pour que la largeur de chaque lien soit la même.

Recommandations associées :

barre de navigation CSS div (barre de navigation CSS plein écran)_html/css_WEB-ITnose

CSS image Navigation_html/css_WEB-ITnez

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter un dégradé de texte en CSS3 ? Trois façons d'implémenter un dégradé de texte en CSS3 (code)Article suivant：Comment implémenter un dégradé de texte en CSS3 ? Trois façons d'implémenter un dégradé de texte en CSS3 (code)

Articles Liés

Voir plus