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

作者：字体：[增加减小] 来源：互联网

通过本文主要向大家介绍了jQuery,css,百度百科,导航等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

这周不小心看到了百度百科的页面导航效果，感觉挺不错的，周末抽空写了下。

下图为导航部分的效果图：

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

具体的代码如下：

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8">
 <link rel="stylesheet" href="baidu.css">
 <style>
 * {
 margin: 0;
 padding: 0
 }

        .wrap {
            width: 1000px;
            overflow: hidden;
            margin: 0 auto;
        }

        .content {
            width: 780px;
            float: left;
        }

.slide {
 width: 200px;
 float: right;
 }
 </style>
</head>
<body>
<div class="wrap">
<div class="content">
 <h2 class="headline-1">
 <a class="anchor-1" name="1"></a>
 1
 part1
 </h2>

<div class="para">
 content1,content1
 
 </div>
 <h2 class="headline-1">
 <a class="anchor-1" name="2"></a>
 2
 part2
 </h2>

<div class="para">
 content2,content2
 
 </div>
 <h2 class="headline-1">
 <a class="anchor-1" name="2-1"></a>
 2-1
 part2-1
 </h2>

<div class="para">
 content2-1,content2-1
 
 </div>
 <h2 class="headline-1">
 <a class="anchor-1" name="2-2"></a>
 2-2
 part2-2
 </h2>

<div class="para">
 content2-2,content2-2
 
 </div>
 <h2 class="headline-1">
 <a class="anchor-1" name="3"></a>
 3
 part3
 </h2>

<div class="para3">
 content,content
 
 </div>
 <h2 class="headline-1">
 <a class="anchor-1" name="4"></a>
 4
 part4
 </h2>

<div class="para4">
 content,content
 
 </div>
 <h2 class="headline-1">
 <a class="anchor-1" name="5"></a>
 5
 part5
 </h2>

<div class="para">
 content5,content5
 
 </div>
 <h2 class="headlin

分享到：QQ空间新浪微博腾讯微博微信百度贴吧 QQ好友复制网址打印

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

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容