Tutoriel d'introduction à la mise en page Web CSS 12 : Menu de navigation verticale_Tutoriel de base

纵向导航菜单也是网站应用中的一种重要形式，所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式。先看一下效果吧！

如图所示的效果，我们先看一下代码结构：

    

CSS

        

css入门

        

css进阶

        

css高级

    

webUI

        

理论知识

        

实战应用

        

高级技巧

    

DOM

        

DOM入门

        

DOM应用

        

DOM与浏览器

    

XHTML

        

参考手册

        

交流论坛

Comme le montre ce qui précède, le code horizontal de la partie XHTML du code est légèrement différent cette fois. Nous ne continuons pas à utiliser les balises ul et li. En fait, le système de navigation verticale. peut être pleinement réalisé en continuant à utiliser l'élément ul, mais dans cet endroit pittoresque, nous espérons proposer des façons plus différentes de montrer la flexibilité et la commodité de la conception CSS afin d'inspirer davantage d'idées de conception.
Cette fois, le format est div+h1+h2. Nous utilisons des balises div pour configurer une zone de structure de navigation. Dans ce domaine, nous utilisons h1 comme titre de la classification de deuxième niveau et h2 comme détails sous la classification de deuxième niveau. Au sens XHTML, les balises h1, h2 et h3 elles-mêmes ont le sens de division hiérarchique du texte. Utiliser directement h1 et h2 pour exprimer des relations hiérarchiques est différent de l'ajout d'un identifiant ou d'une classe aux balises pour créer des relations hiérarchiques. plus intuitif. Il est vraiment approprié d'utiliser ici h1 et h2 pour marquer différents niveaux de noms de classification. Jetons un coup d'œil à la conception du code CSS :

#nav { width:100px; border-color:#c5c6c4; border-style:border-width:0px 1px 1px 1px;}
# nav h1 { margin:0px; padding:4px; font-size:bold; font-family:Verdana; border-top:1px solid #c5c6c4; ># nav h2 { margin:0px; padding:4px; font-family:Verdana; font-weight:normal;}
#nav h2 a { color:#666666; ;}
#nav h2 a:hover { color:#999999; text-decoration:underline;}

Cette partie de code CSS utilise une méthode d'écriture simplifiée. Si vous ne comprenez pas la signification de quelque chose. phrase, vous pouvez la modifier dans Dreamweaver Open et sélectionner la feuille de style d'édition pour voir de quel élément il s'agit. Je pense qu'après plusieurs exercices, vous pouvez pleinement comprendre ces codes, ce qui signifie que vous êtes sur le point de devenir un maître.
Vous avez peut-être remarqué que dans cet exemple, la bordure de #nav n'a qu'un seul pixel pour le bas gauche et droit et pas de haut, mais dans le style h1, le pixel supérieur de la partie supérieure est défini ? Pourquoi est-ce ? Comme il y a une ligne horizontale en haut du style h1, s'il y a une autre ligne horizontale en haut de la navigation, elle grandira en deux et le résultat sera de deux pixels de hauteur.
D'accord, vous pouvez prévisualiser l'effet complet :

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">Menu de navigation vertical<title> </title> <style> #nav { width:100px; border-color:#c5c6c4; border-style:solid; border-width:0px 1px 1px 1px;} #nav h1 { margin:0px; padding:4px; font-size:12px; font-weight:bold; font-family:Verdana; border-top:1px solid #c5c6c4; background-color:#CCCCCC;} #nav h2 { margin:0px; padding:4px; font-size:12px; font-family:Verdana; font-weight:normal;} #nav h2 a { color:#666666; text-decoration:none;} #nav h2 a:hover { color:#999999; text-decoration:underline;} </style> <div id="nav">CSS<h1> </h1> <h2>D茅marrer avec CSS<a href="#"></a> </h2> <h2>css avanc茅<a href="#"></a> </h2> <h2>css avanc茅<a href="#"></a> </h2>interface Web<h1> </h1> <h2>Connaissances th茅oriques<a href="#"></a> </h2> <h2>Application pratique<a href="#"></a> </h2> <h2>Conseils avanc茅s<a href="#"></a> </h2>DOM<h1> </h1> <h2>D茅marrer avec DOM<a href="#"></a> </h2> <h2>Application DOM<a href="#"></a> </h2> <h2>DOM et navigateur<a href="#"></a> </h2>XHTML<h1> </h1> <h2>Manuel de r茅f茅rence<a href="#"></a> </h2> <h2>Forum de communication<a href="#"></a> </h2> </div>