导航--标签宽度可变的圆角水平导航

最新推荐文章于 2021-06-07 14:34:33 发布

iteye_4537

最新推荐文章于 2021-06-07 14:34:33 发布

阅读量170

点赞数

文章标签： xhtml

这是一个标签宽度可变的圆角水平导航，参考前面的基于圆角图片的水平标签导航（点击查看），进行一些改变，使得导航中的列表项可以根据它们所包含文本的长度来调整大小。具体的CSS设置和实现细节在代码中有详细的注释，其中需要使用到的4个标签圆角图片如下：

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 [variable-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%; } /*ul导航块的设置，不需要设置宽度、和背景颜色 */ #nav { margin: 0; padding: 0; list-style-type: none; /*列表无样式*/ float: left; /* Contain floated list items */ } /*导航块菜单项的设置，不需要设置宽度 */ #nav li { margin: 0; padding: 0; float: left; margin: 0 1px 0 0; /*列表项右侧应用1px边距，实现视觉上让标签彼此分离 */ /*边距不为零，需要把显示属性display设置为inline，即内联元素，前后无换行，以纠正IE双边距错误 */ display: inline; /*应用背景颜色，用不透明的左圆角图片覆盖左上角，不指定位置，因为默认为“左上”或“0 0” */ background: #6F6146 url(images/tab_left.gif) no-repeat; } /*列表项内链接元素a的样式设置，不需要设置宽度 */ #nav a { float: left; /*浮动处理，链接自动转成一个inline-block，即行内块元素 */ padding: 0 15px; /*浮动处理后，要设置补白调整inline-block的位置，左右内距15px */ color: #FFF; /*文本颜色 */ text-decoration: none; /*定义标准的文本，链接文本没有下划线*/ line-height: 2.5; /*行高度*/ /*用右上圆角图片覆盖右上角，top和right指定了“右上”位置*/ background: url(images/tab_right.gif) no-repeat top right; } /*由于前面的"背景颜色"不是应用在链接元素上，而是应用在它的父元素列表项上 *所以，只能设置鼠标停留状态下只改变导航项的文字颜色*/ #nav a:hover { color: #F90; /*伪类hover设置鼠标停留时字体颜色改变*/ } /*设置“当前位置”状态， * 左上角图片设置在li里，右上角图片设置在a里 */ #body_hom #nav_hom, #body_map #nav_map, #body_jou #nav_jou, #body_his #nav_his, #body_ref #nav_ref, #body_con #nav_con { /*背景颜色和图片tab_left_active.gif颜色相同，图片不重复，位置默认左上角*/ background: #BEB06F url(images/tab_left_active.gif) no-repeat; } #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 { /*添加右上角激活背景图片，图片不重复，位置设置为top right(右上)对齐*/ background: url(images/tab_right_active.gif) no-repeat top right; color: #1A1303; /*加深文本颜色*/ }
3、效果图

参考：《The Art & Science of CSS 》