实际效果图:
<!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>无标题文档</title>
<style type="text/css">
#nav{background-image:url(images/navM.gif);}
#nav div{
background-image:url(images/nav_S.gif);
float:left;
width:4px;
height:34px;
font-size:0px;
margin:0px 4px;
background-repeat:no-repeat;
background-position:top;
background-repeat:no-repeat;
}
a.nav{
display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; text-decoration:none; cursor:pointer;
}
a.nav span{
display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;
}
a.nav:hover{
display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; background-image:url(images/nav_Over_L.gif); background-position:left center; background-repeat:no-repeat; text-decoration:none;
}
a.nav:hover span{
display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;background-image:url(images/nav_Over_R.gif); background-position:right center; background-repeat:no-repeat;
}
#curTab{
display:block; float:left; padding-left:12px; font-weight:bold; color:#f00; height:34px; font-size:14px;background-image:url(images/nav_On_L.gif); background-position:left center; background-repeat:no-repeat;
}
#curTab span{
display:block; float:left; padding-right:12px; font-weight:bold;height:24px; padding-top:10px;background-image:url(images/nav_On_R.gif);background-position:right center; background-repeat:no-repeat;
}
</style>
<script language="javascript">
function $(objId){
return document.getElementById(objId);
}
function changeId(idName,obj){
$(idName).id="";
obj.id=idName;
obj.blur();
}
</script>
</head>
<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="3"><img src="images/navL.gif" width="3" height="34" /></td>
<td id="nav">
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="#" id="curTab" class="nav" onclick="changeId('curTab',this)"><span>首页</span></a>
<div></div>
<a href="#" class="nav" onclick="changeId('curTab',this)"><span>网站建设</span></a>
<div></div>
<a href="#" class="nav" onclick="changeId('curTab',this)"><span>软件开发</span></a>
<div></div>
<a href="#" class="nav" onclick="changeId('curTab',this)"><span>虚拟主机</span></a>
<div></div>
<a href="#" class="nav" onclick="changeId('curTab',this)"><span>域名注册</span></a>
<div></div>
<a href="#" class="nav" onclick="changeId('curTab',this)"><span>企业信息化</span></a>
<div></div>
<a href="#" class="nav" onclick="changeId('curTab',this)"><span>成功案例</span></a>
<div></div>
<a href="#" class="nav" onclick="changeId('curTab',this)"><span>在线留言</span></a>
<div></div>
<a href="#" class="nav" onclick="changeId('curTab',this)"><span>关于我们</span></a>
</td>
</tr>
</table>
</td>
<td width="3"><img src="images/navR.gif" width="3" height="34" /></td>
</tr>
</table>
</body>
</html>
images文件夹里的图片有:
这是整个用到的图片名称,和上图一一对应。
发表评论
-
PS加强网页设计中像素化细节的技巧
2009-05-13 10:12 859PS加强网页设计中像素化细节的技巧 http://www. ... -
如何在浏览器地址栏前添加自定义的小图标?
2009-05-07 17:37 3457如何在浏览器地址栏前添加自定义的小图标?你是不是记得有时在浏览 ... -
CSS属性:装饰超链接
2009-05-07 17:35 976CSS属性:装饰超链接 ※装饰超链接 网页默认的 ... -
网页收藏
2009-04-02 16:12 733http://www.cool80.com/ 搜罗精美酷站, ... -
一位CSS新手整理的CSS网页布局技巧
2009-03-31 15:44 728对CSS网页布局的技巧,可谓是名目繁多,在52CSS.com上 ... -
CSS样式的filter(滤镜效果)可控制DIV透明度
2009-03-26 23:06 1869我们可以用CSS样式的filter(滤镜效果)对HTML的一些 ... -
div+css学习网站
2009-03-26 23:05 742http://www.aa25.cn/ -
使用css设置字体的透明度及艺术字代码
2009-03-26 23:03 6025使用css设置字体的透明度及艺术字代码 2006/10/28 ... -
优秀站点的CSS导航菜单
2009-03-26 22:54 10241. http://www.alvit.de/css-sho ... -
CSS导航菜单:仿淘宝首页导航条布局效果
2009-03-26 22:49 1866一直以来,人们都认为淘宝的导航条不错,更有很多网站效仿;今天 ... -
高级CSS技巧-Tab选项卡导航菜单
2009-03-26 22:48 1876任何的tab导航,都可以采用下面的方式来实现。看一下下面的T ... -
点击出现图片大图效果
2009-03-26 22:33 905<style>#demo{overflow:hid ... -
国内设计好站/酷站收藏类网站收集
2009-03-26 22:15 816设计站点必须要有灵感,好的灵感需要多阅读多思考,所以WEB设计 ... -
【酷站】中国互联网Web2.0 Top 100
2009-03-26 22:11 871猫扑 http://www.mop.com 和讯 h ... -
国内WEB2.0酷站赏析
2009-03-26 22:10 782RichURL在线收藏夹 * http:/ ... -
国内酷站欣赏
2009-03-26 22:07 775http://www.citycy.com/http://ww ... -
用网页技术CSS实现网页背景渐变
2009-03-26 22:01 1403用网页技术CSS实现网页背景渐变的四种代码设置。 一、从上往 ... -
三角形图标的DIV+CSS做法
2009-03-26 21:53 1168以前做三角形图标,都是做一个三角的图片,然后在css里面调用, ...
相关推荐
非常漂亮实用的系统左侧导航菜单
超漂亮的导航菜单,非常好用,非常方便,超值啦
WPF开发的漂亮酷炫的导航菜单实例程序,导航菜单实例注释讲解十分详细。
非常漂亮实用的flash导航,非常漂亮实用的flash导航
非常漂亮的导航菜单(html),鼠标放上去又滑动效果
HTML5漂亮导航菜单,CSS3/HTML5实现的漂亮网站导航效果,背景动态变化,十分醒目,鼠标悬停于任意菜单项时,该菜单项的背景图像会滚动变化,视觉效果很棒。
精美的左侧导航菜单,漂亮,简洁,下载直接可以展示的!!
13个漂亮的JS导航菜单 13种样式,个个好看、实用, 欢迎下载
漂亮三级菜单 导航菜单 菜单 js tree 好用
漂亮的树形导航菜单
漂亮的公司网站导航菜单,来源于成都华信科技公司网站
两款超级漂亮实用的CSS导航菜单,可用于网站导航页面。
WPF左侧导航菜单,项目可直接运行,进行有力参考
一个简单的delphi导航菜单,赶快下载吧!
橘色超漂亮滑动二级导航菜单代码。超级好用哦,而且也能兼容的
用css定义的17种网页导航菜单。。。值得学习哦
有些博主的博导航菜单设计的非常漂亮,这对于精通CSS的朋友来说,不是件难事,可对于不懂这些的朋友来说,有点小麻烦,所以,这款酷炫的导航菜单插件也就应运而生了。 Multi-level Navigation Plugin可以将导航菜单...
漂亮的Js导航,使用简单,兼容IE,FF
非常漂亮的横向导航菜单 Fluid Navigation CSS & jQuery