Skip to content

Commit ff92547

Browse files
class5classclass5class
committed
Merge remote-tracking branch 'origin/main'
1 parent 10b7e85 commit ff92547

File tree

3 files changed

+38
-160
lines changed

3 files changed

+38
-160
lines changed

‎about.html

+3-137
Original file line numberDiff line numberDiff line change
@@ -21,148 +21,14 @@
2121
<h1>八年五班</h1>
2222
<ul>
2323
<li><a href="index.html">首页</a></li>
24-
<li><a href="homeworks.html">每日作业</a></li>
2524
<li><a href="photos.html">班级图库</a></li>
2625
<li><a href="#">文案投稿</a></li>
27-
<li><a href="#">关于</a></li>
26+
<li><a href="about.html">关于</a></li>
2827
<li><a href="#">敬请期待…</a></li>
2928
</ul>
3029
</div> <!--顶部导航栏-->
31-
32-
<div>
33-
<h1 class="huge_title_1">开学分班寄</h1>
34-
<h1 class="huge_title_1">八五班 班级纪念网站</h1>
35-
<nav>
36-
<!-- 保留原有一言内容显示位置 -->
37-
<h1 class="hit_text" id="hitokoto_text">
38-
正在获取一言...
39-
</h1>
40-
</nav>
41-
?
42-
<script>
43-
let currentHitokoto = ''; // 保存当前的一言内容
44-
45-
function fetchHitokoto() {
46-
const hitokoto = document.querySelector('#hitokoto_text');
47-
fetch('https://v1.hitokoto.cn/?c=d&c=e&c=f&c=g&c=h&c=i&c=j&c=k&c=l')
48-
.then(response => response.json())
49-
.then(data => {
50-
const newHitokoto = data.hitokoto;
51-
if (newHitokoto && newHitokoto !== currentHitokoto) {
52-
currentHitokoto = newHitokoto; // 更新当前的一言内容
53-
hitokoto.style.opacity = 0; // 设置透明度为0，开始淡出效果
54-
setTimeout(() => {
55-
hitokoto.innerText = currentHitokoto;
56-
hitokoto.style.opacity = 1; // 设置透明度为1，开始淡入效果
57-
}, 500); // 等待500毫秒，确保淡出效果先执行
58-
}
59-
})
60-
.catch(console.error);
61-
}
62-
63-
// 初次加载页面时获取一言内容
64-
fetchHitokoto();
65-
66-
// 定时器，每隔10秒刷新一次一言内容
67-
setInterval(fetchHitokoto, 7000);
68-
</script>
69-
70-
71-
<h1 style="font-size: 0.9em;
72-
color: #0b303b;
73-
text-align: right;
74-
font-family: Arial, sans-serif;
75-
margin-right: 17px;
76-
margin-top: 20px;
77-
">designed by Wemsur</h1>
78-
<br>
79-
<br>
80-
</div> <!--第一页内容-->
81-
<div style="margin-top: 20px"> <!--第二页：班级风貌-->
82-
<h1 class="huge_title_2">班级风貌</h1>
83-
<div class="container">
84-
<div class="box">
85-
<span></span>
86-
<div class="content">
87-
<h2>团结协作</h2>
88-
<p>
89-
同学们互相团结互助，共同为班级进步而努力，为班级争得璀璨荣誉。每个同学都在集体中找到自己的位置，发挥自己的特长，共同创造一个和谐、温暖、有爱的学习环境。
90-
</p>
91-
</div>
92-
</div>
93-
<div class="box">
94-
<span></span>
95-
<div class="content">
96-
<h2>积极向上</h2>
97-
<p>
98-
我们班级积极向上，充满活力，每个同学都努力追求进步，勇于挑战自我。在这里，我们共同成长，彼此激励，营造出一个奋发向上的学习氛围。
99-
</p>
100-
</div>
101-
</div>
102-
<div class="box">
103-
<span></span>
104-
<div class="content">
105-
<h2>顽强努力</h2>
106-
<p>
107-
我们班级顽强努力，坚韧不拔，每个同学在学习和生活中都不畏困难，迎难而上。大家相互支持，相互鼓励，奋勇拼搏，共同打造出一个坚韧有力的集体。
108-
</p>
109-
</div>
110-
</div>
111-
<div class="box">
112-
<span></span>
113-
<div class="content">
114-
<h2>自律创新</h2>
115-
<p>
116-
我们班级自律创新，每个同学都严格要求自己，遵守班级规章制度，同时勇于探索，追求新知。在自律中成长，在创新中进步，共同营造出一个充满活力和创造力的教学环境。
117-
</p>
118-
</div>
119-
</div>
120-
</div>
121-
</div>
122-
<br>
123-
<div class="info_card">
124-
<div class="card-title">
125-
<h1>班级图库</h1>
126-
<p>
127-
这里记录了同学们奋力拼搏的瞬间，承载着无数美好的回忆：有操场上挥洒的汗水，有教室中努力学习的身影……
128-
<br>
129-
来这里，共忆从前的美好青春时光!
130-
</p>
131-
<div class="card-button">
132-
<a href="photos.html">
133-
<button >
134-
班级图库
135-
</button>
136-
</a>
137-
</div>
138-
</div>
139-
140-
<div class="in_photo">
141-
<img alt="图片" src="photos/6.jpg">
142-
</div>
143-
</div><!--第三页：班级图库-->
144-
145-
<div class="info_card2">
146-
<div class="in_photo">
147-
<img alt="图片" src="homeworks.jpeg">
148-
</div>
149-
<div class="card-title">
150-
<h1>暂待规划</h1>
151-
<p>
152-
可能会放回忆录或者成员名单什么的东西
153-
<br>
154-
大家踊跃投稿
155-
</p>
156-
<div class="card-button">
157-
<a href="#">
158-
<button >
159-
暂无
160-
</button>
161-
</a>
162-
</div>
163-
</div>
164-
</div><!--第四页：暂待规划-->
165-
<br>
30+
<h1 class="huge_title_2">暂无更多</h1>
31+
<script src="css_js/script.js"></script>
16632
</body>
16733
<!--愿世间再无别离-->
16834
</html>

‎css_js/main.css

+19-8
Original file line numberDiff line numberDiff line change
@@ -522,11 +522,23 @@ body{
522522
object-fit: cover;
523523
}
524524

525-
.photos img {
526-
width: 89.6%;
525+
.photos{
526+
text-align: center;
527+
}
528+
529+
.photos img{
530+
width: 88%;
527531
height: auto;
528532
border-radius: 30px;
529-
margin: 30px 5% 30px 5%;
533+
margin: 30px auto 30px auto;
534+
transition-property: transform;
535+
transition-duration: 0.8s;
536+
transition-delay: 0.1s;
537+
transition-timing-function: ease;
538+
}
539+
540+
.photos img:hover{
541+
transform: scale(102%);
530542
}
531543

532544
.ho-link{
@@ -574,21 +586,20 @@ body{
574586

575587
#fade.hiding{
576588
opacity: 0;
577-
transform: translateY(100px);
589+
transform: translateY(100px) scale(90%);
578590
}
579591

580592
#fade2.hiding2{
581593
opacity: 0;
582-
transform: translateY(100px);
594+
transform: translateY(100px) scale(90%);
583595
}
584596

585597
#fade3.hiding3{
586598
opacity: 0;
587-
transform: translateY(100px);
599+
transform: translateY(100px) scale(90%);
588600
}
589601

590602
#fade4.hiding4{
591603
opacity: 0;
592-
transform: translateY(100px);
604+
transform: translateY(100px) scale(90%);
593605
}
594-

‎photos.html

+16-15
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="zh_cmn_Hans" class="background">
2+
<html lang="zh_cmn_Hans">
33
<head>
44
<meta charset="utf-8">
55
<title>八五班班级网站</title>
@@ -9,7 +9,7 @@
99
@import "css_js/main.css";
1010
</style>
1111

12-
<body>
12+
<body class="pho">
1313
<br>
1414
<br>
1515
<br>
@@ -18,28 +18,29 @@
1818
<h1>八年级五班</h1>
1919
<ul>
2020
<li><a href="index.html">首页</a></li>
21-
<li><a href="homeworks.html">每日作业</a></li>
2221
<li><a href="photos.html">班级图库</a></li>
2322
<li><a href="#">文案投稿</a></li>
24-
<li><a href="#">关于</a></li>
23+
<li><a href="about.html">关于</a></li>
2524
<li><a href="#">敬请期待…</a></li>
2625
</ul>
2726
</nav> <!--顶部导航栏-->
2827
<div style="margin-top: 20px"> <!--第二页：班级风貌-->
2928
<h1 class="huge_title_2">班级图库</h1>
3029
</div>
3130
<div style="margin-top: 50px;"></div>
32-
<div class="photos"><img alt="" src="icon.png"></div>
33-
<div class="photos"><img alt="" src="photos/1.jpg"></div>
34-
<div class="photos"><img alt="" src="photos/2.jpg"></div>
35-
<div class="photos"><img alt="" src="photos/3.jpg"></div>
36-
<div class="photos"><img alt="" src="photos/4.jpg"></div>
37-
<div class="photos"><img alt="" src="photos/5.jpg"></div>
38-
<div class="photos"><img alt="" src="photos/6.jpg"></div>
39-
<div class="photos"><img alt="" src="photos/7.jpg"></div>
40-
<div class="photos"><img alt="" src="photos/8.jpg"></div>
41-
<div class="photos"><img alt="" src="photos/9.jpg"></div>
42-
<div class="photos"><img alt="" src="photos/10.jpg"></div>
31+
<div class="photos">
32+
<img alt="" src="icon.png">
33+
<img alt="" src="photos/1.jpg">
34+
<img alt="" src="photos/2.jpg">
35+
<img alt="" src="photos/3.jpg">
36+
<img alt="" src="photos/4.jpg">
37+
<img alt="" src="photos/5.jpg">
38+
<img alt="" src="photos/6.jpg">
39+
<img alt="" src="photos/7.jpg">
40+
<img alt="" src="photos/8.jpg">
41+
<img alt="" src="photos/9.jpg">
42+
<img alt="" src="photos/10.jpg">
43+
</div>
4344
<br>
4445
<br>
4546
</body>

0 commit comments

Comments
 (0)