导航--水平圆角图片标签导航

最新推荐文章于 2024-08-09 07:24:46 发布

Serein

最新推荐文章于 2024-08-09 07:24:46 发布

阅读量1.2k

点赞数

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

本文链接：https://blog.youkuaiyun.com/cxwen78/article/details/6645446

版权

CSS设计专栏收录该内容

13 篇文章

订阅专栏

在前面提到的基本的水平导航（点击查看）的基础上，要求每个菜单项顶角是圆角。通过CSS样式设置难以实现，所以我们借助圆角的图片来实现这个效果。我们注意到菜单项有三种不同的颜色，按照常理应该需要三个不同的标签图片来创建菜单。但是如果把标签作为独立的图片，当页面最初加载到用户端浏览器时，不会加载全部的图片，只有当鼠标开始停留和点击导航标签时，图片才会被加载之后才会显示，这样的效果不好。

所以，可以将三种状态组合为一个图片（如下所示），这样，全部三个状态会同时加载，只要通过CSS的“背景—位置”属性来移动背景图片就可以选择所需要的状态。

参考之前为水平菜单创建的样式，为每个链接指定了宽度，因此各个状态的标签图片需要相同宽度。当图片被置于链接背景之中，只会显示能符合定义好的元素宽度和高度的那部分图片，余下部分保持隐藏状态。下面上代码：

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="fixed-tabs.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 [fixed-tabs.html] 
	Created by [Serein_Chan]
	Email: [Serein_Chan@foxmail.com]
	Author Blog:[http://blog.youkuaiyun.com/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;
}
#nav a {
  float: left;
  width: 127px;	/*设置每个导航项的宽度*/
  color: #FFF;
  text-decoration: none;	/*定义标准的文本，链接文本没有下划线*/
  line-height: 2.5;
  text-align: center;	/* 文字位于每个列表项的中间*/
  border-right: 1px solid #FFF;	 /*只设置右边框*/
  background: url(tab.gif) no-repeat; /* 添加粘合了三个状态的背景图片， */
}
#nav #nav_con a {
  border: none;
}
#nav a:hover {
  background-color: #4F4532;	/*伪类hover设置停留时的背景颜色改变，并与平移后的图片颜色相同*/
  background-position: -127px 0;	/* -127，表示背景图片向左平移127px，实现状态的改变*/
}


/*将导航的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-color: #BEB06F;	/*这个背景颜色跟当前访问的标签图片的颜色相同*/
  color: #1A1303;	/*字体颜色接近黑色*/
  font-weight: bold;	/*字体加粗*/
    background-position: -254px 0;	/*表示背景图片向左平移254px，实现状态的改变*/
}

3、效果图

参考：《The Art & Science of CSS》