设为主页
收藏本站
当前位置 :
首页
->
网站设计
->
CSS/CSS2
->正文
用CSS实现的一张图完成的导航条
来源:
Linuxdby.com
作者:
Webmaster
时间:
2007-06-05
点击:
[
收藏
] [
投稿
]
<!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/|---用CSS实现的一张图完成的导航条</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">转载请注明出处 子鼠 <a href="http://www.zishu.cn" target="_blank"> http://www.zishu.cn</a> 作者:子鼠</div> </body> </html>
如果您对本文有任何疑问或者建议,请到讨论区发表您的意见:
>> 论坛入口 <<
上一篇:
CSS仿淘宝首页导航条按钮布局效果
下一篇:
CSS实现导航条图片的翻转菜单
【
文章评论
】 【
收藏本文
】 【
推荐好友
】 【
打印本文
】 【
我要投稿
】 【
论坛讨论
】
更多相关文章
·
纯CSS的下拉菜单 支持IE6 IE7 Firefox
·
CSS网页中的相对定位与绝对定位
·
web标准化设计:常用的CSS命名规则
·
网页标准化制作:CSS的超级技巧大放送
·
用CSS设计高体验的表单显示效果示例
·
CSS实现导航条图片的翻转菜单
·
用CSS实现的一张图完成的导航条
·
CSS仿淘宝首页导航条按钮布局效果
·
如何用CSS层叠样式表控制鼠标显示的样式
·
如何用CSS来控制网页字体的显示样式
推荐文章
·
网页文字竖排样式表(CSS)法
·
超级漂亮的表格:彩色背景
·
怎么样让12px以下的文字正常显示
·
图片自动缩小的代码
·
用CSS定义标题的几个实例
·
*.HTC文件的简单介绍
·
轻松玩转花样表单 表单概述
·
妙用CSS滤镜为图片加上特殊效果
精彩文章
·
用css使网页图片半透明
·
使用样式表控制IE5.5浏览器中滚动
·
CSS样式表高效使用的技巧
·
图片自动缩小的代码
·
网页设计必须注意的几个问题
·
CSS实现简单的图片防盗链代码
·
如何用CSS层叠样式表控制鼠标显示的
·
DropShadow属性、Chroma属性和blur
·
css布局定位系列:相对定位
·
用css模仿AS效果的导航菜单
·
解决DIV给flash挡住的问题
·
[译]CSS的十大密技
·
CSS-COLOR样式
·
WEB开发框架JACKER探讨(一)
·
CSS实用教程(一)
·
web标准建站:CSS入门教程
·
怎么样做论坛的登陆表单
·
用CSS实现的一张图完成的导航条
·
用css改变鼠标显示
·
怎么样在网页中动态改变样式
·
样式表(CSS:Cascading Styl
·
学习CSS的10大理由
·
CSS文本:layout-grid-line
·
自定多姿多彩的网页链接下划线
·
使用 CSS 创建固定宽度
·
你未必知道的10个CSS技巧
Power by linux-cn.com
粤ICP备05006655号