二楼正解
下面是完整的代码,你保存成baidubaike.html,然后再浏览器中打开就可以看到一样的效果了,你要是想实现这种效果,加上动态语言就可以了。css你可以自己下载。
<html>
<head>
<link
href="
type="text/css" rel="stylesheet">
</head>
<body>
<div id="sideToolbar"
style="display: block; position: fixed; top: 307px; left: 1000px;">
<div id="sideCatalog" class="sideCatalogBg"
style="visibility: visible;">
<div id="sideCatalog-sidebar">
<div class="sideCatalog-sidebar-top"></div>
<div class="sideCatalog-sidebar-bottom"></div>
</div>
<div id="sideCatalog-updown" style="visibility: hidden;">
<div id="sideCatalog-up" class="sideCatalog-up-disable" title="向上翻页"></div>
<div id="sideCatalog-down" class="sideCatalog-down-enable"
title="向下翻页"></div>
</div>
<div id="sideCatalog-catalog">
<dl style="width: 175px; zoom: 1">
<dd class="sideCatalog-item1" id="sideToolbar-item--1">
<span class="sideCatalog-index1">1</span><a href="#1"
class="nslog:1026" title="成长经历" onclick="return false;">成长经历</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--1_1">
<span class="sideCatalog-index2">1.1</span><a href="#1_1"
class="nslog:1026" title="早年生活" onclick="return false;">早年生活</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--1_2">
<span class="sideCatalog-index2">1.2</span><a href="#1_2"
class="nslog:1026" title="初露锋芒" onclick="return false;">初露锋芒</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--1_3">
<span class="sideCatalog-index2">1.3</span><a href="#1_3"
class="nslog:1026" title="曼联新秀" onclick="return false;">曼联新秀</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--1_4">
<span class="sideCatalog-index2">1.4</span><a href="#1_4"
class="nslog:1026" title="世界扬名" onclick="return false;">世界扬名</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item--2">
<span class="sideCatalog-index1">2</span><a href="#2"
class="nslog:1026" title="运动生涯" onclick="return false;">运动生涯</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--2_1">
<span class="sideCatalog-index2">2.1</span><a href="#2_1"
class="nslog:1026" title="俱乐部生涯" onclick="return false;">俱乐部生涯</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--2_2">
<span class="sideCatalog-index2">2.2</span><a href="#2_2"
class="nslog:1026" title="国家队生涯" onclick="return false;">国家队生涯</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item--3">
<span class="sideCatalog-index1">3</span><a href="#3"
class="nslog:1026" title="技术特点" onclick="return false;">技术特点</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item--4">
<span class="sideCatalog-index1">4</span><a href="#4"
class="nslog:1026" title="职业数据" onclick="return false;">职业数据</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--4_1">
<span class="sideCatalog-index2">4.1</span><a href="#4_1"
class="nslog:1026" title="俱乐部数据" onclick="return false;">俱乐部数据</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--4_2">
<span class="sideCatalog-index2">4.2</span><a href="#4_2"
class="nslog:1026" title="国家队数据" onclick="return false;">国家队数据</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item--5">
<span class="sideCatalog-index1">5</span><a href="#5"
class="nslog:1026" title="荣誉记录" onclick="return false;">荣誉记录</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--5_1">
<span class="sideCatalog-index2">5.1</span><a href="#5_1"
class="nslog:1026" title="国家队荣誉" onclick="return false;">国家队荣誉</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--5_2">
<span class="sideCatalog-index2">5.2</span><a href="#5_2"
class="nslog:1026" title="俱乐部荣誉" onclick="return false;">俱乐部荣誉</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--5_3">
<span class="sideCatalog-index2">5.3</span><a href="#5_3"
class="nslog:1026" title="个人荣誉" onclick="return false;">个人荣誉</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--5_4">
<span class="sideCatalog-index2">5.4</span><a href="#5_4"
class="nslog:1026" title="个人记录" onclick="return false;">个人记录</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item--6">
<span class="sideCatalog-index1">6</span><a href="#6"
class="nslog:1026" title="场外生活" onclick="return false;">场外生活</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item--7">
<span class="sideCatalog-index1">7</span><a href="#7"
class="nslog:1026" title="评价" onclick="return false;">评价</a><span
class="sideCatalog-dot"></span>
</dd>
</dl>
</div>
</div>
<a id="sideCatalogBtn" href="javascript:void(0);"
style="visibility: visible;" class=""></a><a id="sideToolbar-up"
href="javascript:void(0)" style="visibility: visible;"></a>
</div>
</body>
</html>
下面是完整的代码,你保存成baidubaike.html,然后再浏览器中打开就可以看到一样的效果了,你要是想实现这种效果,加上动态语言就可以了。css你可以自己下载。
<html>
<head>
<link
href="
type="text/css" rel="stylesheet">
</head>
<body>
<div id="sideToolbar"
style="display: block; position: fixed; top: 307px; left: 1000px;">
<div id="sideCatalog" class="sideCatalogBg"
style="visibility: visible;">
<div id="sideCatalog-sidebar">
<div class="sideCatalog-sidebar-top"></div>
<div class="sideCatalog-sidebar-bottom"></div>
</div>
<div id="sideCatalog-updown" style="visibility: hidden;">
<div id="sideCatalog-up" class="sideCatalog-up-disable" title="向上翻页"></div>
<div id="sideCatalog-down" class="sideCatalog-down-enable"
title="向下翻页"></div>
</div>
<div id="sideCatalog-catalog">
<dl style="width: 175px; zoom: 1">
<dd class="sideCatalog-item1" id="sideToolbar-item--1">
<span class="sideCatalog-index1">1</span><a href="#1"
class="nslog:1026" title="成长经历" onclick="return false;">成长经历</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--1_1">
<span class="sideCatalog-index2">1.1</span><a href="#1_1"
class="nslog:1026" title="早年生活" onclick="return false;">早年生活</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--1_2">
<span class="sideCatalog-index2">1.2</span><a href="#1_2"
class="nslog:1026" title="初露锋芒" onclick="return false;">初露锋芒</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--1_3">
<span class="sideCatalog-index2">1.3</span><a href="#1_3"
class="nslog:1026" title="曼联新秀" onclick="return false;">曼联新秀</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--1_4">
<span class="sideCatalog-index2">1.4</span><a href="#1_4"
class="nslog:1026" title="世界扬名" onclick="return false;">世界扬名</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item--2">
<span class="sideCatalog-index1">2</span><a href="#2"
class="nslog:1026" title="运动生涯" onclick="return false;">运动生涯</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--2_1">
<span class="sideCatalog-index2">2.1</span><a href="#2_1"
class="nslog:1026" title="俱乐部生涯" onclick="return false;">俱乐部生涯</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--2_2">
<span class="sideCatalog-index2">2.2</span><a href="#2_2"
class="nslog:1026" title="国家队生涯" onclick="return false;">国家队生涯</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item--3">
<span class="sideCatalog-index1">3</span><a href="#3"
class="nslog:1026" title="技术特点" onclick="return false;">技术特点</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item--4">
<span class="sideCatalog-index1">4</span><a href="#4"
class="nslog:1026" title="职业数据" onclick="return false;">职业数据</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--4_1">
<span class="sideCatalog-index2">4.1</span><a href="#4_1"
class="nslog:1026" title="俱乐部数据" onclick="return false;">俱乐部数据</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--4_2">
<span class="sideCatalog-index2">4.2</span><a href="#4_2"
class="nslog:1026" title="国家队数据" onclick="return false;">国家队数据</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item--5">
<span class="sideCatalog-index1">5</span><a href="#5"
class="nslog:1026" title="荣誉记录" onclick="return false;">荣誉记录</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--5_1">
<span class="sideCatalog-index2">5.1</span><a href="#5_1"
class="nslog:1026" title="国家队荣誉" onclick="return false;">国家队荣誉</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--5_2">
<span class="sideCatalog-index2">5.2</span><a href="#5_2"
class="nslog:1026" title="俱乐部荣誉" onclick="return false;">俱乐部荣誉</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--5_3">
<span class="sideCatalog-index2">5.3</span><a href="#5_3"
class="nslog:1026" title="个人荣誉" onclick="return false;">个人荣誉</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item--5_4">
<span class="sideCatalog-index2">5.4</span><a href="#5_4"
class="nslog:1026" title="个人记录" onclick="return false;">个人记录</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item--6">
<span class="sideCatalog-index1">6</span><a href="#6"
class="nslog:1026" title="场外生活" onclick="return false;">场外生活</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item--7">
<span class="sideCatalog-index1">7</span><a href="#7"
class="nslog:1026" title="评价" onclick="return false;">评价</a><span
class="sideCatalog-dot"></span>
</dd>
</dl>
</div>
</div>
<a id="sideCatalogBtn" href="javascript:void(0);"
style="visibility: visible;" class=""></a><a id="sideToolbar-up"
href="javascript:void(0)" style="visibility: visible;"></a>
</div>
</body>
</html>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货