jQuery+css实现百度百科的页面导航效果

作者:简简单单 2014-12-17

仿百度百科的页面导航,下图为导航部分的效果图:

jQuery+css实现百度百科的页面导航效果

css和图片都是抄百度的,可从百度百科下载。

具体的代码如下:

 

 代码如下 复制代码



   
   
   
   




   


       
        1
        part1
   



   

        content1,content1
       

























   

   


       
        2
        part2
   



   

        content2,content2
       

























   

   


       
        2-1
        part2-1
   



   

        content2-1,content2-1
       

























   

   


       
        2-2
        part2-2
   



   

        content2-2,content2-2
       

























   

   


       
        3
        part3
   



   

        content,content
       

























   

   


       
        4
        part4
   



   

        content,content
       

























   

   


       
        5
        part5
   



   

        content5,content5
       

























   

   


       
        6
        part6
   



   

        content6,content6
       

























   

   


       
        7
        part7
   



   

        content7,content7
       

























   

   


       
        8
        part8
   



   

        content8,content8
       

























   

   


       
        9
        part9
   



   

        content9,content9
       

























   

   


       
        10
        part10
   



   

        content10,content10
       

























   

   


       
        11
        part11
   



   

        content11,content11
       

























   

   


       
        12
        part12
   



   

        content12,content12
       

























   

   


       
        13
        part13
   



   

        content13,content13
       

























   

   


       
        14
        part14
   



   

        content14,content14
       

























   

   


       
        15
        part15
   



   

        content15,content15
       

























       

























        bottom
   



   

       

           

               

               

           

           

               

               

           

           

               

                   

                        1
                        part1
                       
                   

                   

                        2
                        part2
                       
                   

                   

                        2-1
                        part2-1
                       
                   

                   

                        2-2
                        part2-2
                       
                   

                   

                        3
                        part3
                       
                   

                   

                        4
                        part4
                       
                   

                   

                        5
                        part5
                       
                   

                   

                        6
                        part6
                       
                   

                   

                        7
                        part7
                       
                   

                   

                        8
                        part8
                       
                   

                   

                        9
                        part9
                       
                   

                   

                        10
                        part10
                       
                   

                   

                        11
                        part11
                       
                   

                   

                        12
                        part12
                       
                   

                   

                        13
                        part13
                       
                   

                   

                        14
                        part14
                       
                   

                   

                        15
                        part15
                       
                   

               

           

       

        javascript:void(0);">
       
   






 

总结:网页设计还是要看大站看齐,我们没事的时候也可以去这些大网站学习学习他们的特效应用。

相关文章

精彩推荐