Skip to content

Commit 8c7e232

Browse files
author
NoBey
committed
test
1 parent f974e5b commit 8c7e232

10 files changed

+2291
-0
lines changed

‎RedMail.png

68.5 KB
Loading

‎css/jquery.fullPage.css

+182
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
/**
2+
* fullPage 2.4.6
3+
* https://github.com/alvarotrigo/fullPage.js
4+
* MIT licensed
5+
*
6+
* Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
7+
*/
8+
html, body {
9+
margin: 0;
10+
padding: 0;
11+
overflow:hidden;
12+
13+
/*Avoid flicker on slides transitions for mobile phones #336 */
14+
-webkit-tap-highlight-color: rgba(0,0,0,0);
15+
}
16+
#superContainer {
17+
height: 100%;
18+
position: relative;
19+
20+
/* Touch detection for Windows 8 */
21+
-ms-touch-action: none;
22+
23+
/* IE 11 on Windows Phone 8.1*/
24+
touch-action: none;
25+
}
26+
.fp-section {
27+
position: relative;
28+
-webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
29+
-moz-box-sizing: border-box; /* <=28 */
30+
box-sizing: border-box;
31+
}
32+
.fp-slide {
33+
float: left;
34+
}
35+
.fp-slide, .fp-slidesContainer {
36+
height: 100%;
37+
display: block;
38+
}
39+
.fp-slides {
40+
z-index:1;
41+
height: 100%;
42+
overflow: hidden;
43+
position: relative;
44+
-webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
45+
transition: all 0.3s ease-out;
46+
}
47+
.fp-section.fp-table, .fp-slide.fp-table {
48+
display: table;
49+
table-layout:fixed;
50+
width: 100%;
51+
}
52+
.fp-tableCell {
53+
display: table-cell;
54+
vertical-align: middle;
55+
width: 100%;
56+
height: 100%;
57+
}
58+
.fp-slidesContainer {
59+
float: left;
60+
position: relative;
61+
}
62+
.fp-controlArrow {
63+
position: absolute;
64+
z-index: 4;
65+
top: 50%;
66+
cursor: pointer;
67+
width: 0;
68+
height: 0;
69+
border-style: solid;
70+
margin-top: -38px;
71+
}
72+
.fp-controlArrow.fp-prev {
73+
left: 15px;
74+
width: 0;
75+
border-width: 38.5px 34px 38.5px 0;
76+
border-color: transparent #fff transparent transparent;
77+
}
78+
.fp-controlArrow.fp-next {
79+
right: 15px;
80+
border-width: 38.5px 0 38.5px 34px;
81+
border-color: transparent transparent transparent #fff;
82+
}
83+
.fp-scrollable {
84+
overflow: scroll;
85+
86+
}
87+
.fp-notransition {
88+
-webkit-transition: none !important;
89+
transition: none !important;
90+
}
91+
#fp-nav {
92+
position: fixed;
93+
z-index: 100;
94+
margin-top: -32px;
95+
top: 50%;
96+
opacity: 1;
97+
}
98+
#fp-nav.right {
99+
right: 17px;
100+
}
101+
#fp-nav.left {
102+
left: 17px;
103+
}
104+
.fp-slidesNav{
105+
position: absolute;
106+
z-index: 4;
107+
left: 50%;
108+
opacity: 1;
109+
}
110+
.fp-slidesNav.bottom {
111+
bottom: 17px;
112+
}
113+
.fp-slidesNav.top {
114+
top: 17px;
115+
}
116+
#fp-nav ul,
117+
.fp-slidesNav ul {
118+
margin: 0;
119+
padding: 0;
120+
}
121+
#fp-nav ul li,
122+
.fp-slidesNav ul li {
123+
display: block;
124+
width: 14px;
125+
height: 13px;
126+
margin: 7px;
127+
position:relative;
128+
}
129+
.fp-slidesNav ul li {
130+
display: inline-block;
131+
}
132+
#fp-nav ul li a,
133+
.fp-slidesNav ul li a {
134+
display: block;
135+
position: relative;
136+
z-index: 1;
137+
width: 100%;
138+
height: 100%;
139+
cursor: pointer;
140+
text-decoration: none;
141+
}
142+
#fp-nav ul li a.active span,
143+
.fp-slidesNav ul li a.active span {
144+
background: #333;
145+
}
146+
#fp-nav ul li a span,
147+
.fp-slidesNav ul li a span {
148+
top: 2px;
149+
left: 2px;
150+
width: 8px;
151+
height: 8px;
152+
border: 1px solid #000;
153+
background: rgba(0, 0, 0, 0);
154+
border-radius: 50%;
155+
position: absolute;
156+
z-index: 1;
157+
}
158+
#fp-nav ul li .fp-tooltip {
159+
position: absolute;
160+
top: -2px;
161+
color: #fff;
162+
font-size: 14px;
163+
font-family: arial, helvetica, sans-serif;
164+
white-space: nowrap;
165+
max-width: 220px;
166+
overflow: hidden;
167+
display: block;
168+
opacity: 0;
169+
width: 0;
170+
}
171+
#fp-nav ul li:hover .fp-tooltip {
172+
-webkit-transition: opacity 0.2s ease-in;
173+
transition: opacity 0.2s ease-in;
174+
width: auto;
175+
opacity: 1;
176+
}
177+
#fp-nav ul li .fp-tooltip.right {
178+
right: 20px;
179+
}
180+
#fp-nav ul li .fp-tooltip.left {
181+
left: 20px;
182+
}

‎images/1.jpg

314 KB
Loading

‎images/2.jpg

398 KB
Loading

‎images/3.jpg

431 KB
Loading

‎images/4.jpg

365 KB
Loading

‎index.html

+139
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title> 一个适合私人使用的邮件服务器 简单快速部署 安全保护隐私 </title>
9+
<link rel="stylesheet" href="css/jquery.fullPage.css">
10+
<style>
11+
a {
12+
text-decoration: none;
13+
}
14+
15+
.section {
16+
text-align: center;
17+
font: 50px "Microsoft Yahei";
18+
color: #fff;
19+
}
20+
21+
#nav {
22+
margin: 0;
23+
padding: 0;
24+
position: fixed;
25+
z-index: 70;
26+
height: 65px;
27+
width: 100%;
28+
background: #EE4537;
29+
}
30+
31+
#nav ul {
32+
list-style-type: none;
33+
float: right;
34+
}
35+
36+
#nav ul li {
37+
float: left;
38+
}
39+
40+
#nav ul li:hover>a {
41+
text-decoration: underline;
42+
}
43+
44+
#nav ul li a {
45+
float: left;
46+
color: #fff;
47+
font-size: 22px;
48+
margin: 0px 20px
49+
}
50+
51+
#nav img {
52+
float: left;
53+
margin-left: 30px;
54+
margin-right: 10px
55+
}
56+
57+
#nav h1 {
58+
float: left;
59+
color: #fff;
60+
line-height: 65px;
61+
margin: 0px;
62+
padding: 0px;
63+
}
64+
.section h3{
65+
color: #EE4537;
66+
}
67+
.section p{
68+
color: #EE4537;
69+
}
70+
</style>
71+
<script src="js/jquery-1.8.3.min.js"></script>
72+
<script src="js/jquery.fullPage.min.js"></script>
73+
<script src="http://cdn.staticfile.org/jquery-easing/1.3/jquery.easing.min.js"></script>
74+
75+
</head>
76+
77+
<body>
78+
<div id='nav'>
79+
<img src="./RedMail.png" width="65" height="65">
80+
<h1>RedMail</h1>
81+
<ul>
82+
<li><a href="#">首页</a></li>
83+
<li><a href="#">使用</a></li>
84+
<li><a href="#">插件</a></li>
85+
<li><a href="#">GitHub</a></li>
86+
<li><a href="#">关于</a></li>
87+
</ul>
88+
</div>
89+
90+
<div id="main">
91+
<div class="section one">
92+
<h3>一个用于私人的邮件服务器</h3>
93+
<p>A suitable for private use mail server</p>
94+
</div>
95+
<div class="section two">
96+
<h3>简单, 快速的配置</h3>
97+
<p>A simple rapid deployment</p>
98+
</div>
99+
<div class="section thr">
100+
<h3>更多的选择和扩展</h3>
101+
<p>More choice and extension</p>
102+
</div>
103+
</div>
104+
105+
</body>
106+
<script type="text/javascript">
107+
$(function() {
108+
$('#main').fullpage({
109+
sectionsColor: ['#FFE5E5', '#FCF9ED', '#F2FBE8'],
110+
navigation: true,
111+
menu: '#menu',
112+
afterLoad: function(anchorLink, index){
113+
console.log(index)
114+
if(index == 1){
115+
$('.one').find('p').fadeIn(1000);
116+
}
117+
if(index == 2){
118+
$('.two').find('p').fadeIn(1000);
119+
}
120+
if(index == 3){
121+
$('.thr').find('p').fadeIn(1000);
122+
}
123+
},
124+
onLeave: function(index, direction){
125+
if(index == '1'){
126+
$('.one').find('p').fadeOut(1000);
127+
}
128+
if(index == '2'){
129+
$('.two').find('p').fadeOut(1000);
130+
}
131+
if(index == '3'){
132+
$('.thr').find('p').fadeOut(1000);
133+
}
134+
}
135+
});
136+
});
137+
</script>
138+
139+
</html>

‎js/jquery-1.8.3.min.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)