Spaces:
Running
Running
Update index.html
Browse files- index.html +38 -3
index.html
CHANGED
|
@@ -7,7 +7,7 @@
|
|
| 7 |
<style>
|
| 8 |
body {
|
| 9 |
font-family: 'Arial', sans-serif;
|
| 10 |
-
background-color: #
|
| 11 |
margin: 0;
|
| 12 |
padding: 0;
|
| 13 |
color: #333;
|
|
@@ -19,8 +19,9 @@
|
|
| 19 |
padding: 20px;
|
| 20 |
background: white;
|
| 21 |
border-radius: 10px;
|
| 22 |
-
box-shadow: 0 0
|
| 23 |
overflow: hidden;
|
|
|
|
| 24 |
}
|
| 25 |
|
| 26 |
.page {
|
|
@@ -40,12 +41,14 @@
|
|
| 40 |
color: #c0392b;
|
| 41 |
text-align: center;
|
| 42 |
margin-bottom: 20px;
|
|
|
|
| 43 |
}
|
| 44 |
|
| 45 |
p, ul, ol {
|
| 46 |
line-height: 1.6;
|
| 47 |
font-size: 1.1em;
|
| 48 |
margin-bottom: 15px;
|
|
|
|
| 49 |
}
|
| 50 |
|
| 51 |
button {
|
|
@@ -57,11 +60,12 @@
|
|
| 57 |
cursor: pointer;
|
| 58 |
border-radius: 5px;
|
| 59 |
font-size: 16px;
|
| 60 |
-
transition: background-color 0.3s;
|
| 61 |
}
|
| 62 |
|
| 63 |
button:hover {
|
| 64 |
background-color: #a52a2a;
|
|
|
|
| 65 |
}
|
| 66 |
|
| 67 |
.footer {
|
|
@@ -70,6 +74,17 @@
|
|
| 70 |
font-size: 0.9em;
|
| 71 |
color: #777;
|
| 72 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 73 |
</style>
|
| 74 |
</head>
|
| 75 |
<body>
|
|
@@ -107,8 +122,28 @@
|
|
| 107 |
<li>加强团队之间的交流与合作，分享成功经验和教训。</li>
|
| 108 |
<li>参与更多的社会公益活动，提升团队的社会责任感。</li>
|
| 109 |
</ol>
|
|
|
|
| 110 |
<button onclick="prevPage(3)">上一页</button>
|
| 111 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 112 |
</div>
|
| 113 |
|
| 114 |
<div class="footer">
|
|
|
|
| 7 |
<style>
|
| 8 |
body {
|
| 9 |
font-family: 'Arial', sans-serif;
|
| 10 |
+
background-color: #f0f0f0;
|
| 11 |
margin: 0;
|
| 12 |
padding: 0;
|
| 13 |
color: #333;
|
|
|
|
| 19 |
padding: 20px;
|
| 20 |
background: white;
|
| 21 |
border-radius: 10px;
|
| 22 |
+
box-shadow: 0 0 30px rgba(0,0,0,0.3);
|
| 23 |
overflow: hidden;
|
| 24 |
+
position: relative;
|
| 25 |
}
|
| 26 |
|
| 27 |
.page {
|
|
|
|
| 41 |
color: #c0392b;
|
| 42 |
text-align: center;
|
| 43 |
margin-bottom: 20px;
|
| 44 |
+
animation: fadeIn 0.8s forwards;
|
| 45 |
}
|
| 46 |
|
| 47 |
p, ul, ol {
|
| 48 |
line-height: 1.6;
|
| 49 |
font-size: 1.1em;
|
| 50 |
margin-bottom: 15px;
|
| 51 |
+
animation: slideIn 0.8s forwards;
|
| 52 |
}
|
| 53 |
|
| 54 |
button {
|
|
|
|
| 60 |
cursor: pointer;
|
| 61 |
border-radius: 5px;
|
| 62 |
font-size: 16px;
|
| 63 |
+
transition: background-color 0.3s, transform 0.3s;
|
| 64 |
}
|
| 65 |
|
| 66 |
button:hover {
|
| 67 |
background-color: #a52a2a;
|
| 68 |
+
transform: scale(1.05);
|
| 69 |
}
|
| 70 |
|
| 71 |
.footer {
|
|
|
|
| 74 |
font-size: 0.9em;
|
| 75 |
color: #777;
|
| 76 |
}
|
| 77 |
+
|
| 78 |
+
/* 动画效果 */
|
| 79 |
+
@keyframes fadeIn {
|
| 80 |
+
from { opacity: 0; }
|
| 81 |
+
to { opacity: 1; }
|
| 82 |
+
}
|
| 83 |
+
|
| 84 |
+
@keyframes slideIn {
|
| 85 |
+
from { transform: translateY(20px); opacity: 0; }
|
| 86 |
+
to { transform: translateY(0); opacity: 1; }
|
| 87 |
+
}
|
| 88 |
</style>
|
| 89 |
</head>
|
| 90 |
<body>
|
|
|
|
| 122 |
<li>加强团队之间的交流与合作，分享成功经验和教训。</li>
|
| 123 |
<li>参与更多的社会公益活动，提升团队的社会责任感。</li>
|
| 124 |
</ol>
|
| 125 |
+
<button onclick="nextPage(5)">下一页</button>
|
| 126 |
<button onclick="prevPage(3)">上一页</button>
|
| 127 |
</div>
|
| 128 |
+
|
| 129 |
+
<div class="page" id="page5">
|
| 130 |
+
<h1>团队文化</h1>
|
| 131 |
+
<p>我们的团队文化强调开放、包容和创新。我们鼓励每位成员分享自己的观点和创意，推动团队不断进步。</p>
|
| 132 |
+
<p>我们相信，只有在互相支持和理解的环境中，才能激发出每个人的潜力，实现更大的成就。</p>
|
| 133 |
+
<button onclick="nextPage(6)">下一页</button>
|
| 134 |
+
<button onclick="prevPage(4)">上一页</button>
|
| 135 |
+
</div>
|
| 136 |
+
|
| 137 |
+
<div class="page" id="page6">
|
| 138 |
+
<h1>成功案例</h1>
|
| 139 |
+
<p>在过去的一年里，我们完成了一些重要项目：</p>
|
| 140 |
+
<ul>
|
| 141 |
+
<li><strong>项目A：</strong>成功举办了一次大型的文化活动，吸引了超过500名参与者。</li>
|
| 142 |
+
<li><strong>项目B：</strong>开展了针对青少年的公益培训，帮助了30名学生提升技能。</li>
|
| 143 |
+
<li><strong>项目C：</strong>与其他组织合作，共同开展环境保护活动，得到了社会的广泛认可。</li>
|
| 144 |
+
</ul>
|
| 145 |
+
<button onclick="prevPage(5)">上一页</button>
|
| 146 |
+
</div>
|
| 147 |
</div>
|
| 148 |
|
| 149 |
<div class="footer">
|