首 页
|
精品电影
|
音乐天堂
|
在线游戏
|
Flash MTV
|
三湘书屋
|
幽默笑话
|
三湘图库
|
美女写真
|
IT知识库
|
QQ贴图
|
加入书签
｜
网页制作
｜
网络编程
｜
图形图象
｜
操作系统
｜
冲浪宝典
｜
软件教学
｜
网络安全
｜
认证考试
｜
通信技术
｜
电子商务
｜
业内动态
｜
书籍教程
｜
原码
｜
最近更新
文章分类
多媒体类
精品软件
本站搜索：
文章资迅
软件下载
小 游 戏
FLASH
幽默笑话
您的位置：
三湘时空
->
IT知识库
->
文章分类
->
CSS教程
-> 用CSS实现的一张图完成的导航条
用CSS实现的一张图完成的导航条
文章类别：
CSS教程
来源： 作者： 发表日期：2006-9-29 字体：[
大
中
小
]
小游戏
|
在线影院
|
幽默笑话
|
源码下载
|
Flash MTV
|
音乐试听
|
书屋
|
美女写真
<!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=gb2312" /> <title><a href="http://homepage.yesky.com/" class="bluekey" target="_blank">网页</a>特效代码|http://homepage.yesky.com/|---用<a href="http://www.sxsky.net/article.asp?typeid=38">CSS</a>实现的一张图完成的导航条</title> <style> ul,li{ list-style:none; float:left;} body{ font-size:12px; line-height:1.6; font-family:Verdana, "宋体", Arial; text-align:center;} #info li{ margin-left:4px; margin-top:15px;} #info a {display:block;text-align:center; padding-left:15px; padding-top:2px;padding-bottom:1px;background-image: url(http://www.jscode.cn/Uploadfile/200682494749491.GIF); background-repeat: no-repeat;color: #000; width:47px; cursor:hand; text-decoration: none;} #job a:link,#job a:visited{background-position: -62px 0px;} #eve a:link,#eve a:visited{background-position: -124px 0px;} #oth a:link,#oth a:visited{background-position: -186px 0px;} #car a:hover ,#car a:active {background-position: 0px -22px; color:#fff;} #job a:hover ,#car a:active {background-position: -62px -22px; color:#fff;} #eve a:hover ,#car a:active {background-position: -124px -22px; color:#fff;} #oth a:hover ,#car a:active {background-position: -186px -22px; color:#fff;} </style> </head> <body> <div id="info"> <ul> <li id="car"><a href="http://homepage.yesky.com/" target="_blank"><span> 游 戏</span></a></li> <li id="job"><a href="http://homepage.yesky.com/" target="_blank"><span> 娱 乐</span></a></li> <li id="eve"><a href="http://homepage.yesky.com/" target="_blank"><span> 菜 单</span></a></li> <li id="oth"><a href="http://homepage.yesky.com/" target="_blank"><span> 好 玩</span></a></li> </ul> </div> <div style="clear:both">转载请注明出处 子鼠 http://www.zishu.cn 作者：子鼠</div> </body> </html></FONT></td></tr></table> <table width="100%" border="0"> <tr> <td height="40"><a href="200692927403.htm"><FONT color=#0000ff><b>上一篇:</b></FONT>CSS制作的阴影链接文字</a></td> <td align="right"><a href="200692927405.htm"><FONT color=#0000ff><b>下一篇:</b></FONT>用Photoshop打造永恒回忆</a></td> </tr> </table> </div> </td> </tr> </table> </TD> </TR> </TBODY> </TABLE> <TABLE style="BORDER-TOP-WIDTH: 1px; BORDER-RIGHT: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width=773 align=center border=0> <TBODY> <TR> <TD width="50%" align="center" valign="top"> <TABLE width=99% height=24 border=0 align="center" cellPadding=0 cellSpacing=0> <TBODY><TR bgColor=#669900><TD colSpan=3 height=2><IMG height=2 src=/image/soft.htm width=5></TD></TR><TR><TD width=10 background=/image/table_bgline.gif></TD> <TD background=/image/table_bgline.gif><IMG height=20 src=/image/dot1.gif width=9 align=absMiddle> 本栏目热门文章</TD> <TD width=20><IMG height=22 src=/image/table_right.gif width=20></TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=1 width=95% border=0><TBODY><TR><TD>·<a href="../html/200652826171.htm">CSS+DIV设计实例：实现让多个DIV排列时居中</a> 2006-5-28<br>·<a href="../html/200652826172.htm">CSS+DIV设计实例：纯CSS制作下拉导航菜单</a> 2006-5-28<br>·<a href="../html/200652826155.htm">引入CSS样式的五种方式</a> 2006-5-28<br>·<a href="../html/20064525048.htm">超强，用CSS构建iframe效果</a> 2006-4-5<br>·<a href="../html/200651826024.htm">避免表格table被撑开变形的CSS</a> 2006-5-18<br>·<a href="../html/200631824889.htm">SPAN和DIV的区别</a> 2006-3-18<br>·<a href="../html/2005121321686.htm">css学习的一些心得</a> 2005-12-13<br>·<a href="../html/20051043417.htm">CSS实用教程（一）</a> 2005-10-4<br>·<a href="../html/20051044123.htm">利用CSS，不通过replace替换标引HTML标记</a> 2005-10-4<br>·<a href="../html/20051044337.htm">拒绝单调 让网页超链接拥有多姿多彩的下划线</a> 2005-10-4<br></TD></TR></TBODY></TABLE> </TD> <TD width="50%" align="center" valign="top"> <TABLE width=99% height=24 border=0 align="center" cellPadding=0 cellSpacing=0> <TBODY><TR bgColor=#669900><TD colSpan=3 height=2><IMG height=2 src=/image/soft.htm width=5></TD></TR><TR><TD width=10 background=/image/table_bgline.gif></TD> <TD background=/image/table_bgline.gif><IMG height=20 src=/image/dot1.gif width=9 align=absMiddle> 新近更新文章</TD> <TD width=20><IMG height=22 src=/image/table_right.gif width=20></TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=1 width=95% border=0><TBODY><TR><TD>·<a href="../html/200692927404.htm">用CSS实现的一张图完成的导航条</a> 2006-9-29<br>·<a href="../html/200692927403.htm">CSS制作的阴影链接文字</a> 2006-9-29<br>·<a href="../html/200692927402.htm">CSS仿淘宝首页导航条按钮布局效果</a> 2006-9-29<br>·<a href="../html/200692927382.htm">你知道这些css网页设计技巧吗</a> 2006-9-29<br>·<a href="../html/20069827131.htm">用CSS层叠样式表实现文字变图象特效</a> 2006-9-8<br>·<a href="../html/20069827130.htm">用CSS层叠样式表完成可以控制的闪烁效果</a> 2006-9-8<br>·<a href="../html/20069827129.htm">如何用CSS层叠样式表控制鼠标显示的样式</a> 2006-9-8<br>·<a href="../html/20069827128.htm">如何用CSS来控制网页字体的显示样式</a> 2006-9-8<br>·<a href="../html/20069827109.htm">常用CSS</a> 2006-9-8<br>·<a href="../html/20069827086.htm">expression将JS、Css结合起来</a> 2006-9-8<br></TD></TR></TBODY></TABLE> </TD> </TR> </TBODY> </TABLE> <TABLE style="BORDER-TOP-WIDTH: 1px; BORDER-RIGHT: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width=773 align=center border=0> <TBODY><TR> <TD align="center"><script src=/ad/incopyad0.js ></script> </TD> </TR></TBODY></TABLE><span id="span_top760"><script src=/ad/top7601.js></script></span><script type="text/javascript">top760.innerHTML=span_top760.innerHTML; span_top760.innerHTML=""; </script> <TABLE style='BORDER-COLLAPSE: collapse' cellSpacing=0 cellPadding=0 width=773 align=center border=0> <TBODY> <TR bgColor=#96bd15> <TD style="BORDER-RIGHT: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" vAlign=center align=middle bgColor=#96bd15 height=23> <a href="/index.htm">首 页</a> | <a href="/help/rjfb.htm">软件发布</a> | <a href="/help/gg.htm">广告联系</a> | <a href="/help/help.htm">下载帮助</a> | <a href="/map/index1.htm">意见反馈</a> | <a href="/map/index.htm">网站地图</a></TD> </TR> <TR align=right background="../images/bot.jpg"> <TD vAlign=top background=../image/bot.gif height=44> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD align=middle> </TD> <TD align=middle width=773> CopyRight? 2002-2004 WWW.SXSKY.<font color="#FF0000">NET</font>? All Rights Reserved<br> 三湘时空 站长QQ：<font color="#FF0000">82675303</font> Email:<img src=../image/mail.gif><iframe frameborder=0 src=http://www.sxsky.net/it/updatehits.asp?id=27404 width=0 height=0 scrolling=no></iframe></TD> </TR></TBODY></TABLE></TD></TR></TBODY></TABLE> </BODY></HTML><script src=/ad/pop.js></script>
您的位置：三湘时空 -> IT知识库 -> 文章分类 -> CSS教程
-> 用CSS实现的一张图完成的导航条