制作简易的网站导航栏是CSS真正展示其独特能力的一个领域。制作导航栏的旧方法倾向于依赖大量图片、嵌套表格和Javascript脚本——所有这些都会严重影响网站的可用性和可访问性。如果你的网站无法在不支持Javascript的设备上导航，你不仅会阻止关闭Javascript的用户，还会阻止只支持文本的设备，比如搜索过引擎机器人程序的屏幕阅读器——他们永远无法从你的主页获取网站内容的索引。即使你的客户不关心可访问性，告诉他们繁琐的菜单会阻止他们获得一个体面的搜索引擎排名！CSS允许你创建吸引人的导航栏。使用CSS的好处是，它不仅外观漂亮，实际上也是一个文本——它是一个用特殊方法标记的文本，可以让所有物理上看不到你的设计但想要你的内容的人或设备无障碍地访问你的网站，并且容易理解。在本文中，我们将研究基于CSS构建导航栏的各种解决方案。其中一些适合在现有网站中实现，以便通过取代基于图片的老式导航栏，使它们更快地引导并促进其可访问性。其他更适合集成到纯CSS站点布局中。

如何把一个结构化的列表样式化为导航栏菜单？

对于新设计的网站，可以尽量避免使用表格进行布局，或者只在绝对必要的地方使用表格。因此，不涉及表格的导航栏解决方案非常有用。同时，通过消除表元素的使用，您会发现您的页面将包含更少的标记符号。00-1010导航栏系统是用户可以在该网站访问的地方列表。因此，无序列表是标记导航栏的理想方式。如您所见，图1中导航栏的实现是一个CSS样式的列表。

图1:风格化列表的导航栏！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN ' ' http://www . w3 . org/TR/XHTML L1/DTD/XHTML L1-Strict . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' lang=' EN-US ' head titles as navigation/title meta http-equiv=' content-type ' content=' text/html；charset=utf-8' /link rel='样式表' type=' text/CSS ' href=' listnav 1 . CSS '//headsdydiv id=' navigation ' ullia href=' # ' Recipes/a/lilia href=' # ' Contact Us/a/lilia href=' # ' Articles/a/lilia href=' # ' Online Buy/a/Li/ul/div/body/html # navigation { width : 200 px；} #导航ul { list-style : none；margin : 0；padd : 0；} #导航li {边框-底部： 1px实心# ED9F9F} #导航li a:link，#导航size:访问量{ font-size : 90%；display:块；padd : 0.4 em 0.4 em 0.5 em；边框-左侧： 12px实心# 711515；border-right: 1px实心# 711515；背景-颜色： # B51032；color: # FFFFFF文本装饰：无；}

解决方案

为了创建一个基于无序列表的导航栏，首先设置你的列表，并将每个导航链接放入li元素。就像这样：ullia href=' # '食谱/a/lilia href=' # ' contact us/a/lilia href=' # '文章/a/lilia href=' #' buyonline/a/Li/ul接下来，选择一个合适的ID以将列表包含在div中：div id=' navigation' ullia href=' # '食谱/a/lilia href=' # ' contact us/a/lilia href=' # '文章/a/lilia href=' # ' buy online/a

图2:没有风格化的基本列表，我们需要做的第一件事就是风格化导航栏所在的容器——这里是# navigation:# navigation { width : 200px；}这里我简单给#navigation一个宽度。如果这个导航系统是CSS页面布局的一部分，我可能还会给这个ID添加一些位置信息。下面，我们对列表进行样式化：# navigation ul { list-style : none；margin : 0；padd : 0；}如图3所示，上面的规则删除了默认情况下浏览器显示列表时出现的前缀和缩进。

图3删除缩进和前缀列表。下一步是使用#navigation为li元素设置样式并给它们一个底边：# navigation Li { border-bottom : 1 pxsolid # ed9f；}最后，我们对链接进行了风格化：# navigationli a:链接，# navigationli a:访问量{ font-size : 90%；display:块；padd : 0.4 em 0.4 em 0.5 em；边框-左侧： 12px实心# 711515；border-right: 1px实心# 711515；背景-颜色： # B51032；color: # FFFFFF文本装饰：无；}大部分工作已经在这里完成。我们创建的CSS规则包括添加左右边距、删除下划线等等。在此规则中，第一个属性定义将显示属性设置为block，这使得那些链接显示为block元素，这样当您将光标悬停在这些导航“按钮”上时，显示效果与使用图片导航完全相同。