Google
      
发新话题
打印

[] 最新导航代码 土土推荐 支持翻页的导航诞生拉!!

最新导航代码 土土推荐 支持翻页的导航诞生拉!!

示范效果:

 

 

具体代码在2楼 请查看

源代码:% ~/ q* A6 ^% p  x2 m$ w) d3 C
  a6 |/ m# I+ @0 D  d

: U/ c7 P% R. }$ j6 o& C/ Q; p- }- D, T; l  |# `" A8 R  ]

1 q" }; I* a3 C1 @  b
引用:
<head>; T6 I, A6 t9 T0 |
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
4 X: q/ ~; `! Z* V( p6 b<title></title>* @3 A( A% @" I4 W# r" c" v
<script type="text/javascript">! ~! q% V1 o: j7 U
function area_nav(index){
! W6 [3 ?5 Q8 F9 tfor(var i=1;i<=2;i++)
9 z. l% T/ Q1 [8 I5 o) R. X{
3 g* W+ X& k  W* s- C1 \; h1 [2 t        if( document.getElementById("nav"+i.toString()) != null )
5 D4 P3 d  K& ~, z9 r# C        {; k( H' V. j% n
                document.getElementById("nav"+i.toString()).style.display = 'none';        ) G& G# ^8 _4 Q, R6 K$ }
        }* w2 ?  R$ U/ ]
}$ Z5 A  N; Q+ Q# }- L8 _  }
        document.getElementById("nav"+index.toString()).style.display = 'block';
* l# E- k! M) Z* _  R9 t" s}4 p' J$ d9 W7 _& c# B
</script>, A* Y2 ?: F# E& Z5 e# I  z
<style type="text/css">
* m9 ^+ Y; \" x( H0 }. F<!--2 H- S1 i! S2 S- w5 G  O
a:link, a:visited { color: #0F0CBF; }
; {& C. Y6 N% i. ka:hover { color: #F00; text-decoration: underline; }+ N- V$ a% K, u5 n& j- D$ ]/ @% o9 R
body { background-color: #FFFFFF; background-position: center; color: #003366; font-family: Arial, "宋体"; font-size: 12px; margin: 0px; padding: 0px; }2 W! O5 s8 W% e) r
img { border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; margin: 0px; padding: 0px; }
9 \2 z4 i& Y! y6 Z. ?% U4 Oli { border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; list-style-image: none; list-style-type: none; margin: 0px; padding: 0px; }2 b6 W0 i% L& Y2 r; p5 C
ul { border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; list-style-type: none; margin: 0px; padding: 0px; }+ w; M# ^# ]; A. P$ A. `  p) M
.nav { height: 74px; width: 980px; }
$ k( y: \( i/ Z0 N! Z) c#nav1    .menu, #nav2   .menu { float: left; width: 945px; }- }, a, I: m( R1 P
#nav1    .menu_tab, #nav2   .menu_tab { float: left; height: 74px; width: 35px; }0 k( C6 s% q; ^# V+ q  {9 m: r/ U
#nav1   .menu   .left { background-image: url(); background-position: 0px 0px; background-repeat: no-repeat; float: left; height: 74px; width: 5px; }# w" ?8 _, I1 S5 k% R: c/ T
#nav1   .menu   .middle { background-image: url(); background-repeat: repeat-x; float: left; height: 74px; width: 933px; }4 {( L, O4 z( z: X
#nav1  .menu   .right { background-image: url(); background-position: -5px 0px; background-repeat: no-repeat; float: right; height: 74px; width: 7px; }$ X6 D; n' [! Q" P3 a
#nav1  .menu  li  a { background-image: url(); height: 24px; width: 68px; line-height: 24px; background-repeat: no-repeat; float: left; text-align: center; text-decoration: none; color: #003366; background-position: 0px 0px;}
2 X+ L* z* z8 d#nav1  .menu  li  a:hover { color: #006699; background-position: 0px -24px; }8 k; G  f9 I7 q0 Z9 l
#nav1  .menu  li, #nav2  .menu  li { float: left; margin-bottom: 2px; margin-left: 3px; margin-right: 0px; margin-top: 6px; }
/ h6 K, x" Q0 {: N. d' a+ v#nav1  .menu  ul, #nav2  .menu  ul { margin-bottom: 0px; margin-left: 2px; margin-right: 0px; margin-top: 4px; }
, F5 j( a3 e2 ]; n' Z* [#nav2  .menu  .left { background-image: url(); background-position: 0px 0px; background-repeat: no-repeat; float: left; height: 74px; width: 5px; }4 d- e- x1 o' J, b5 J8 h0 `
#nav2  .menu  .middle { background-image: url(); background-repeat: repeat-x; float: left; height: 74px; width: 933px; }
  d  h) d, p0 x7 r#nav2  .menu  .right { background-image: url(); background-position: -5px 0px; background-repeat: no-repeat; float: right; height: 74px; width: 7px; }( o* S8 [4 `2 v3 H. `
#nav2  .menu  li  a { background-image: url(); height: 24px; width: 68px; line-height: 24px; background-repeat: no-repeat; float: left; text-align: center; text-decoration: none; color: #666666; background-position: 0px 0px;}/ ]# @% I3 r* S; q0 H
#nav2  .menu  li  a:hover { color: #000000; background-position: 0px -24px;}2 d* I) U/ v5 b/ Y5 J1 c3 P$ Z
-->
# |2 Q5 n) D5 S</style>0 f6 J- h* D1 m8 Y! v
</head>
. z8 S' z3 m& [' \$ j. J<body>
% G0 u% u% ?4 `# S<div id="nav1" class="nav"><div class="menu_tab"><div><a href="http://www.mytus.cn" target="_top"><img src="http://www.mytus.cn/userdirs/b/a/tutu/attachments/month_0806/20080616_7134a31c8662d640c7b33MepYB152M53.gif" alt="软件资源导航" /></a></div>
8 |, p" {. e& Q* {+ K5 o<div><a href="http://www.mytus.cn" target="_top"><img src="http://www.mytus.cn/userdirs/b/a/tutu/attachments/month_0806/20080616_c2caa83aa347cc91ac1bHSyyF6vuhvjU.gif" alt="文章教程导航" /></a></div></div><div class="menu"><div class="left"></div><div class="middle"><ul><li><a href="http://www.mytus.cn" target="_top">网络工具</a></li><li><a href="http://www.mytus.cn" target="_top">管理软件</a></li><li><a href="http://www.mytus.cn" target="_top">媒体工具</a></li><li><a href="http://www.mytus.cn" target="_top">系统程序</a></li><li><a href="http://www.mytus.cn" target="_top">教育教学</a></li><li><a href="http://www.mytus.cn" target="_top">编程开发</a></li><li><a href="http://www.mytus.cn" target="_top">游戏娱乐</a></li><li><a href="http://www.mytus.cn" target="_top">其它类别</a></li><li><a href="http://www.mytus.cn" target="_top">图文处理</a></li><li><a href="http://www.mytus.cn" target="_top">桌面工具</a></li><li><a href="http://www.mytus.cn" target="_top">数码软件</a></li><li><a href="http://www.mytus.cn" target="_top">网站源码</a></li><li><a href="http://www.mytus.cn" target="_top">黑客软件</a></li><li><a href="http://www.mytus.cn" target="_top">破解注册</a></li><li><a href="http://www.mytus.cn" target="_top">影音视界</a></li><li><a href="http://www.mytus.cn" target="_top">音乐下载</a></li><li><a href="http://www.mytus.cn" target="_top">BT下载</a></li></ul></div>
& H9 ^/ l1 L* b    <div class="right"></div></div></div>
* O& B- C6 O5 e7 b" Q# i$ U
6 k- X  f+ G' Q9 x4 Y<div id="nav2" class="nav" style="DISPLAY: none"><div class="menu_tab"><div><a href="http://www.mytus.cn" target="_top"><img src="http://www.mytus.cn/userdirs/b/a/tutu/attachments/month_0806/20080616_c2e203cf81c713ad6f2au4X4CvMvfbFp.gif" alt="软件资源导航" /></a></div>* G. G8 S; l( T3 t  g3 @
<div><a href="http://www.mytus.cn" target="_top"><img src="http://www.mytus.cn/userdirs/b/a/tutu/attachments/month_0806/20080616_4ea9716d72f32b0a4da886zQRW0GBTym.gif" alt="文章教程导航" /></div></div><div class="menu"><div class="left"></div><div class="middle"> <ul><li><a href="http://www.mytus.cn" target="_top">软件教程</a></li><li><a href="http://www.mytus.cn" target="_top">故障维修</a></li><li><a href="http://www.mytus.cn" target="_top">操作系统</a></li><li><a href="http://www.mytus.cn" target="_top">网页制作</a></li><li><a href="http://www.mytus.cn" target="_top">图像处理</a></li><li><a href="http://www.mytus.cn" target="_top">网络编程</a></li><li><a href="http://www.mytus.cn" target="_top">程序设计</a></li><li><a href="http://www.mytus.cn" target="_top">QQ专栏</a></li><li><a href="http://www.mytus.cn" target="_top">注册码大全</a></li><li><a href="http://www.mytus.cn" target="_top">本站公告</a></li><li><a href="http://www.mytus.cn" target="_top">明星娱乐</a></li><li><a href="http://www.mytus.cn" target="_top">另类搞笑</a></li><li><a href="http://www.mytus.cn" target="_top">黑客技术</a></li><li><a href="http://www.mytus.cn" target="_top">美图壁纸</a></li><li><a href="http://www.mytus.cn" target="_top">搞笑电影</a></li><li><a href="http://www.mytus.cn" target="_top">评测文章</a></li><li><a href="http://www.mytus.cn" target="_top">攻略秘籍</a></li><li><a href="http://www.mytus.cn" target="_top">上网宝典</a></li><li><a href="http://www.mytus.cn" target="_top">其他文章</a></li><li><a href="http://www.mytus.cn" target="_top">小故事</a></li><li><a href="http://www.mytus.cn" target="_top">手机专栏</a></li></ul></div><div class="right" ></div></div></div>
6 M8 n3 T1 a0 X<br>
9 w0 B' v- a/ ?2 q7 G3 F: U1 T</body>
3 k' R, Y" ~9 X) v</html>
4 J+ @+ _" y% C6 x7 R1 Z
2 X! r4 c9 T+ [6 S% U3 @
  l' l/ n2 b: p1 j# Q1 d
$ N* m& j( s" Q, Z( K改红色部分为你自己的 网站的 网址 名字
+ o- Z: d: S: j+ Y% ~+ Z  d4 F/ H! z# i
! K. T  V- N5 T3 D1 `/ U  V1 i, T3 T9 V# o5 g" \) O
改完之后 复制代码 到下面测试* z/ x; S7 g$ m( d: R

2 e) y2 |# M5 t2 O土土论坛(www.mytus.cn)
具体放在那里说下啊!!!!!!!!
放在哪??是用於5D6D的??????????
提个意见,以后发代码帖应该说明具体放到什么位置,这样会员会很迷惑的
对,放的地方详细点,谢谢版主了
能翻页?效果是什么样的啊?通过那个范例看的不是很明白,能不能给讲讲!
把楼主的代码放在头部就可以了,不过确实,大家都想看看演示效果,可都让楼主一个人做好效果截图的话,工作量还是太大了!所以大家都学学我吧,代码一个一个试,呵呵,没办法,傻人用傻着了啊 !
恩,先看看效果如何。。
发新话题
查看积分策略说明

快速回复主题

选项

[完成后可按 Ctrl+Enter 发布]  预览帖子  恢复数据  清空内容