Einführung in das CSS-Webseitenlayout, Tutorial 12: Vertikales Navigationsmenü_Grundlegendes Tutorial

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

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

    

CSS

        

css入门

        

css进阶

        

css高级

    

webUI

        

理论知识

        

实战应用

        

高级技巧

    

DOM

        

DOM入门

        

DOM应用

        

DOM与浏览器

    

XHTML

        

参考手册

        

交流论坛

Wie aus dem Obigen hervorgeht, unterscheidet sich der horizontale Code des XHTML-Teils dieses Mal geringfügig. Wir verwenden die Tags ul und li tatsächlich nicht weiter kann vollständig realisiert werden, indem weiterhin das ul-Element verwendet wird. An diesem malerischen Ort hoffen wir jedoch, mehr verschiedene Möglichkeiten bereitzustellen, um die Flexibilität und Bequemlichkeit des CSS-Designs zu demonstrieren und so zu weiteren Designideen zu inspirieren.
Diesmal ist das Format div+h1+h2. Wir verwenden div-Tags, um einen Navigationsstrukturbereich einzurichten. In diesem Bereich verwenden wir h1 als Titel der Klassifizierung der zweiten Ebene und h2 als Details unterhalb der Klassifizierung der zweiten Ebene. Im Sinne von XHTML haben die Tags h1, h2 und h3 selbst die Bedeutung einer hierarchischen Aufteilung von Text. Die direkte Verwendung von h1 und h2 zum Ausdruck hierarchischer Beziehungen unterscheidet sich vom Hinzufügen von IDs oder Klassen zu Tags zum Erstellen hierarchischer Beziehungen intuitiver. Es ist wirklich angebracht, h1 und h2 zu verwenden, um verschiedene Ebenen von Klassifizierungsnamen zu kennzeichnen. Werfen wir einen Blick auf das Design des CSS-Codes:

#nav { width:100px; border-style:solid; border-width:0px 1px 1px 1px;🎜 ># nav h1 {marge:0px;font-size:12px;font-top:1pxbackground-color:#CCCCCC; ># nav h2 { margin:0px; padding:12px; font-weight:normal;}
#nav h2 a { color:#666666; ;}
#nav h2 a:hover { color:#999999; text-decoration:underline;}

Dieser CSS-Codeteil verwendet eine vereinfachte Schreibmethode, falls Sie die Bedeutung von keinem verstehen Wenn Sie einen Satz geschrieben haben, können Sie ihn in Dreamweaver Open ändern und das Bearbeitungs-Stylesheet auswählen, um zu sehen, um welches Element es sich handelt. Ich glaube, dass Sie diese Codes nach mehreren Übungen vollständig verstehen können, was bedeutet, dass Sie dem Meister einen Schritt näher gekommen sind.
Ihnen ist vielleicht aufgefallen, dass in diesem Beispiel der Rand von #nav nur ein Pixel für den linken und rechten unteren Teil und keinen oberen Teil hat, aber im h1-Stil das obere Pixel des oberen Teils festgelegt ist? Warum ist das so? Da sich oben im h1-Stil eine horizontale Linie befindet, wird eine weitere horizontale Linie oben im Navigationselement auf zwei vergrößert, und das Ergebnis ist zwei Pixel hoch.
Okay, Sie können den vollständigen Effekt in der Vorschau anzeigen:

Vertikales Navigationsmenü<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <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> CSS<div id="nav"> <h1></h1>Erste Schritte mit CSS<h2><a href="#"> </a></h2>CSS erweitert<h2><a href="#"> </a></h2>CSS erweitert<h2> <a href="#"> </a>WebUI</h2> <h1></h1>Theoretische Kenntnisse<h2><a href="#"> </a></h2>Praktische Anwendung<h2><a href="#"> </a></h2>Erweiterte Tipps<h2> <a href="#"> </a>DOM</h2> <h1></h1>Erste Schritte mit DOM<h2><a href="#"> </a></h2>DOM-Anwendung<h2><a href="#"> </a></h2>DOM und Browser<h2> <a href="#"> </a>XHTML</h2> <h1></h1>Referenzhandbuch<h2><a href="#"> </a></h2>Kommunikationsforum<h2> <a href="#"> </a> </h2> </div>