如何实现图中的导航效果
时间：2010-06-03
来源：互联网
样式代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>小蜜蜂阅读网</title> <link href="images/default.css" rel="stylesheet" type="text/css" /> <style type="text/css"> /*全局样式*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,button,textarea,p,table,th,td{margin:0;padding:0;} html,body{background:#fff;color:#000;font:400 12px/20px Tahoma, sans-serif;} caption,em,strong,th{font-style:normal;font-weight:inherit;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400;} label,select,input,img,select{vertical-align:middle;} table{border-collapse:collapse;} q:before,q:after{content:'';} caption,th{text-align:left;} fieldset,img{border:none;} li{list-style-type:none;} /*字体设置*/ .fb{font-weight:700;} .f12px{font-size:12px;} .f14px{font-size:14px;} /*其它设置*/ .left,.right{display:inline;} .left{float:left;} .right{float:right;} .clear{clear:both;} .block{display:block;} .hidden,.none{display:none;} .blank10{clear:both;display:block;font-size:1px;height:10px;overflow:hidden;} /*链接样式*/ a{text-decoration:none;} a:visited,a:hover,a:active{outline:none;} a:hover{cursor:pointer;text-decoration:underline;} a:link,a:visited,a:hover,a:active{color:#000;} #menu { margin:10px auto; width:500px; overflow:hidden;} #menu li{ float:left;height:27px; line-height:27px; text-align:center;position:relative; } .current{ background:transparent url(2.gif) no-repeat 0 0;position:absolute; left:0; top:0; width:93px;text-indent:2em;} .subnav a{ background:transparent url(1.gif) no-repeat 0 0; width:75px;display:block;} .subnav a:hover{background:transparent url(2.gif) no-repeat 0 0;position:absolute; right:0; top:0; width:93px; z-index:10; text-indent:2em;} #menu { margin:10px auto; width:500px; overflow:hidden;} #menu li{ float:left;height:27px; line-height:27px; text-align:center;position:relative; } .current{ background:transparent url(http://bbs.blueidea.com/attachment.php?aid=145282&k=cbe15677310cf3480e6a06c75492fc4e&t=1275541876&noupdate=yes¬humb=yes) no-repeat 0 0;position:absolute; left:0; top:0; width:93px;text-indent:2em;} .subnav a{ background:transparent url(http://bbs.blueidea.com/attachment.php?aid=145281&k=6617daa5908da137e16359b89bbcde2b&t=1275541876&noupdate=yes¬humb=yes) no-repeat 0 0; width:75px;display:block;} .subnav a:hover{background:transparent url(http://bbs.blueidea.com/attachment.php?aid=145282&k=cbe15677310cf3480e6a06c75492fc4e&t=1275541876&noupdate=yes¬humb=yes) no-repeat 0 0;position:absolute; right:0; top:0; width:93px; z-index:10; text-indent:2em;} </style> </head> <body> <div id="menu"> <ul> <li class="current"><a href="#">首页</a></li> <li class="subnav"><a href="#">栏目1</a></li> <li class="subnav"><a href="#">栏目2</a></li> <li class="subnav"><a href="#">栏目3</a></li> <li class="subnav"><a href="#">栏目4</a></li> <li class="subnav"><a href="#">栏目5</a></li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行
IE6/7/8,Chrome都正常,就是firefox3.6鼠标移到后面的栏目上会隐藏前面一个,哪位帮忙解决一下?上面的只是测试,图片名很乱,请勿介意.提示：您可以先修改部分代码再运行
鼠标移到栏目上显示成首页的样式.
[ 本帖最后由 longjianghu 于 2010-6-3 13:13 编辑 ]
作者: longjianghu 发布时间: 2010-06-03
从你切的图来看，用绝对定位应该好做一点
把HTML代代码也发上来吧
把HTML代代码也发上来吧
作者: zhaoyan860222 发布时间: 2010-06-03
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <style type="text/css"> *{margin:0;padding:0;} .navigation{background:yellow;list-style:none outside none;width:600px;margin:55px auto;overflow:hidden;font-size:13px;} .navigation li{float:left;width:75px;height:27px;line-height:27px;text-align:center;} .navigation li.list{width:93px;} .navigation li.list a{background:url(2.gif) no-repeat;} .navigation li a{display:block;background:url(1.gif) no-repeat;height:27px;color:#000;text-decoration:none;} .navigation li a:hover{color:#666;font-weight:bold} </style> </head> <body> <ul class="navigation"> <li class="list"><a href="">首页</a></li> <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> </ul> </body> </html>
提示：您可以先修改部分代码再运行
提示：您可以先修改部分代码再运行
附件
1.gif (397 Bytes)
2010-6-3 12:59
2.gif (459 Bytes)
2010-6-3 12:59
作者: rao3324180 发布时间: 2010-06-03
为啥图片显示不了?
作者: longjianghu 发布时间: 2010-06-03
鼠标移到后面的栏目显示的背景图要和首页一样,你这个只是实现了这个样式
作者: longjianghu 发布时间: 2010-06-03
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ font-size:12px; } ul{ list-style:none} li{ float:left; line-height:27px; font-weight:bold;} li a{ width:75px; height:27px;background:url(http://bbs.blueidea.com/attachment.php?aid=145281&k=ff45e320f6552d6dfb9bfc889ab1d2a7&t=1275546002&noupdate=yes) no-repeat; display:block; text-decoration:none; text-indent:22px;} li a:hover{width:93px; height:27px; background:url(http://bbs.blueidea.com/attachment.php?aid=145282&k=82088796d035c522ffbffe0a3a976deb&t=1275546002&noupdate=yes) no-repeat; color:#c00;text-indent:40px; position:relative; margin-left:-18px} </style> </head> <body> <ul> <li><a href="#">首页</a></li> <li><a href="#">栏目一</a></li> <li><a href="#">栏目二</a></li> <li><a href="#">栏目三</a></li> <li><a href="#">栏目四</a></li> <li><a href="#">栏目五</a></li> <li><a href="#">栏目六</a></li> </ul> </body> </html>
提示：您可以先修改部分代码再运行
提示：您可以先修改部分代码再运行
作者: zengyicheng 发布时间: 2010-06-03
效果图：
代码：
1.gif为75宽的那个
2.gif为93宽的那个
<style>
ul,li{ margin:0; padding:0}
li{ list-style:none; float:left; margin-left:-18px; text-align:center; width: 93px; height:27px; line-height:27px;background:url(1.gif) right top no-repeat;}
li.current{ background:url(2.gif) no-repeat;}
li a:hover{background:url(2.gif) no-repeat; display:block;}
li.first{ background:url(2.gif) no-repeat; margin:0}
</style>
<ul>
<li class="first"><a href="#">首页</a></li>
<li><a href="#">栏目1</a></li>
<li><a href="#">栏目2</a></li>
<li class="current"><a href="#">栏目3</a></li>
<li><a href="#">栏目4</a></li>
<li><a href="#">栏目5</a></li>
</ul>
代码：
1.gif为75宽的那个
2.gif为93宽的那个
<style>
ul,li{ margin:0; padding:0}
li{ list-style:none; float:left; margin-left:-18px; text-align:center; width: 93px; height:27px; line-height:27px;background:url(1.gif) right top no-repeat;}
li.current{ background:url(2.gif) no-repeat;}
li a:hover{background:url(2.gif) no-repeat; display:block;}
li.first{ background:url(2.gif) no-repeat; margin:0}
</style>
<ul>
<li class="first"><a href="#">首页</a></li>
<li><a href="#">栏目1</a></li>
<li><a href="#">栏目2</a></li>
<li class="current"><a href="#">栏目3</a></li>
<li><a href="#">栏目4</a></li>
<li><a href="#">栏目5</a></li>
</ul>
作者: ruobilin 发布时间: 2010-06-03
你这个效果不错,但是没有明白原理能不能讲解一下?
作者: longjianghu 发布时间: 2010-06-03
谷歌浏览器不行
作者: longjianghu 发布时间: 2010-06-03
引用:
原帖由 longjianghu 于 2010-6-3 13:18 发表鼠标移到后面的栏目显示的背景图要和首页一样,你这个只是实现了这个样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <style type="text/css"> *{margin:0;padding:0;} .navigation{background:yellow;list-style:none outside none;width:600px;margin:55px auto;overflow:hidden;font-size:13px;} .navigation li{float:left;height:27px;line-height:27px;text-align:center;} .navigation li.list{width:93px;} .navigation li.list a{background:url(2.gif) no-repeat;width:93px;} .navigation li a{display:block;background:url(1.gif) no-repeat;height:27px;color:#000;text-decoration:none;width:75px;} .navigation li a:hover{color:#666;font-weight:bold;background:url(2.gif) no-repeat;width:93px;} </style> </head> <body> <ul class="navigation"> <li class="list"><a href="">首页</a></li> <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> </ul> </body> </html>
提示：您可以先修改部分代码再运行
提示：您可以先修改部分代码再运行
作者: rao3324180 发布时间: 2010-06-03
改成这样就行了：
ul,li{ margin:0; padding:0}
li{ list-style:none; float:left; margin-left:-18px; text-align:center;}
li.current{ background:url(2.gif) no-repeat;}
li a{background:url(1.gif) right top no-repeat; width: 93px; height:27px; line-height:27px; display:block}
li a:hover{background:url(2.gif) no-repeat;}
li.first{ background:url(2.gif) no-repeat; margin:0}
关键就在这里margin-left:-18px;
ul,li{ margin:0; padding:0}
li{ list-style:none; float:left; margin-left:-18px; text-align:center;}
li.current{ background:url(2.gif) no-repeat;}
li a{background:url(1.gif) right top no-repeat; width: 93px; height:27px; line-height:27px; display:block}
li a:hover{background:url(2.gif) no-repeat;}
li.first{ background:url(2.gif) no-repeat; margin:0}
关键就在这里margin-left:-18px;
作者: ruobilin 发布时间: 2010-06-03
谢谢!
作者: longjianghu 发布时间: 2010-06-04
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
