使用CSS开发时髦的导航栏（三）
翻译: 
把眉批拖到这里
如何使用CSS和列表构造一个水平菜单？
到目前为止，我们能够处理垂直导航栏了—这种导航栏在一个中间是主要内容的网站左边或右边很容易被看到。然而，导航栏也常常被做成水平菜单紧挨在文本上方。
解决方案
图8显示的这种类型的导航栏可以用CSS样式化的列表实现。li元素必须被设置成inline（内联）显示，这样可以避免每个列表元素换行显示。
图8：水平菜单导航栏
这是产生这个显示效果的HTML和CSS代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Lists as navigation</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav_horiz.css" />
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>
#navigation {
font-size: 90%;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
padding: 0.4em 1em 0.4em 1em;
color: #FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #711515;
}
讨论
为了产生水平导航栏，我们从创建一个和前面垂直导航栏ID一样的列表开始：
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
象我们在垂直导航栏做的一样，我们样式化#navigation容器，给它设置一些基本的字体信息。如果页面完全是CSS布局的话，这个ID可能还会包含一些确定导航栏在页面位置的样式：
#navigation {
font-size: 90%;
}
在ul元素的样式里面，我们移除掉列表在浏览器显示时的标志位和缩进：
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
下面是把li元素的显示从垂直变换到水平的属性：
#navigation li {
display: inline;
}
在我们把display属性设定为inline之后，这个列表显示出来象图9一样：
图9：disply:inline的列表显示
我们剩下的工作是样式化导航栏的链接：
#navigation a:link, #navigation a:visited {
padding: 0.4em 1em 0.4em 1em;
color: #FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #711515;
}
如果你想像我这样，在每个链接外面创建一个框，记得为了在文本和它的容器边缘留更多的空隙，你必须在链接左面和右边设定更多的padding，为了在导航栏各个项目间增加更多空隙，你必须增加链接左边和右边的margins。
-
Top 100 web2.0网站 最热门的100个网站
视频 *YouTube :YouTube（你的视频）是一个可以让用户免费上传、观赏、分享视频短片的热门视频共享网站 *Meta Cafe: Metacafe （麦塔咖啡厅）-得到最好的网上视频-搞笑...
-
使用CSS开发时髦的导航栏（一）
除非限制你自己只做单个页面的网站，否则你都需要导航栏。事实上，导航栏是任何网站设计中最主要的部分之一，如果希望用户很容易的在你的站点移动，导航栏的设计需要大量的思考。 制作容易的站点导航栏是CSS真...
-
CSS渐变文本效果
你是否想不用photoshop来创建一个带渐变的标题文字吗? 这里用一个简单的css技巧来向你展示如何仅仅使用css和png图片来制造这种效果. 经测试这种方法适合大多数主流浏览器.当然, IE6需...
-
14个可以节省你时间的CSS工具
作为一个网站设计/开发人员，你必须不断寻找方法来减少设计/开发过程中所花费的时间。这对于提高你的工作效率并最大化你的利润是非常重要的。下面介绍的按功能分类的CSS工具可以有效地节省你设计网站的时间。C...
-
2008 Web设计潮流走势
之所以翻译这篇文章，不是让大家欢欣鼓舞的去跟随这些所谓的“潮流走势”，正好相反，我是想提醒大家：小心，这些风格可能马上就要过时了。 当某种风格一旦成为了可以归类的“潮流”，那就意味着，它离过时已...
-
使用CSS开发时髦的导航栏（二）
我能够使用CSS和列表创造有子菜单的导航栏吗？ 有时候我们需要超过一级的导航栏 – 可是在CSS里面用样式化的列表能够创建多级导航栏吗？ 解决方案 在一个导航系统中显示子菜单最好的办法是在一个列...
-
CSS完美分页样式
这个教程要说明的是如何为搜索结果或更常见的长记录列表设计分页。经常有人问我这个问题，所以我决定发一个帖子来说明如何用少量的 HTML 和 CSS 代码设计完美的分页样式。
-
设计者的框架
这是A List Apart上面一篇关于CSS设计框架的文章，初次上yeeyan翻译，包涵包涵，站点还不是很会用。有错误希望指正。
相关小组
-
Web设计
(119译文)
标签:
