| 
Google
      
‹‹ 上一主题 | 下一主题 ››
发新话题
打印

添加漂亮的导航栏(仿淘宝导航栏)

univ

大学生在线社区

管理员

Rank: 9Rank: 9Rank: 9

官方管理员 Medal No.3 Medal No.4 Medal No.5 Medal No.6 Medal No.7 Medal No.8 Medal No.9 Medal No.10 论坛总监 形象GG

1# 大 中 小 发表于 2007-6-10 04:39  只看该作者

添加漂亮的导航栏(仿淘宝导航栏)

演示看我论坛导航,代码插入在其他头部信息:

代码如下:
复制内容到剪贴板
代码:
<table borderColor="#7AC4EA" cellSpacing="2" cellPadding="2" width="100%"bgColor="#D5EED3"

border="1">
<TBODY>
  <tr>
    <td><p align="center">



<style type="text/css">
<!--


body{
font-size:12px;
}

#Head #DHLItems li{
float:left;
height:30px;
margin-right:1px;
}
/*没有移动到上面时的左边:*/
#Head #DHLItems a{
display:block;
float:left;
height:30px;
background:transparent url([img]http://pics.taobao.com/2k5/sys/common/header/chl_home_left.gif[/img])   
left top no-repeat;
text-decoration:none;
}
/*没有移动到上面时的右边:*/
#Head #DHLItems a span{
display:block;
float:left;
height:30px;
padding:11px 15px 0px;
background:transparent url([img]http://pics.taobao.com/2k5/sys/common/header/chl_home_right.gif[/img])  


right top no-repeat;
text-align:center;
color:#000;
font-style:normal;
cursor:hand;
}


/*移动到上面时*/
#Head #DHLItems li#A a:hover{background:#FF9000 url([url]http://pics.taobao.com/2k5/sys/common/[/url]

header/chl_home_left_act.gif) left top no-repeat;}
#Head #DHLItems li#A a:hover span{background:transparent url([url]http://pics.taobao.com/2k5/sys/[/url]

common/header/chl_home_right_act.gif) right top no-repeat;color:#FFF;}

#Head #DHLItems li#B a:hover{background:#99A2B1 url([url]http://pics.taobao.com/2k5/sys/common/[/url]

header/chl_digital_left_act.gif) left top no-repeat;}
#Head #DHLItems li#B a:hover span{background:transparent url([url]http://pics.taobao.com/2k5/sys/[/url]

common/header/chl_digital_right_act.gif) right top no-repeat;color:#FFF;}

#Head #DHLItems li#C a:hover{background:#965BB9 url([url]http://pics.taobao.com/2k5/sys/common/[/url]

header/chl_digital_left_act.gif) left top no-repeat;}
#Head #DHLItems li#C a:hover span{background:transparent url([url]http://pics.taobao.com/2k5/sys/[/url]

common/header/chl_digital_right_act.gif) right top no-repeat;color:#FFF;}

#Head #DHLItems li#D a:hover{background:#3672AE url([url]http://pics.taobao.com/2k5/sys/common/[/url]

header/chl_man_left_act.gif) left top no-repeat;}
#Head #DHLItems li#D a:hover span{background:transparent url([url]http://pics.taobao.com/2k5/sys/[/url]

common/header/chl_man_right_act.gif) right top no-repeat;color:#FFF;}


#Head #DHLItems li#E a:hover{background:#EC9307 url([url]http://pics.taobao.com/2k5/sys/common/[/url]

header/chl_life_left_act.gif) left top no-repeat;}
#Head #DHLItems li#E a:hover span{background:transparent url([url]http://pics.taobao.com/2k5/sys/[/url]

common/header/chl_life_right_act.gif) right top no-repeat;color:#FFF;}

#Head #DHLItems li#F a:hover{background:#1E998B url([url]http://pics.taobao.com/2k5/sys/common/[/url]

header/chl_culture_left_act4.gif) left top no-repeat;}
#Head #DHLItems li#F a:hover span{background:transparent url([url]http://pics.taobao.com/2k5/sys/[/url]

common/header/chl_culture_right_act3.gif) right top no-repeat;color:#FFF;}

#Head #DHLItems li#G a:hover{background:#AFC326 url([url]http://pics.taobao.com/2k5/sys/common/[/url]

header/chl_sports_left_act.gif) left top no-repeat;}
#Head #DHLItems li#G a:hover span{background:transparent url([url]http://pics.taobao.com/2k5/sys/[/url]

common/header/chl_sports_right_act.gif) right top no-repeat;color:#FFF;}

#Head #DHLItems li#H a:hover{background:#C34B26 url([url]http://pics.taobao.com/2k5/sys/common/[/url]

header/chl_game_left_act.gif) left top no-repeat;}
#Head #DHLItems li#H a:hover span{background:transparent url([url]http://pics.taobao.com/2k5/sys/[/url]

common/header/chl_game_right_act.gif) right top no-repeat;color:#FFF;}

#Head #DHLItems li#I a:hover{background:#88605F url([url]http://pics.taobao.com/2k5/sys/common/[/url]

header/chl_collection_left_act2.gif) left top no-repeat;}
#Head #DHLItems li#I a:hover span{background:transparent url([url]http://pics.taobao.com/2k5/sys/[/url]

common/header/chl_collection_right_act2.gif) right top no-repeat;color:#FFF;}

#Head #DHLItems li#J a:hover{background:#965BB9 url([url]http://pics.taobao.com/2k5/sys/common/[/url]

header/chl_hongkong_left_act2.gif) left top no-repeat;}
#Head #DHLItems li#J a:hover span{background:transparent url([url]http://pics.taobao.com/2k5/sys/[/url]

common/header/chl_hongkong_right_act2.gif) right top no-repeat;color:#FFF;}



/*供设置当前所在标签：如<body class="A">*/

body.A ul#DHLItems li#A a{background:#FF9000 url([url]http://pics.taobao.com/2k5/sys/common/header[/url]

/chl_home_left_act.gif) left top no-repeat;}
body.A ul#DHLItems li#A a span{background:transparent url([url]http://pics.taobao.com/2k5/sys/[/url]

common/header/chl_home_right_act.gif) right top no-repeat;font-weight:bold;color:#FFF;}

body.B ul#DHLItems li#B a{background:#99A2B1 url([url]http://pics.taobao.com/2k5/sys/common/header[/url]

/chl_digital_left_act.gif) left top no-repeat;}
body.B ul#DHLItems li#B a span{background:transparent url([url]http://pics.taobao.com/2k5/sys/[/url]

common/header/chl_digital_right_act.gif) right top no-repeat;font-weight:bold;color:#FFF;}

body.C ul#DHLItems li#C a{background:#E1569A url([url]http://pics.taobao.com/2k5/sys/common/header[/url]

/chl_lady_left_act.gif) left top no-repeat;}
body.C ul#DHLItems li#C a span{background:transparent url([url]http://pics.taobao.com/2k5/sys/[/url]

common/header/chl_lady_right_act.gif) right top no-repeat;font-weight:bold;color:#FFF;}

body.D ul#DHLItems li#D a{background:#3672AE url([url]http://pics.taobao.com/2k5/sys/common/header[/url]

/chl_man_left_act.gif) left top no-repeat;}
body.D ul#DHLItems li#D a span{background:transparent url([url]http://pics.taobao.com/2k5/sys/[/url]

common/header/chl_man_right_act.gif) right top no-repeat;font-weight:bold;color:#FFF;}

body.E ul#DHLItems li#E a{background:#EC9307 url([url]http://pics.taobao.com/2k5/sys/common/header[/url]

/chl_life_left_act.gif) left top no-repeat;}
body.E ul#DHLItems li#E a span{background:transparent url([url]http://pics.taobao.com/2k5/sys/[/url]

common/header/chl_life_right_act.gif) right top no-repeat;font-weight:bold;color:#FFF;}

body.F ul#DHLItems li#F a{background:#1E998B url([url]http://pics.taobao.com/2k5/sys/common/header[/url]

/chl_culture_left_act4.gif) left top no-repeat;}
body.F ul#DHLItems li#F a span{background:transparent url([url]http://pics.taobao.com/2k5/sys/[/url]

common/header/chl_culture_right_act3.gif) right top no-repeat;font-weight:bold;color:#FFF;}

body.G ul#DHLItems li#G a{background:#AFC326 url([url]http://pics.taobao.com/2k5/sys/common/header[/url]

/chl_sports_left_act.gif) left top no-repeat;}
body.G ul#DHLItems li#G a span{background:transparent url([url]http://pics.taobao.com/2k5/sys/[/url]

common/header/chl_sports_right_act.gif) right top no-repeat;font-weight:bold;color:#FFF;}

body.H ul#DHLItems li#H a{background:#C34B26 url([url]http://pics.taobao.com/2k5/sys/common/header[/url]

/chl_game_left_act.gif) left top no-repeat;}
body.H ul#DHLItems li#H a span{background:transparent url([url]http://pics.taobao.com/2k5/sys/[/url]

common/header/chl_game_right_act.gif) right top no-repeat;font-weight:bold;color:#FFF;}

body.I ul#DHLItems li#I a{background:#88605F url([url]http://pics.taobao.com/2k5/sys/common/header[/url]

/chl_collection_left_act2.gif) left top no-repeat;}
body.I ul#DHLItems li#I a span{background:transparent url([url]http://pics.taobao.com/2k5/sys/[/url]

common/header/chl_collection_right_act2.gif) right top no-repeat;font-weight:bold;color:#FFF;}

body.J ul#DHLItems li#J a{background:#965BB9 url([url]http://pics.taobao.com/2k5/sys/common/header[/url]

/chl_hongkong_left_act2.gif) left top no-repeat;}
body.J ul#DHLItems li#J a span{background:transparent url([url]http://pics.taobao.com/2k5/sys/[/url]

common/header/chl_hongkong_right_act2.gif) right top no-repeat;font-weight:bold;color:#FFF;}

-->
</style>
</head>


   
<div id="Head">
<div id="DHL">
  <ul id="DHLItems">
   <li id="A"><a href="链接地址"><span>你需要的标题</span></a></li>
   <li id="B"><a href="链接地址"><span>你需要的标题</span></a></li>
   <li id="C"><a href="链接地址"><span>你需要的标题</span></a></li>
   <li id="D"><a href="链接地址"><span>你需要的标题</span></a></li>
   <li id="E"><a href="链接地址"><span>你需要的标题</span></a></li>
   <li id="F"><a href="链接地址"><span>你需要的标题</span></a></li>
   <li id="G"><a href="链接地址"><span>你需要的标题</span></a></li>
   <li id="H"><a href="链接地址"><span>你需要的标题</span></a></li>
   <li id="I"><a  href="#"><span>设为主页</span></a></li>
   <li id="J"><a href="javascript:window.external.addFavorite('链接地址','你的网站名称');"><span>加入收藏</span></a></li>
  </ul>
</div>
</div>

</td>
</tr>
</TBODY>
</table>

TOP

univ

大学生在线社区

管理员

Rank: 9Rank: 9Rank: 9

官方管理员 Medal No.3 Medal No.4 Medal No.5 Medal No.6 Medal No.7 Medal No.8 Medal No.9 Medal No.10 论坛总监 形象GG

2# 大 中 小 发表于 2007-6-10 06:10  只看该作者
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META name="GENERATOR" content="IBM HomePage Builder 2001 V5.0.0 for Windows">
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE id="table4" height="36" cellspacing="0" cellpadding="0" width="100%" border="0">
  <TBODY>
    <TR>
      <TD width="375" bgcolor="#666666"><FONT size="+3"><B><SPAN style="FONT-SIZE: 9pt"></SPAN><SPAN style="FONT-SIZE: 9pt"><FONT color="#ffff00"><A style="BEHAVIOR: url(#default#homepage)" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://xjfbbs.5d6d.com/');return(false);" href="http://xjfbbs.5d6d.com/"><FONT color="#ffff00">设为首页 <FONT style="FONT-SIZE: 9pt" face="宋体"><FONT color="#ffffff"> ┊ </FONT></FONT></FONT></A></FONT></SPAN></B></FONT><SPAN style="FONT-SIZE: 9pt"><FONT color="#ffffff">             </FONT><A class="" href="javascript:window.external.addFavorite('http://xjfbbs.5d6d.com/','非主流QQ空间社区')"><FONT color="#ffff00"><B> 收藏本站</B></FONT></A><FONT color="#ffffff">   <A title="點擊以繁體中文方式浏覽" style="COLOR: yellow" href="#" name="StranLink"></A></FONT></SPAN></TD>
      <TD bgcolor="#666666"><SPAN style="FONT-WEIGHT: 680; FONT-SIZE: 9pt"></SPAN><FONT style="FONT-SIZE: 9pt" face="宋体"><FONT color="#ffffff"> ┊ </FONT><A href="http://xjfbbs.5d6d.com/"><FONT color="#00ffff">网站首页</FONT></A><FONT color="#ffffff"> ┊ </FONT><A href="http://xjfeng.135.hezu1.com/" target="_blank"><FONT color="#ffffff">技术空间</FONT></A><FONT color="#ffffff"> ┊ <A href="http://zone.135.hezu1.com/music/index.html"><FONT color="#ffff00">在线音乐</FONT></A> ┊ </FONT><A href="http://zone.135.hezu1.com/mp3/index.asp" target="_blank"><FONT color="#ffffff">音乐搜索</FONT></A><FONT color="#ffffff"> ┊ </FONT><A href="http://xjfeng.135.hezu1.com/pic/Index.asp" target="_blank"><FONT color="#ffffff">美女写真</FONT></A><FONT color="#ffffff"> ┊ </FONT><A href="http://zone.135.hezu1.com/bt/Index.asp"><FONT color="#ffffff">bt资源</FONT></A><FONT color="#ffffff"> ┊ </FONT><A href="http://zone.135.hezu1.com/ship/index.asp" target="_blank"><FONT color="#ffffff">影音</FONT></A><FONT color="#ffffff"> ┊ </FONT><FONT color="#ffff00"><A href="http://xjfeng.vip.5944.net/ship/"><FONT color="#00ffff">美女写真视频</FONT></A></FONT><FONT color="#ffffff"> ┊ <A href="http://xjfeng.xinwen520.net/" target="_blank"><FONT color="#00ff00">上网导航</FONT></A></FONT></FONT></TD>
    </TR>
  </TBODY>
</TABLE>
</BODY>
</HTML>

TOP

‹‹ 上一主题 | 下一主题 ››
发新话题