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

日期：2020-06-11 栏目：程序人生浏览：次

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

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

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

具体的代码如下：

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8">
 <link href="https://www.jb51.net/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>
<div>
 <h2>
 <a></a>
 1
 part1
 </h2>

<div>
 content1,content1
 
 </div>
 <h2>
 <a></a>
 2
 part2
 </h2>

<div>
 content2,content2
 
 </div>
 <h2>
 <a></a>
 2-1
 part2-1
 </h2>

<div>
 content2-1,content2-1
 
 </div>
 <h2>
 <a></a>
 2-2
 part2-2
 </h2>

<div>
 content2-2,content2-2
 
 </div>
 <h2>
 <a></a>
 3
 part3
 </h2>

转载注明出处：https://www.heiqu.com/wgxxxp.html

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

相关推荐