致力于网页设计制作教程:HTTP://WWW.ASP119.COM
旧版
Photoshop教程
网络营销
Flash教程
最近更新
收藏本站
CSS视频教程
CSS中文手册
PHP视频教程
SEO视频教程
JS基础教程
jquery中文手册
首页
网络专题
操作系统
工具软件
网站运营
平面设计
媒体动画
网页制作
网页特效
网络编程
认证考试
当前位置:
首页
>
网页制作
>
CSS教程
CSS菜单 带图片背景的横向导航
作者:
迷失的宇
来源:
ASP急救中心
浏览: 添加日期:2010-07-13
我要评论( )
[
导读
]前面我们都是纯DIV+css导航,现在给大家介绍一款带图片的导航.很漂亮.
点击下载视频教程
<!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" /> <style type="text/css"> <!-- #nav ul { list-style: none; margin: 0px auto; padding: 0px; border-bottom:3px solid #E10001; height:28px; width:360px; } #nav li { float: left; margin-left: 2px; } #nav a { display: block; width:87px; height: 28px; line-height: 28px; text-align:center; color: #000000; background:url(http://www.aa25.cn/upload/2010-06/27/nav_bg2.gif) 0 0 no-repeat; text-decoration: none; } #nav a:hover { color: #f00; background:url(http://www.aa25.cn/upload/2010-06/27/nav_bg3.gif) 0 0 no-repeat; } #nav a#current { background:url(http://www.aa25.cn/upload/2010-06/27/nav_bg1.gif) 0 0 no-repeat; font-weight:bold; color:#fff;} --> </style> </head> <body> <div id="nav"> <ul> <li><a id="current" href="#">首页</a></li> <li><a href="#">入门教程</a></li> <li><a href="#">视频教程</a></li> <li><a href="#">常见问题</a></li> </ul> </div> </body> </html>
提示:可以修改后运行.
Tags:
上一篇:
CSS菜单 竖向静态菜单
下一篇:
优化CSS几种常见的办法
相关文章
文章评论
正在载入评论数据中...
用户名:
QQ号:
*
匿名发表
验证码:
相关栏目
HTML/Xhtml
(19)
CSS教程
(20)
Dreamweaver
(2)
Frontpage
(0)
Javascript/Ajax
(72)
XML/XSLT
(9)
CMS技巧
(9)
推荐文章
最新信息