导航--一个基本的垂直导航

最新推荐文章于 2022-07-21 11:15:02 发布

Serein

最新推荐文章于 2022-07-21 11:15:02 发布

阅读量2k

点赞数

分类专栏： CSS设计文章标签： css stylesheet html float xhtml ie

本文链接：https://blog.csdn.net/cxwen78/article/details/6642777

版权

CSS设计专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一个基本的垂直导航，从中学习开发导航系统所需的基本标记——为排序列表标志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;	/*字体加粗*/
}

但是本案例中采用语义的方法，考虑到可能需要为页面的多个因素（不只是导航）设置不同的样式（例如为网站的各个区域进行不同设置），因此，为body元素设置一个id属性，以指出用户目前在浏览网站的哪个页面，并为每个区域指定对应的body的id属性值，然后关联起来为当前的导航元素设置样式，以凸显当前导航的效果。主要代码为：

<body id="body_his">

和

/*将导航的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代码不变，显示的效果为：

参考：《The Art & Science of CSS》

Serein

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导航--一个基本的垂直导航

一个基本的垂直导航，从中学习开发导航系统所需的基本标记——为排序列表标志ul、li。其中还涉及了如何调试消除IE显示列表项的空白问题。详细说明见代码注释。废话不多说，直接上代码：1、HTML代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1
复制链接

扫一扫