Maison > Article > interface Web > Lors de la conception d’une page Web front-end, comment centrer la barre de navigation (test de code) ?
Lors de la conception d’une page Web front-end, comment centrer la barre de navigation (test de code) ?
- 藏色散人original
- 2018-08-09 09:57:2714592parcourir
Pour les amis novices qui commencent tout juste à concevoir le front-end d'un site Web, il est inévitable que la barre de navigation soit gâchée. Dans des circonstances normales, aligner la barre de navigation au centre est la meilleure façon d'afficher. la page d'accueil. Alors, comment utiliser un simple div+css pour aligner la barre de navigation au centre ? Cet article présentera en détail une méthode très simple pour réaliser l’alignement central de la barre de navigation. J’espère qu’elle vous sera utile !
L'exemple de code pour l'alignement central de la barre de navigation est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div+css做导航栏居中对齐示例</title>
</head>
<style>
body
{
text-align:center; /* 文字居中 */
}
ul
{
list-style-type:none; /* ul前面的点 */
}
*
{
margin:0px 0px; /* 到边框的距离 */
}
.menu
{
background: #029789; /* 导航条背景的颜色 */
}
.nav
{
margin:0 auto; /* 导航栏文字的位置 */
width:800px; /* 和文字宽度有关，不能小于文字宽度的总和 */
height:80px; /* 导航栏的宽度 */
}
.nav a
{
float:left; /* 导航栏的位置配置 */
width:140px; /* 选中的文字块的长度 */
line-height:80px; /* 选中的文字块的宽度 */
text-decoration: none; /* 去掉连接下划线 */
font-size:45px; /* 字体大小 */
color: #FFFFFF; /* 字体颜色 */
}
.nav li a:hover
{
background-color: #1094f2; /* 选中的文字块的颜色 */
text-decoration:none; /* 选中时去掉连接下划线 */
}
.nav li a:link{
text-decoration:none; /* 连接被点之后没有下划线 */
}
</style>
<body>
<div class="menu"> <!-- class选择器 -->
<div class="nav">
<ul> <!-- ul标签 -->
<li><a href="#">导航1</a></li> <!-- li标签 -->
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
</ul>
</div>
</div>
</body>
</html>Ce code peut être copié directement pour des tests locaux, et la page s'affichera comme indiqué ci-dessous :
Introduction aux attributs de balise associés :
L'attribut text-decoration spécifie la décoration ajoutée au texte. Les valeurs et descriptions possibles sont présentées ci-dessous
[Articles connexes recommandés]
Exemples détaillés de cinq méthodes en CSS pour obtenir une centrage des menus de navigation
Comment utiliser DIV et CSS pour créer une barre de navigation
div+css pour créer une navigation de premier niveau
Comment utiliser CSS pour centrer un DIV
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!