一个基本的垂直导航，从中学习开发导航系统所需的基本标记——为排序列表标志ul、li。其中还涉及了如何调试消除IE显示列表项的空白问题。详细说明见代码注释。废话不多说，直接上代码：
1、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="vertical.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>2、CSS代码 /*CSS STYLE SHEET FOR [vertical.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: 180px; float: left; /* Contain floated list items */ } /*通过对列表项的浮动float处理，在IE列表项之间不再有空白 */ #nav li { margin: 0; padding: 0; float: left; /* 调试IE列表项的“空白bug”这是IE错误的显示了列表项之间的空白导致的一种现象 */ width: 100%; /* IE的空白bug */ } #nav a { display: block; /*为了增大可单击区域，作为a的默认内联区域 */ color: #FFF; text-decoration: none; /*定义标准的文本，链接文本没有下划线*/ padding: 0 15px; line-height: 2.5; border-bottom: 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; /*字体加粗*/ }
3、效果图
4、巧妙的添加“当前浏览”导航提示
要标识与当前浏览页面相关联的导航项目，一个常用的方法是为包含该页面链接的列表项添加一个class属性，用于标识并凸显导航被选中时的效果。例如当前选中的项为"History"，则HTML代码为：
<li id = "nav_his" class="current"><a href="/history/">History</a></li>相关联的CSS代码为： #nav li.current a { background: #BEB06F; /*背景颜色变浅*/ color: #1A1303; /*字体颜色接近黑色*/ font-weight: bold; /*字体加粗*/ }
/*将导航的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; /*字体加粗*/ } 测试，将HTML中的body的id值改成body_hom，CSS代码不变，显示的效果为：
2599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
