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

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

iteye_4537

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

阅读量239

点赞数

文章标签： xhtml

本文介绍了一种使用单一图片实现垂直导航菜单的设计方案，通过CSS背景定位实现不同状态间的切换，并保持良好的加载性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前面提到的基本的水平导航（点击查看）的基础上，要求每个菜单项顶角是圆角。通过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 http-equiv=content-type content="text/html; charset=gb2312">  <link rel="stylesheet" href="fixed-tabs.css" type="text/css" media="screen" /> </head> <body id="body_his">   <ul id="nav">  <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、效果图