-
Notifications
You must be signed in to change notification settings - Fork 0
/
introduction.html
196 lines (187 loc) · 12.1 KB
/
introduction.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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="introduction_style.css">
<link rel="stylesheet" href="00_project_theme.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+TC:[email protected]&display=swap" rel="stylesheet">
<script src="introduction.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body >
<!--等index的nav加入，這邊先大致用個div代替-->
<div id="top">
<nav id="nav_bar">
<ul class="nav">
<li id="home"><a href="index.html">Home</a></li>
<li id="introduction"><a href="introduction.html">Introduction</a></li>
<li id="sport"><a href="sport.html">Sports</a></li>
<li id="store"><a href="store.html">Store</a></li>
<li id="comment"><a href="comment.html">Comment</a></li>
<li id="games"><a href="games.html">Games</a></li>
</ul>
</nav>
<label for="sideMenu--active" class="line"><div class="menu"></div></label>
</div>
<input type="checkbox" name="" id="sideMenu--active">
<!-- 使用 checkbox 來做開關 -->
<div class="sideMenu">
<nav>
<a href="#奧林" class="fas">奧運-歷史</a>
<a href="#2024" class="fas">今年2024:巴黎奧運</a>
<a href="#tokyo_olympic" class="fas">上一屆:東京奧運</a>
</nav>
</div>
<div id="content">
<!--第一段(奧林匹克運動會)-->
<h2 id="奧林">奧林匹克運動會-歷史</h2>
<p>奧林匹克運動會，奧運，世界最高等級的國際綜合體育賽事，由國際奧林匹克委員會主辦，每4年舉行一次。從1994年起，冬季奧運會和夏季奧運會分開，相隔2年交替舉行。
奧林匹克運動會最早起源於古希臘，是當時各城邦之間的公開較量，因為舉辦地在奧林匹亞而得名。信奉基督教的羅馬皇帝狄奧多西一世以奧林匹克運動會崇拜耶穌以外神衹為由，禁止奧運競技，於是奧運在舉辦超過1,000年後於4世紀末停辦，直到19世紀末才由後人發現遺蹟。
之後，法國的顧拜旦男爵皮耶·德·古柏坦創立了有真正奧運精神的現代奧林匹克運動會，自1896年開始每4年舉辦一次，更確立了會期不超過18日的傳統。
現代奧運會只在兩次世界大戰期間合共中斷過5次，以及在2020年因嚴重特殊傳染性肺炎大流行延期過一次</p>
<!--here-->
<h2 style="clear: both;" id="2024">今年2024:巴黎奧運</h2>
<br>
<table id="news">
<caption><h3>巴黎奧運交棒！一分鐘宣傳片「滿滿絕美景點」 網跪喊：好想出國</h3></caption>
<tr>
<td rowspan="2" id="video"><iframe width="560" height="280" src="https://www.youtube.com/embed/Za8lOd11Z8s?si=kw6kRhFVarplDRda" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
</td>
<td>
<div><a href="https://sports.ltn.com.tw/news/breakingnews/4689184">巴黎奧運！田徑場變浪漫了！！！史上首見薰衣草紫跑道 官方透露原因</a><br>
<br><span onclick="like(1,0)">❤️</span><span id="heart_1">100</span><span onclick="like(1,1)">👎</span><span id="bad_1">3</span></div>
</td>
</tr>
<tr><td>
<div><a href="https://tw.news.yahoo.com/2024%E5%B7%B4%E9%BB%8E%E5%A5%A7%E9%81%8B%E7%8D%8E%E7%89%8C%E6%9B%9D%E5%85%89-%E7%8F%A0%E5%AF%B6%E5%90%8D%E5%AE%B6chaumet%E6%89%93%E9%80%A0-%E9%91%B2%E5%B5%8C-%E7%89%87-%E5%B7%B4%E9%BB%8E%E9%90%B5%E5%A1%94-160000142.html">2024巴黎奧運獎牌曝光！珠寶名家Chaumet打造、鑲嵌一片「巴黎鐵塔」？</a>
<br><br><span onclick="like(2,0)">❤️</span><span id="heart_2">50</span><span onclick="like(2,1)">👎</span><span id="bad_2">7</span></div>
</td>
</tr>
<tr>
<td rowspan="2"><div id="news_content"><b>Games wide open !</b> <br>
It's about doing more to share the emotions of the Games with more people. <br>
It's about delivering Games that are more responsible, more inclusive, <br>
more equal and more spectacular than ever before. <br> Paris 2024 is a slogan: Games wide open !</td>
</div>
<td>
<div>
<a href="https://tw.news.yahoo.com/2024%E5%B7%B4%E9%BB%8E%E5%A5%A7%E9%81%8B-%E5%A5%A7%E9%81%8B%E8%81%96%E7%81%AB1%E8%90%AC%E5%90%8D%E7%81%AB%E7%82%AC%E6%89%8B%E5%82%B3%E9%81%9E-%E9%A6%AC%E8%B3%BD%E5%87%BA%E7%99%BC%E8%B5%B0%E9%81%8D%E6%B3%95%E5%9C%8B64%E5%8D%80-%E5%9B%9E%E5%88%B0%E5%A1%9E%E7%B4%8D%E6%B2%B3%E7%95%94%E8%88%89%E8%BE%A6%E9%96%8B%E5%B9%95%E5%BC%8F-elle-191900741.html">【2024巴黎奧運】奧運聖火1萬名火炬手傳遞！馬賽出發走遍法國64區，回到塞納河畔舉辦開幕式</a>
<br><br><span onclick="like(3,0)">❤️</span><span id="heart_3">199</span><span onclick="like(3,1)">👎</span><span id="bad_3">23</span></div>
</div>
</td>
</tr>
<tr>
<td>
<div>
<a href="https://tw.sports.yahoo.com/news/%E9%9C%B9%E9%9D%82%E8%88%9E-%E6%9C%89%E6%9C%9B%E5%89%8D%E9%80%B2%E5%B7%B4%E9%BB%8E-%E5%AD%AB%E6%8C%AF%E5%A5%A7%E9%81%8B%E8%B3%87%E6%A0%BC%E8%B3%BD%E9%A6%96%E7%AB%99%E5%B8%B6%E5%82%B7%E4%B8%8A%E9%99%A3%E6%8E%92%E7%AC%AC7-%E5%B9%B3%E5%B8%B8%E5%BF%83%E7%9C%8B%E5%BE%85%E5%82%B7%E5%8B%A2-%E9%A0%82%E5%B0%96%E8%88%9E%E8%80%85%E5%BE%97%E8%88%87%E5%82%B7%E5%85%B1%E5%AD%98-090341631.html">霹靂舞》有望前進巴黎！孫振奧運資格賽首站帶傷上陣排第7 平常心看待傷勢：頂尖舞者得與傷共存</a>
<br><br><span onclick="like(4,0)">❤️</span><span id="heart_4">10000</span><span onclick="like(4,1)">👎</span><span id="bad_4">8</span></div>
</div>
</td>
</tr>
</table>
<h3>3大亮點：</h3>
<div id="picture_div">
<img src="src/introduction/paris_olympic_2.jpg" alt="巴黎鐵塔">
<img src="src/introduction/paris_olympic_3.jpg" alt="戰神廣場">
<img src="src/introduction/phryges.png" alt="phryges">
</div>
<br>
<table id="introduction">
<tr>
<td>本屆巴黎奧運承襲東奧「環保減碳」理念，奧委會打破傳統，
使用城市現有的體育場館，並在各個巴黎地標旁搭建臨時場地，包含菲爾鐵塔前的耶拿橋、戰神廣場，還有巴黎大皇宮、凡爾賽宮！</td>
<td>巴奧這回史無前例把開幕式搬離主場館，移師塞納河舉行！不僅各國選手將會搭乘船隻出場，也是觀眾首次能現場參觀開幕典禮</td>
<td>弗里吉 Phryge 採用源自法國國旗的藍、白、紅三色，胸前鑲嵌金色 2024 巴黎會徽。設計靈感源自象徵自由的「弗里吉亞帽 Phrygian cap」
，又稱「自由之帽」，是法國大革命的重要象徵</td>
</tr>
</table>
<h3>中華台北看點：</h3>
<div class="taiwan_introduction">
<img src="src/introduction/左箭頭.png" onclick="cot=pre(cot, '.list', '.photo')" class="button" alt="">
<div class="box">
<div class="list">
<div class="photo"><img src="src/introduction/戴資穎.jpg"></div>
<div class="photo"><img src="src/introduction/戴資穎2.jpg"></div>
<div class="photo"><img src="src/introduction/戴資穎3.jpg"></div>
<div class="photo"><img src="src/introduction/戴資穎4.jpg"></div>
<div class="photo"><img src="src/introduction/戴資穎5.jpg"></div>
</div>
</div>
<img src="src/introduction/右箭頭.png" onclick="cot=nex(cot, '.list', '.photo')" class="button" alt="">
<div class="taiwan_content">奧運最後一舞 <br>戴資穎：「就是打到2024年底的賽季結束，就算那時候還能打，我也想要休息了。」</div>
</div>
<div class="taiwan_introduction">
<div class="taiwan_content">巴黎奧運很可能是「麟洋配」最後一次搭檔！ <br>李洋曾在訪問對戴資穎退休一事做出回應，表示自己也不遠了！</div>
<img src="src/introduction/左箭頭.png" onclick="cot2=pre(cot2, '.list2', '.photo2')" class="button" alt="">
<div class="box">
<div class="list2">
<div class="photo2"><img src="src/introduction/麟洋.jpg"></div>
<div class="photo2"><img src="src/introduction/麟洋2.jpg"></div>
<div class="photo2"><img src="src/introduction/麟洋3.jpg"></div>
<div class="photo2"><img src="src/introduction/麟洋4.jpg"></div>
<div class="photo2"><img src="src/introduction/麟洋5.jpg"></div>
</div>
</div>
<img src="src/introduction/右箭頭.png" onclick="cot2=nex(cot2, '.list2', '.photo2')" class="button" alt="">
</div>
<div class="taiwan_introduction">
<img src="src/introduction/左箭頭.png" onclick="cot3=pre(cot3, '.list3', '.photo3')" class="button" alt="">
<div class="box">
<div class="list3">
<div class="photo3"><img src="src/introduction/桌球教父.jpg"></div>
<div class="photo3"><img src="src/introduction/桌球教父2.jpg"></div>
<div class="photo3"><img src="src/introduction/桌球教父3.jpg"></div>
<div class="photo3"><img src="src/introduction/桌球教父4.jpg"></div>
<div class="photo3"><img src="src/introduction/桌球教父5.jpg"></div>
</div>
</div>
<img src="src/introduction/右箭頭.png" onclick="cot3=nex(cot3, '.list3', '.photo3')" class="button" alt="">
<div class="taiwan_content">今年奧運很可能會是「桌球教父」的最後一舞 <br>台灣老將莊智淵曾在訪談中表達了巴黎奧運的參戰意願，更聲稱人生不該設限！</div>
</div>
<!--第三段(上一屆:東京奧運)-->
<h2 id="tokyo_olympic">上一屆:東京奧運</h2>
<img src="src/introduction/Miraitowa.png" alt="東京奧運吉祥物" id="Miraitowa" onclick="change_Miraitowa()">
<table id="score_table">
<caption><b>東京奧運成績-創新紀錄</b></caption>
<tr id="gold">
<th colspan="2"> 2 </th>
<td>
<ul>
<li>舉重女子59公斤級：郭婞淳</li>
<li>羽球男子雙打：李洋、王齊麟</li>
</ul>
</td>
</tr>
<tr id="silver">
<th colspan="2">4</th>
<td>
<ul>
<li>柔道男子60公斤(含)以下級：楊勇緯</li>
<li>競技體操男子鞍馬：李智凱</li>
<li>羽球女子單打：戴資穎</li>
<li>射箭男子團體賽：湯智鈞、魏均珩、鄧宇成</li>
</ul>
</td>
</tr>
<tr id="copper">
<th colspan="2">6</th>
<td>
<ul>
<li>桌球混合雙打：林昀儒、鄭怡靜</li>
<li>高爾夫男子個人比桿賽：潘政琮</li>
<li>跆拳道女子49-57公斤級：羅嘉翎</li>
<li>舉重女子64公斤級：陳玟卉</li>
<li>拳擊女子51公斤蠅量級：黃筱雯</li>
<li>空手道：文姿云</li>
</ul>
</td>
</tr>
</table>
<span id="here" style="float: right;"></span>
</div>
<div class="scroll_back"><a href="#top"><img src="src/goback.png" width="70px"></a></div>
</body>
</html>