用CSS制作导航条方法

合集下载

CSS基本知识及导航条制作实例

四种样式的优先级
行内方式内嵌方式链接方式导入方式低高
CSS选择器
1
2
3
标签选择器
ID 选择器
类选择器
标签选择器
<p id="one">此处为p 标签内的文字 </p>
1 2 3 4 5 p{ font-size:12px; background:#900; color:090; }
<center> </center>
地址区域
向中间对齐
<pre> </pre> <br>
预设文字格式回车
<blockquote> </blockquote>
区块引用
html链接标签
<a> </a>
html图像标签
<img> </img>
<map> </map>
<area> <area>
html列表标签
11 </style> 12 </head> 13 <body> 14 <div id="div1"><img src="/index/image s/ico/2days.gif" /></div> 15 全国的CSS 爱好者汇聚于此，如果不来，你就 OUT 喽~我们的口号是： 16 “分享自己的欢乐与痛苦，分享自己的经验与心得，分享自己的资料与资源” 17 如果您也愿意，就加入我们吧~ 18 </body> 19 </html>

CSS实现导航条Tab切换的三种方法

CSS实现导航条Tab切换的三种方法前面的话导航条Tab在页面中非常常见，本文说详细介绍CSS实现导航条Tab的三种方法布局buju根据上图所示，先规定几个定义，上图的模块整体叫做导航，由导航标题和导航内容组成。

要实现上图所示的布局效果，有两种布局方法：语义布局和视觉布局【语义布局】从语义布局的角度来看，每一个导航标题和其对应的导航内容应该是一个整体<style>body,p{margin: 0;}h2{margin: 0;font-size:100%;}ul{margin: 0;padding: 0;list-style: none;}a{text-decoration: none;color:inherit;}.box{width: 572px;border: 1px solid #999;overflow: hidden;}.nav{margin-left: -1px;font: 14px "微软雅黑";overflow: hidden;background-color: #f1f1f1;}.navI{float: left;width: 33.333%;box-sizing: border-box;}.navI-tit{line-height: 40px;text-align: center;cursor: pointer;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;}.navI-txt{width: 572px;height:200px;text-indent:2em;line-height: 2;background:#fff;}.ml1{margin-left: -100%;}.ml2{margin-left: -200%;}.navI_active{position:relative;z-index:1;}</style><div class="box"><ul class="nav"><li class="navI navI_active"><h2 class="navI-tit">课程</h2><p class="navI-txt">课程内容</p></li><li class="navI"><h2 class="navI-tit">学习计划</h2><p class="navI-txt ml1">学习计划内容</p></li><li class="navI"><h2 class="navI-tit">技能图谱</h2><p class="navI-txt ml2">技能图谱内容</p></li></div>【视觉布局】从视觉布局的角度来看，所有导航标题为一组，所有导航内容为一组<style>body,p{margin: 0;}ul{margin: 0;padding: 0;list-style: none;}a{text-decoration: none;color: inherit;}.box{width:572px;border:1px solid #999;font:14px "微软雅黑";overflow:hidden;}.nav-tit{margin-left: -1px;height: 40px;line-height: 40px;text-align: center;background-color: #f1f1f1;overflow: hidden;}.nav-titI{box-sizing: border-box;float: left;width: 33.333%;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;cursor: pointer;}.nav-txt{height: 200px;text-indent: 2em; line-height: 2;}.nav-txtI{height: 200px;}</style><div class="box"><nav class="nav-tit"><a class="nav-titI">课程</a><a class="nav-titI">学习计划</a><a class="nav-titI">技能图谱</a></nav><ul class="nav-txt"><li class="nav-txtI nav-txtI_active">课程内容</li><li class="nav-txtI">学习计划内容</li><li class="nav-txtI">技能图谱内容</li></ul></div>hover导航条的功能就是点击导航标题时，显示对应的导航内容。

导航条设置代码css+div

导航条设置代码css+div以下文字内容可以一同复制使用，不会影响到使用效果哦！/* 导航条背景色*/.skin-box-bd .menu-list{background: none repeat scroll 0 0 #570033;}/*首页/店铺动态背景色*/.skin-box-bd .menu-list .link{background: none repeat scroll 0 0 #570033;}/*首页/店铺动态右边线*/.skin-box-bd .menu-list .menu{border-right:1px #570033 solid;}/*首页/店铺动态文字颜色*/.skin-box-bd .menu-list .menu .title{color:#570033}/*所有分类背景色*/.all-cats .link{background: none repeat scroll 0 0 #570033;}/*所有分类右边线*/.all-cats .link{border-right:1px #570033 solid;}/*所有分类文字颜色*/.skin-box-bd .all-cats .title{color:#ff0000}<a target="_blank" href="/getcid.aw?v=2&uid=791205223%40qq.co m&site=cntaobao&s=1&groupid=0&charset=utf-8"><img border="0" src="/online.aw?v=2&uid=791205223% &site=cntaobao&s=1&charset=utf-8" alt="点击这里给我发消息" /></a>。

CSS导航栏创建操作步骤

垂直导航栏1. 创建名为navmenu.css的样式表文件2. 创建名为nav.html的HTML文件3. 在名为nav.html的HTML文件中通过属性→样式→附加样式表,导入名为navmenu.css的样式表文件4. 创建新样式如下:在选择器类型中选择:高级;在名称栏中输入:#navmenu定位设置:position: absolute;width: 150px;left: 25px;top: 50px;5. 创建列表和<div>标签在名为nav.html的HTML文件中,插入<div>标签和项目列表,并作相关的链接如下:<div id="navmenu"><ul ><li><a href="#">首页</a></li><li><a href="#">个人简历</a></li><li><a href="#">我的能力</a></li><li><a href="#">联系我</a></li></ul></div>6. 创建导航栏样式/*为所有的列表项定义字体外形和大小，删除标准项目符号，并清除列表中的空白和填充*/#navmenu ul {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 14px;font-weight: bold;margin: 0px;padding: 0px;border: 1px solid #990000;list-style-type: none;}/*保证所出现底部的空白用于分隔每个列表项，两项之间为2px*/#navmenu li {margin-bottom: 2px;}/*将链接的激活区域扩展到一个块并添加背景图像、宽度和边框*/#navmenu a {background-image: url(images/listnav_out.jpg);display: block;width: 140px;padding-top: 2px;padding-right: 2px;padding-bottom: 2px;padding-left: 5px;border: 1px solid #cc9900;}/*当按钮处于标准或已按状态时定义其文本外观，制定一种特别的颜色并清除连接的下划线,此项定义在标签#navmenu 中正常链接、已访问链接的样式*/#navmenu a:link,#navmenu a:visited {color: #993300;text-decoration: none;}/*在跳转状态中交换图像并改变文本颜色*/#navmenu a:hover {color: #ffffff;background-image: url(images/listnav_over.jpg);border: 1px dotted #990000;}/*设定所选按钮的外观和感觉，在导航栏中指示当前页面*/#selnavmenu a:link,sel#navmenu a:visited,#selnavmenu a:hover {color: #ffffff;background-image: url(images/listnav_over.jpg);border: 1px dotted #990000;}水平导航步骤一:创建名为:menunav.html文件，创建一个项目列表（文本→列表→项目列表<ul><li><a href="#">学生信息</a></li><li><a href="#">学费信息</a></li><li><a href="#">报到信息</a></li><li><a href="#">就业信息</a></li></ul>效果如下：•学生信息•学费信息•报到信息•就业信息步骤二:隐藏li的默认样式定义CSS如下:<style type="text/css"><!--/*表示定义的样式将作用在menunav的层里的ul标签上。

DIV+CSS仿京东商城导航条代码

background-repeat:no-repeat;
line-height:26px;
font-weight:normal;
color:#333333;
position:relative;
}
.my_left_category a{
font:12px;
text-decoration:none;
color:#333333;
<h3><a href="#" style="color:#ff3333;">热销推荐</a></h3>
<div class="h3_cat">
<div class="shadow">
<div class="shadow_border">
<ul>
<li><a href="#">LOGO设计</a></li>
background-repeat:no-repeat;
line-height:26px;
font-weight:normal;
color:#333333;
position:relative;
}
.my_left_category .h2_cat_1{
width:148px;
height:26px;
background-image:url(/upload/360buy/my_menubg_1.gif);
<li><a href="#">下载排行</a></li>

使用CSS制作导航菜单

使⽤CSS制作导航菜单⽅式⼀：直接编写代码实现代码如下：<html><head><title>⽆需表格的菜单</title><style></style></head><body><div id="navigation"><ul><li><a href="#">Home</a></li><li><a href="#">News</a></li><li><a href="#">Sports</a></li><li><a href="#">Weather</a></li><li><a href="#">Contact Me</a></li></ul></div></body></body></html>效果如下：⽅式⼆：使⽤jQuery 代码实现代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>伸缩的菜单，⽤toggle()重写</title><style></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function(){$("li").find("ul").prev().click(function(){$(this).next().toggle();});$("li:has(ul)").find("ul").hide();});</script></head><body><div id="navigation"><ul id="listUL"><li><a href="#">Home</a></li><li><a href="#">News</a><ul><li><a href="#">Lastest News</a></li><li><a href="#">All News</a></li></ul></li><li><a href="#">Sports</a><ul><li><a href="#">Basketball</a></li><li><a href="#">Football</a></li><li><a href="#">Volleyball</a></li></ul></li><li><a href="#">Weather</a><ul><li><a href="#">Today's Weather</a></li><li><a href="#">Forecast</a></li></ul></li><li><a href="#">Contact Me</a></li></ul></div></body></html>注意：该代码必须加载了jquery.min.js ⽂件，并且所写的CSS 只能在Firefox 浏览器中正常显⽰。

CSSDesign之导航条制作

一、滑动门技术制作导航菜单（一）咱们在那个例子中主若是利用滑动门制作一个能够无穷拉伸的导航菜单，在制作前咱们第一要预备两张图片，如下：图一：图二：这两张图别离应用在：图一应用在head中，也确实是整个导航菜单背景图，图二要紧应用在链接中的背景，别离制作出当前页，翻转等成效图。

此刻咱们来看看其第一种制作方式：方式一：先看菜单背景部份HTML标记：先看外部结构，咱们在#header中应用了两个块：#bg_right ，#bg_center；其要紧的作用是操纵导航背景图，咱们别离在#header块中放置左侧圆角，#bg_center放置间变背景，#bg_right 放置右边圆角。

此刻咱们先应用滑动和Sprites技术来制作出导航背景成效，为后面的菜单链接打下相关基础：先给body，header，bg_right应用样式：此刻咱们能看出一点背景成效：上图是在IE中的成效图，此刻咱们做好两边的成效，只要加上中间bg_center背景上去就完成了导航背景的制作成效：那个地址存在一个关键性的动作，什么缘故在应用了中间背景，圆角成效怎么没有了，那是因为咱们的中间北景图把两边圆角成效遮掉了，此刻咱们给它应用一点边距让它显示出来：此刻导航背景成效的两个圆角又回了，大伙儿会问那个地址什么缘故应用30px不是别的值呢这就跟大伙儿的切图很有关系了，因为我为切图的的宽度是30px,因此大伙儿万万记住了。

制作完导航背景成效，此刻咱们来制作导航菜单的链接项，那么咱们在链接中又要如嵌套HTML 标记呢别慌，咱们先来看其标记：咱们在那个地址只显示了部份标记，从标记中，咱们不能看出咱们应用了一个#menu块包裹了链接项，别离在列表项中嵌套链接，在链接中就别离应用了三个span：menubg_left menubg_center menubg_right ；其起的作用是menubg_left放置左图，menubg_center 放置中间间变图menubg_right放置右图。

CSS网页导航栏设计指南

CSS网页导航栏设计指南导言在网页设计中，导航栏是一个重要的部分，它提供了用户在网页中进行导航的功能。

良好设计的导航栏能够提升用户体验，帮助用户快速找到所需内容。

本文将为你提供CSS网页导航栏设计的指南，帮助你创建出美观实用的导航栏。

一、选择合适的导航栏样式1. 固定导航栏固定导航栏将导航栏固定在网页顶部或侧边，保持导航栏的可见性。

这种样式适用于长页面和需要用户频繁导航的情况。

2. 悬浮导航栏悬浮导航栏在网页滚动时保持在页面顶部，但不固定在屏幕上方。

这种样式可以在用户阅读页面时提供便捷的导航。

3. 下拉导航栏下拉导航栏将子导航项目隐藏在主导航项下方，当用户将鼠标悬停在主导航项上时展开子导航项目。

这种样式适用于网站拥有大量页面或者子页面。

4. 响应式导航栏响应式导航栏会根据设备的屏幕大小自动调整布局，以适应不同的屏幕分辨率。

这种样式能够提供更好的移动设备上的导航体验。

二、设计导航栏的布局1. 导航栏的位置导航栏通常位于网页的顶部或侧边。

将导航栏放置在显眼的位置，可以帮助用户快速找到导航入口。

2. 导航栏的宽度导航栏的宽度可以根据网页布局的需要进行调整。

在固定导航栏中，宽度充满整个屏幕；在悬浮导航栏中，宽度与内容区域相同。

3. 导航栏的高度导航栏的高度应当适中，不要过小导致文字拥挤，也不要过大影响页面的可视区域。

4. 导航栏的背景颜色和样式选择适合网页整体风格的导航栏背景颜色和样式。

可以使用纯色背景、渐变背景或图片背景等。

三、导航栏文字和图标设计1. 导航栏链接文字导航栏的链接文字应当简洁明了，与用户常用词汇相符，并且要易于点击。

可以使用CSS样式修改链接的颜色、字体和下划线。

2. 导航栏图标图标可以用来增加导航栏的可视吸引力，并帮助用户更好地理解导航项的含义。

在选择图标时，考虑与网页整体风格的一致性，并确保图标清晰可辨认。

四、导航交互设计1. 悬停效果为导航栏的链接添加悬停效果，比如改变背景颜色或添加下划线，可以提升用户交互的可感知性。

导航条制作

头部导航条标签化方法制作第一种显示方式（简单导航条）：结合CSS控制，可以实现如下效果：HTML代码：$metnavtopcss代码：.nav{ width:100%; height:30px; background:url(../navblue.gif) repeat-x 0px 0px;}.nav1{height:30px; width:1000px; margin:0 auto; display: block;overflow:hidden; color:#FFFFFF; text-align:left;line-height:30px; font-size:13px;}.nav1 a{ color:#FFFFFF; padding:0px 21px 0px 21px;}.nav1 a:hover{ color:#003366; background-color:#ffffff;}第二种显示方式（带切换特效）：结合CSS控制，可以实现如下效果：HTML代码：$metnavtopcss代码：.nav{ position:absolute; right:0px; bottom:0px; width:100%;height:25px; }.nav li{ list-style:none; float:left;}.nav .navdown{ width:99px; text-align:center; float:left;background-image:url(../nav2.gif);height:25px; border-left:1px solid #FFFFFF;line-height:25px; color:#003399; font-weight:bold;}.nav .navdown a{color:#003399;}.nav .navup{ width:99px; text-align:center; float:left;background-image:url(../nav1.gif);height:25px; border-left:1px solid #FFFFFF;line-height:25px; color:#FFFFFF; font-weight:bold;}.nav .navup a{color:#FFFFFF;}第三种显示方式（纵向显示二级导航）：结合CSS控制，可以实现如下效果：HTML代码：$mettopnavcss代码：.nav1{float:left; width:75px; height:35px; text-align:center; position:relative; padding-left:2px;background:url(../menu_line.gif) no-repeat left top; }.nav1 a{display:block; color:#FFFFFF; font-weight:bold;padding-right:2px; }.nav1 a:hover{ background:url(../lia_bg.gif) repeat-x; color:#FFFFFF;} .nav2{position:absolute; top:34px; left:0px; *left:-14px; }*+html .nav2{top:30px;}.nav2 li{list-style-type:none; width:120px; height:25px;border-bottom:1px solid #FFFFFF;}*+html .nav2 li{margin-bottom:-9px;}.nav2 li a{background:#045aa7; color:#FFFFFF; height:25px;border-top:none; line-height:25px; font-weight:normal;}.nav2 li a:hover{font-weight:bold; background:#045aa7;border-top:none;}a.navdown{background:url(../lia_bg.gif) repeat-x 0px 0px;}第四种显示方式（横向显示二级导航）：结合CSS控制，可以实现如下效果：HTML代码：$mettopnavcss代码：.nav{height:73px; background:url(../menu_bg.gif) repeat-x bottom left; position:relative; }.nav ul{overflow:hidden; margin-left:5px;}.nav ul li.navl{float:left; height:35px;}.nav ul li.navl a{float:left; display:block; padding-left:6px; height:35px;background:url(../menu_on_left.gif) no-repeat left top; cursor:pointer; text-decoration:none;}.nav ul li.navl a span{float:left; padding:11px 14px 10px 10px;line-height:14px;background:url(../menu_on_right.gif)no-repeat right top; font-size:14px; font-weight:bold;color:#FFFBF0;text-decoration:none; }li.navl a.navdown{background-position:left 100% !important; }li.navl a.navdown span{background-position:right 100% !important; color:#333333 !important; text-decoration:none!important; padding:14px 14px 7px10px !important;}ul.nav2{position:absolute !important; left:20px !important;bottom:8px !important; }ul.nav2 li{float:left !important; height:22px !important;}ul.nav2 li a span{float:left !important; display:block !important; padding:6px 10px 4px 10px !important;line-height:12px !important;background:url(../menu_on_right2.gif) no-repeat right top !important;} ul.nav2 li a span{font-weight:normal !important;color:#333333 !important; font-size:12px !important;}ul.nav2 li a{display:block !important; float:left !important;background:url(../menu_on_left2.gif) no-repeat lefttop !important;cursor:pointer !important;padding-left:3px !important;}ul.nav2 li a{padding-bottom:0px !important;padding-right:0px !important; padding-top:0px !important;height:22px !important;}ul.nav2 li a:hover{text-decoration:none !important;background:url(../menu_on_left2.gif) no-repeat leftbottom !important; }ul.nav2 li a:hover span{background:url(../menu_on_right2.gif) no-repeat right bottom !important; color:#FF6600 !important; }标准PHP代码方法制作以显示纵向二级栏目导航条制作为例：{$lang_home}//首页$val[name]返回顶部尾部导航条结合CSS控制，可以实现如下效果：HTML代码：{$metfootnav}css代码：.footnav{ width:1000px; height:20px; border-bottom:1px solid #8B0000; padding-top:10px; margin-top:3px; }返回顶部横向导航条（当前位置）结合CSS控制，可以实现如下效果：HTML代码：{$lang_home} > $nav_x[name]css代码：.nav_x{ width:100%; font-size:13px; height:30px; font-weight:bold;text-align:left;line-height:30px; background-color:#E9E9E9; color:#990000;border-bottom:1px solid #8B0000;}.nav_x a{color:#990000;}更换$nav_x[name]中的元素可以控制导航显示的内容，如$nav_x[2]只显示当前栏目。

一文讲解关于CSS导航栏

一文讲解关于CSS导航栏IT行业近十年来发展迅猛，衍生出许多新的职业，如UI设计师、开发工程师、软件测试工程师等，在众多新兴职业中，Web前端工程师就是其中之一。

在IT行业，Web前端真正得到重视大概也要六七年。

伴随着因特网的迅速发展，各种因特网项目不断涌现，对用户体验的要求也越来越高，前端开发逐渐成为互联网研发的重要角色。

CSS导航栏导航栏熟练使用导航栏，对于任何网站都非常重要。

使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。

导航栏=链接列表作为标准的HTML基础一个导航栏是必须的。

在我们的例子中我们将建立一个标准的HTML列表导航栏。

导航条基本上是一个链接列表，所以使用<ul>和<li>元素非常有意义：<ul><li><a href="#home">主页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系</a></li><li><a href="#about">关于</a></li></ul>现在，让我们从列表中删除边距和填充：ul { list-style-type: none; margin: 0; padding: 0;}例子解析：list-style-type:none-移除列表前小标志。

一个导航栏并不需要列表标记移除浏览器的默认设置将边距和填充设置为0上面的例子中的代码是垂直和水平导航栏使用的标准代码。

垂直导航栏上面的代码，我们只需要元素的样式，建立一个垂直的导航栏：a{ display:block; width:60px;}示例说明：display:block-显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度width:60px-块元素默认情况下是最大宽度。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

第一步：建立一个无序列表我们先建立一个无序列表，来建立菜单的结构。

代码是：<ul><li><a href="1">首页</a></li><li><a href="2">产品介绍</a></li><li><a href="3">服务介绍</a></li><li><a href="4">技术支持</a></li><li><a href="5">立刻购买</a></li><li><a href="6">联系我们</a></li></ul>第二步：隐藏li的默认样式因为看起来不是很好看，菜单通常都不需要li默认的圆点，我们给UL定义一个样式来消除这些圆点。

当然，为了更好的控制整个菜单，我们把菜单放在一个div里。

页面代码变成：<div class="test"> <ul><li><a href="1">首页</a></li><li><a href="2">产品介绍</a></li><li><a href="3">服务介绍</a></li><li><a href="4">技术支持</a></li><li><a href="5">立刻购买</a></li><li><a href="6">联系我们</a></li></ul> </div>CSS定义为：.test ul{list-style:none;}说明：“.test ul”表示我要定义的样式将作用在test的层里的ul标签上。

现在的效果是没有圆点了第三步：关键的浮动这里是菜单变成横向的关键，我们给li元素加上一个“float:left;”属性，让每个li浮动在前面一个li的左面。

CSS定义为：.test li{float:left;}看，菜单变横向了。

就这么简单！下面需要做的就是优化细节了。

第四步：调整宽度菜单都挤在一起不好看怎么办？我们来调节li的宽度。

在CSS中添加定义width:100px指定一个li的宽度是100px，当然你可以根据你的需要调整数值：.test li{float:left;width:100px;}如果我们同时定义外面div的宽度，li就会根据div的宽度自动换行，例如定义了div宽350px，6个li的总宽度是600px，一行排不下就自动变成两行：.test{width:350px;}第五步：设置基本链接效果接下来，我们通过CSS来设置链接的样式，分别定义:link、:visited、:hover 的状态.test a:link{color:#666;background:#CCC;text-decoration:none;}.test a:visited{color:#666;text-decoration:underline;}.test a:hover{color:#FFF;font-weight:bold;text-decoration:underline;background:#F00;}第六步：将链接以块级元素显示有朋友问，菜单链接的背景色为什么没有填满整个li的宽度？恩，解决的方法很简单，在a的样式定义中增加display:block，使链接以块级元素显示。

同时我们微调了如下细节：用text-align:center将菜单文字居中；用height:30px增加背景的高度；用margin-left:3px使每个菜单之间空3px距离；用line-height:30px;定义行高，使链接文字纵向居中；CSS定义象这样：.test a{display:block；text-align:center;height:30px;}.testli{float:left;width:100px;background:#CCC;margin-left:3px;line-height :30px;}这样就漂亮多了吧。

第七步：定义背景图片我们通常都会在每个链接前加一个小图标，这样导航更清楚。

CSS是采用定义li 的背景图片来实现的：.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}.test a:hover{color:#FFF;font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}说明：“background:url(arrow_off.gif) #CCC no-repeat 5px 12px;”这句代码是一个CSS缩写，表示背景图片是arrow_off.gif；背景颜色是#CCC；背景图片不重复"no-repeat"，背景图片的位置是左边距5px、上边距12px；默认状态下，图标为arrow.off.gif，当鼠标移动到链接上，图标变为arrow_on.gif现在css的完整代码是：.test ul{list-style:none;}.testli{float:left;width:100px;background:#CCC;margin-left:3px;line-height :30px;}.test a{display:block;text-align:center;height:30px;}.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}.test a:visited{color:#666;text-decoration:underline;}.test a:hover{color:#FFF;font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}页面的完整代码是：<div class="test"><ul><li><a href="1">首页</a></li><li><a href="2">产品介绍</a></li><li><a href="3">服务介绍</a></li><li><a href="4">技术支持</a></li><li><a href="5">立刻购买</a></li><li><a href="6">联系我们</a></li></ul></div>一款CSS制作的动态导航条代码<style>.channel { width:350px; margin:12px 0px 0px 175px; height:30px;line-height:30px; text-align:center; }.channel ul { list-style:none; margin:0px;}.channel li { float:left; padding-left:8px; }.channel a { background:url(/icon/arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; font-size:14px; font-weight:bold; } .channel a:link { background:url(/icon/arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; }.channel a:visited { background:url(/icon/arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; }.channel a:hover { background:url(/icon/arrow1.gif) no-repeat left; padding-left:10px; color:#78b4c7; }.channel a:active { background:url(/icon/arrow1.gif) no-repeat left; padding-left:10px; color:#78b4c7; }</style>。