将之前的垂直导航改成水平的导航（点击链接查看），HTML部分的代码不变，只是对样式表单作了些改变。
一、HTML代码
<!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" xml:lang="en" lang="en">
<head>
<title>Vertical Navigation</title>
<!--meta标记定义的字符集是支持中文的gb2312-->
<meta http-equiv=content-type content="text/html; charset=gb2312">
<!--链接外部CSS样式 -->
<link rel="stylesheet" href="horizontal.css" type="text/css" media="screen" />
</head>
<body id="body_his"> <!--为body设置一个id属性，和导航的id关联起来以指出用户目前在浏览网站的哪个页面或哪个区 -->
<!--直接将导航项目包含在一个列表中，为排序列表和div一样属于块级别元素，所以直接将id赋予列表自身 -->
<ul id="nav">
<!--为列表的每个项目都设置唯一的id -->
<li id="nav_hom"><a href="/">Home</a></li>
<li id="nav_map"><a href="/maps/">Maps</a></li>
<li id="nav_jou"><a href="/journal/">Journal</a></li>
<li id="nav_his"><a href="/history/">History</a></li>
<li id="nav_ref"><a href="/references/">References</a></li>
<li id="nav_con"><a href="/contact/">Contact</a></li>
</ul>
</body>
</html>
二、CSS代码
/*CSS STYLE SHEET FOR [horizontal.html]
Created by [Serein_Chan]
Email: [Serein_Chan@foxmail.com]
Author Blog:[http://blog.csdn.net/cxwen78]
*/
/*注释 */
/*由于导航字体可能会与页面其余字体相匹配，所以font-family在CSS较高的位置进行声明 */
html {
font: small/1.4 "Lucida Grande", Tahoma, sans-serif;
}
body {
font-size: 92%;
}
#nav {
margin: 0;
padding: 0;
background: #6F6146;
list-style-type: none;
width: 767px; /* 设置未排序列表元素的宽度 */
float: left; /* Contain floated list items */
}
#nav li {
margin: 0;
padding: 0;
float: left;
/* width: 100%; 列表项彼此相邻，所以不在需要宽度设置*/
}
#nav a {
float: left;
width: 127px; /*设置每个导航项的宽度*/
color: #FFF;
text-decoration: none; /*定义标准的文本，链接文本没有下划线*/
line-height: 2.5;
text-align: center; /* 文字位于每个列表项的中间*/
border-right: 1px solid #FFF; /*只设置右边框*/
}
#nav #nav_con a {
border: none; /*单独除去最后一个列表的边框线*/
}
#nav a:hover {
background: #4F4532; /*伪类hover设置停留时的背景颜色改变*/
}
/*将导航的id与body的id关联，为当前的访问的导航元素设置样式，以凸显浏览所在的“当前位置”*/
#body_hom #nav_hom a,
#body_map #nav_map a,
#body_jou #nav_jou a,
#body_his #nav_his a,
#body_ref #nav_ref a,
#body_con #nav_con a {
background: #BEB06F; /*背景颜色变浅*/
color: #1A1303; /*字体颜色接近黑色*/
font-weight: bold; /*字体加粗*/
}
三、效果图
