制作容易的站点导航栏是CSS真正展现自己特有能力的一个领域。制作导航条的老方法倾向于依赖大量的图片、嵌套表格和Javascript脚本 – 所有这些都会严重影响站点的可用性和无障碍性。如果你的站点不能在一个不支持Javascript的设备上被导航，那么你不仅阻止了关闭Javascript的用户，同时你也阻止了只支持文本的设备，比如屏幕阅读器已经搜索引擎的机器人程序 – 它们将永远无法从你的首页得到网站内容的索引。就算你的客户不在乎无障碍性，告诉他们笨重的菜单阻止他们得到一个体面的搜索引擎排名！
CSS允许你创造具有吸引力的导航栏，采用CSS的优势在于不仅仅它在外观上非常美观，实际上它还是文本 – 是一种采用特殊方法标注的文本，它能够让所有那些物理上没法看到你的设计但是又想得到你的内容的人或者设备无障碍和容易理解地访问你的站点。在本文中，我们将看看各种各样建立基于CSS的导航栏解决方案。其中有一些适合在已有站点实施，以便使这些站点引导更迅速，并且通过替换古板的、基于图片的导航栏来促进它的无障碍性。另外一些更适合集成于纯粹的CSS站点布局中。
对于新设计的网站，你可能会尝试避免使用表格来做布局，或者只是在绝对必要的地方才使用表格。因此，一个不涉及到表格的导航栏解决方案是有用的，同时，通过杜绝表格元素的使用，你会发现你的页面将包含更少的标记符号。
导航栏系统是用户在这个站点能够访问的地点的列表。因此，一个无序的列表是标记你的导航栏的理想方式。象你看到的，在图1中的导航栏的实现是采用CSS样式化的一个列表。
content="text/html; charset=utf-8" />
#navigation {
Breite: 200px;
}
#navigation ul {
Listenstil: keiner;
Marge: 0;
Auffüllung: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
Schriftgröße: 90 %;
Anzeige: Block;
Polsterung: 0,4em 0 0,4em 0,5em;
Rand links: 12 Pixel durchgehend #711515;
Rand rechts: 1 Pixel durchgehend #711515;
Hintergrundfarbe: #B51032;
Farbe: #FFFFFF;
Textdekoration: keine;
}
Um eine Navigationsleiste basierend auf einer ungeordneten Liste zu erstellen, erstellen Sie zunächst Ihre Liste und fügen Sie jeden Navigationslink wie folgt in ein li-Element ein:
Als nächstes wählen Sie eine geeignete ID aus, um die Liste in ein Div aufzunehmen:
Wie Sie in Abbildung 2 unten sehen können, sieht dieses Markup im Standardstil des Browsers recht gewöhnlich aus.
Abbildung 2: Basisliste ohne Styling
Als Erstes müssen wir den Container formatieren, in dem sich die Navigationsleiste befindet – in diesem Fall #navigation:
#navigation {
Breite: 200px;
}
Hier habe ich der #Navigation einfach eine Breite gegeben. Wenn dieses Navigationssystem Teil eines CSS-Seitenlayouts ist, füge ich dieser ID möglicherweise auch einige Standortinformationen hinzu.
Nachfolgend gestalten wir die Liste:
#navigation ul {
Listenstil: keiner;
Marge: 0;
Auffüllung: 0;
}
Wie in Abbildung 3 dargestellt, entfernen die oben genannten Regeln das Präfix und die Einrückung, die standardmäßig angezeigt werden, wenn der Browser eine Liste anzeigt.
Abbildung 3 Liste zum Entfernen von Einrückungen und Präfixen
Der nächste Schritt besteht darin, die li-Elemente mit #navigation zu formatieren und ihnen eine untere Kante zu geben:
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
Zuletzt gestalten wir den Link:
#navigation li a:link, #navigation li a:visited {
Schriftgröße: 90 %;
Anzeige: Block;
Polsterung: 0,4em 0 0,4em 0,5em;
Rand links: 12 Pixel durchgehend #711515;
Rand rechts: 1 Pixel durchgehend #711515;
Hintergrundfarbe: #B51032;
Farbe: #FFFFFF;
Textdekoration: keine;
}
Zu diesem Zeitpunkt ist die meiste Arbeit erledigt. Zu den von uns festgelegten CSS-Regeln gehören das Hinzufügen linker und rechter Ränder, das Entfernen von Unterstreichungen usw. Die erste Attributdefinition in dieser Regel legt das Anzeigeattribut auf Block fest, was dazu führt, dass diese Links als Blockelemente angezeigt werden, sodass, wenn Ihr Cursor über diese Navigationsschaltflächen fährt, der Anzeigeeffekt und die Verwendung von Bild angezeigt werden Die Navigation ist genau das Gleiche.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
