-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
68 lines (61 loc) · 3.64 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jQuery全屏滚动插件fullPage.js演示_dowebok</title>
<style>
* { margin: 0; padding: 0;}
.wrap { width: 960px; margin: 0 auto; font: 14px Tahoma,Helvetica,Arial,"宋体";}
p { margin: 14px 0; text-align: center;}
h2 { margin-bottom: 20px; padding: 5px 2px; border-bottom: 1px solid #ccc; font: 500 24px "Microsoft Yahei";}
ul { margin-top: 20px; list-style-type: none; overflow: hidden; zoom: 1;}
li { position: relative; float: left; width: 300px; margin: 0 10px 20px;}
ul a { float: left; width: 300px; height: 60px; line-height: 60px; color: #333; text-align: center; text-decoration: none; background-color: #eee;}
ul .downLink { position: absolute; right: 0; bottom: 0; width: auto; height: auto; padding: 5px 10px; line-height: normal; font-size: 12px; color: #666; background-color: #ddd;}
ul .downLink:hover { color: #000;}
</style>
</head>
<body>
<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery全屏滚动插件fullPage.js演示</h1>
<div class="wrap">
<p>fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。</p>
<h2>基本演示</h2>
<ul>
<li><a href="index2.html" target="_blank">基本演示</a></li>
<li><a href="index3.html" target="_blank">背景演示</a></li>
<li><a href="index4.html" target="_blank">循环演示</a></li>
<li><a href="index5.html" target="_blank">回调函数演示</a></li>
<li><a href="index6.html" target="_blank">绑定菜单演示</a></li>
<li><a href="index7.html" target="_blank">项目导航演示</a></li>
<li><a href="index11.html" target="_blank">自动滚动</a></li>
<li><a href="index12.html" target="_blank">slide自动滚动</a></li>
<li><a href="index13.html" target="_blank">响应式</a></li>
</ul>
<h2>综合演示</h2>
<ul>
<li><a href="http://www.dowebok.com/demo/2014/77/index8.html" target="_blank">iPhone 5C</a></li>
<li><a href="http://www.dowebok.com/demo/2014/78/" target="_blank">百度百科史记2013</a></li>
<li><a href="http://www.dowebok.com/demo/2014/80/" target="_blank">搜狐快站</a></li>
<li><a href="http://www.dowebok.com/demo/2014/97/" target="_blank">网易邮箱6.0</a></li>
<li><a href="http://www.dowebok.com/demo/2014/77/index9.html" target="_blank">证券时报网移动产品</a></li>
<li><a href="http://www.dowebok.com/demo/126/" target="_blank">邮箱大师</a> <a class="downLink" href="http://www.400gb.com/file/74538329" target="_blank">下载</a></li>
<li><a href="index10.html" target="_blank">360安全路由</a> <a class="downLink" href="http://www.400gb.com/file/74322911" target="_blank">下载</a></li>
</ul>
</div>
<style>
.menu { height: 30px; margin-bottom: 30px; padding: 10px; background-color: #f0f0f0; text-align: center;}
.menu a { display: inline-block; height: 30px; padding: 0 20px; line-height: 30px; font-size: 14px; color: #333; text-decoration: none;}
.menu a:hover { color: #000; background-color: #e9e9e9;}
.menu .cur { background-color: #ddd !important; color: #000;}
.vad { margin:80px 0 5px; font-family: arial,宋体,sans-serif; text-align:center;}
.vad a { display:inline-block; height: 36px; line-height: 36px; margin:0 5px; padding:0 50px; font-size:14px; text-align:center; color:#eee; text-decoration:none; background-color:#222;}
.vad a:hover { color:#fff; background-color:#000;}
.thead { width: 728px; height: 90px; margin: 0 auto;}
</style>
<p class="vad">
<a href="http://www.dowebok.com/" target="_blank">dowebok.com</a>
<a href="http://www.dowebok.com/77.html" target="_blank">说 明</a>
<a href="http://www.dowebok.com/77.html" target="_blank">下 载</a>
</p>
</body>
</html>