Le li dans la balise en HTML est disposé horizontalement

La première étape consiste à écrire la structure du code HTML du menu horizontal

Veuillez ajouter le code suivant dans la zone de la barre de navigation du document HTML.

<ul id="menu">
 <li><a href="http://www.baidu.com">Baidu.Com</a></li>
 <li><a href="http://www.Code52.Net">Code52.Net</a></li>
 <li><a href="http://www.yahoo.com">Yahoo.Com</a></li>
 <li><a href="http://www.google.com" class="last">Google.Com</a></li>
</ul>

Deuxième étape, écrivez le code CSS

1 Définir le style public

Veuillez modifier le code CSS suivant. Ajouté à la portée de la balise ... du document HTML.

<style type="text/css">
#menu { 
font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
}
#menu, #menu li {
list-style:none; /* 将默认的列表符号去掉 */
padding:0; /* 将默认的内边距去掉 */
margin:0; /* 将默认的外边距去掉 */
}
</style>

Comme nous le savons tous, les éléments

dans

sont disposés verticalement par défaut. Nous devons définir CSS pour les disposer horizontalement.

Conseils : Parce que nous retirons maintenant la barre de navigation pour l'expliquer de manière indépendante, nous devons définir certains styles publics. Si vous avez réinitialisé l'effet par défaut dans le corps ou à d'autres endroits, le code ci-dessus peut être supprimé

2. Laissez le texte être disposé horizontalement

Comme nous le savons tous, les éléments sous la balise

disposé verticalement par défaut. Nous devons définir une propriété CSS supplémentaire pour l'aligner horizontalement.

<style type="text/css">
#menu li { 
float:left; /* 往左浮动 */
}
</style>

3. Définissez le style du lien :

<style type="text/css">
#menu li a {
display:block; /* 将链接设为块级元素 */
padding:8px 50px; /* 设置内边距 */
background:#3A4953; /* 设置背景色 */
color:#fff; /* 设置文字颜色 */
text-decoration:none; /* 去掉下划线 */
border-right:1px solid #000; /* 在左侧加上分隔线 */
}
</style>

Nous utilisons un remplissage pour élargir chaque menu. Certains, si votre menu est un mélange de chinois et En anglais, il est recommandé de définir la hauteur et la largeur d'un seul menu, afin d'éviter les erreurs de hauteur causées par des hauteurs de ligne incohérentes des caractères chinois et anglais. Comment définir une hauteur fixe :

<style type="text/css">
#menu li a {
display:block; /* 将链接设为块级元素 */
width:150px; /* 设置宽度 */
height:30px; /* 设置高度 */
line-height:30px; /* 设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 */
text-align:center; /* 居中对齐文字 */
background:#3A4953; /* 设置背景色 */
color:#fff; /* 设置文字颜色 */
text-decoration:none; /* 去掉下划线 */
border-right:1px solid #000; /* 在左侧加上分隔线 */
}
</style>

4. Effet de survol du lien :

Grâce à l'effet combiné des étapes ci-dessus, le cadre préliminaire d'une navigation horizontale la barre apparaît. Cette étape consiste principalement à définir l’effet de survol du lien pour rendre la barre de navigation plus belle. Bien entendu, si vous souhaitez rendre la barre de navigation plus éblouissante, vous pouvez définir une image de fond sur la propriété CSS hover.

<style type="text/css">
#menu li a:hover {
background:#146C9C; /* 变换背景色 */
color:#fff; /* 变换文字颜色 */
}
</style>

Il y a une faille dans le code ici. Il y aura une bordure supplémentaire à l'extrême droite Puisque la pseudo-classe :first-child n'est pas prise en charge par les navigateurs de la série IE, nous pouvons seulement. écrivez un style séparé et ajoutez le dernier. Les bordures sont supprimées et un sélecteur supplémentaire est ajouté au code HTML.

<ul id="menu">
<li><a href="http://www.baidu.com">Baidu.Com</a></li>
<li><a href="http://www.Code52.Net">Code52.Net</a></li>
<li><a href="http://www.yahoo.com">Yahoo.com</a></li>
<li><a href="http://www.google.com" class="last">Google.com</a></li>
</ul>

<style type="text/css">
#menu li a.last {
border-right:0; /* 去掉左侧边框 */
}
</style>

D'accord, maintenant un simple menu de navigation horizontale a été créé. N'est-ce pas très simple ? Le code complet est donné ci-dessous :

<style type="text/css">
#menu { 
 font:12px verdana, arial, sans-serif; 
}
#menu, #menu li {
 list-style:none;
 padding:0;
 margin:0;
}
#menu li { 
 float:left; 
}
#menu li a {
 display:block;
 /* 如果是中英文混排的文字，建议用固定宽度
 width:150px;
 height:30px;
 line-height:30px;
 text-align:center;
 */
 padding:8px 50px;
 background:#3A4953;
 color:#fff;
 text-decoration:none;
 border-right:1px solid #000;
}
#menu li a:hover {
 background:#146C9C;
 color:#fff;
 text-decoration:none;
 border-right:1px solid #000;
}
#menu li a.last {
 border-right:0; /* 去掉左侧边框 */
}
</style>

Vous pouvez consulter la démo en ligne que nous avons produite et télécharger l'exemple de package fourni dans cet article.

J'ai modifié le style CSS ci-dessus. Comme suit :

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!