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

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

Serein

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

阅读量650

点赞数

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

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

版权

CSS设计专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这是一个标签宽度可变的圆角水平导航，参考前面的基于圆角图片的水平标签导航（点击查看），进行一些改变，使得导航中的列表项可以根据它们所包含文本的长度来调整大小。具体的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标记定义的字符集是支持中文的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 [variable-tabs.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%;
}

/*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 》

Serein

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导航--标签宽度可变的圆角水平导航

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

扫一扫

专栏目录