-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
179 lines (167 loc) · 10.1 KB
/
about.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>關於我們|四秀仔</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="icon" type="image/png" href="img/favicon-1.png" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<link rel="stylesheet" href="css/style.css">
<style>
</style>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light px-3 about-nav" style="background:#ECB88A;">
<a class="navbar-brand" href="index.html"></a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId"
aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0 ">
<li class="nav-item active px-2">
<a class="nav-link" href="index.html">首頁 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active px-2">
<a class="nav-link " href="#">關於我們</a>
</li>
<li class="nav-item active dropdown px-2">
<a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">產品列表</a>
<div class="dropdown-menu" aria-labelledby="dropdownId">
<a class="dropdown-item" href="nostalgic.html">懷舊系列</a>
<a class="dropdown-item" href="festival.html">年節系列</a>
<a class="dropdown-item" href="dense.html">綿密系列</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0 ">
<input class="form-control mr-sm-2" type="text" placeholder="輸入產品名稱">
<button class="btn btn-outline-success my-2 my-sm-0 mx-auto" type="submit">搜尋</button>
<a class="login ml-3" href="login.html">會員登入</a>
<a class="car" href="#" data-toggle="modal" data-target="#exampleModalCenter"> <i
class="fas fa-shopping-cart mx-3"></i></a>
</form>
</div>
</nav>
<!-- ------------------ -->
<div class="about_main">
<div class="d-flex box0" id="box">
<div class="wow slideInLeft slow top1">
<img src="img/四秀黑-1.svg" class="lazyload" alt="">
</div>
<div class="wow slideInRight slow top1-1">
<h1>四秀仔由來</h1>
<br>
<p> 華語的「零食」，臺灣閩南語說成 sì-siù(-á)，漢字寫成「四秀（仔）」。「四秀（仔）」是文獻中最常見的用字。《臺日大辭典》以及臺灣閩南語辭典中幾乎都這麼寫，主要是發音吻合，意思上也
說得通。數字「四」有多的意思（如「四界」sì-kè/ sì-kuè、「四散」sì-suànn、「滿四山」muá-sì-suann
等，都有「到處」、「遍布」等表示「多」的意思），而「秀」有美好的含意（如「秀麗」、「清秀」），所以「四秀」可
以解釋成很多種好吃的東西。偶爾也看到有人把 sì-siù(-á)寫成「時饈」或「束脩」，但這些寫法不但在發音上和
sì-siù(-á)不相合，在意義上也不相符。相較之下，「四秀（仔）」的寫法容易見字發音，意義上也不難理解，又是常用漢字，
方便學習使用，所以獲選為推薦用字。</p>
</div>
</div>
<div class="d-flex box0">
<div class= "top2">
<div class="top2-0 wow slideInLeft slow">
<h2>「零食」與「庶饈」</h2>
<br>
<p> 白話文「零食、零嘴、零吃」，台人曰「庶饈」，台教典「四秀仔、四獸」，「庶饈」、「四秀仔、四獸」音近混淆。
「零食、零嘴」釋義「正餐以外之零星食品」，白話文新創，無典出。<br>
「四秀仔、四獸仔」釋義「零食」，台教典新創，無典出。<br>
「庶饈」釋義「眾多美食佳餚」，典出《蘇東坡詩》。<br>
「庶」釋義「眾多」，典出《詩經》。<br>
「饈」釋義「美食佳餚」，典出《玉篇》「饈」「脩」形似義近筆誤。<br>
「四秀仔、四獸」，形音義不知所云。<br>
「庶」《彙音寶鑒》p513眾也多也，時居切，三聲。<br>
「四」《彙音寶鑒》p513數名二二為四，時居切，三聲。<br>
「秀」《彙音寶鑒》p224秀美秀才，時丩切，三聲。<br>
「饈」《彙音寶鑒》p536珍饈美味，時丩切，一聲。<br>
清酌庶饈：庶，眾多。饈，味美的食品。清酌庶饈指清醇的美酒與多種美食，為奠祭的供品。
《宋˙蘇軾˙送張龍公祝文》：「謹以清酌庶饈之奠，敢昭告于昭靈侯張公之神。」
</p>
</div>
<div class="wow slideInRight slow top2-1">
<img src="img/34567.jpg" class="lazyload" alt="">
</div>
</div>
</div>
<div class="d-flex box0">
<div class="wow slideInLeft slow top3">
<img src="img/124693719.jpg" class="lazyload" alt="">
</div>
<div class="wow slideInRight slow top1-1">
<h2>束ㄕㄨˋ脩ㄒㄧㄡ</h2>
<br>
<p> 古人以肉脯十條紮成一束，作為拜見老師最起碼的禮物。語出《論語·述而》：「自行束脩以上，吾未嘗無誨焉。」今用以稱老師的酬金。《初刻拍案驚奇·卷一○》：「當下開了拜匣，稱出束脩銀伍錢，做個封筒，封了。」《文明小史·第二一回》：「至於束脩多寡，並不計較。」也作「束修」。
</p>
</div>
</div>
<div class="d-flex box0">
<div class="wow slideInLeft slow top4">
<img src="img/1122.jpg" class="lazyload" alt="">
<div class="wow zoomIn slow top4-1">
<div class="top4-1-2"><em>四秀仔</em><span>即是古早味的零食商店</span><br>現今超商已漸漸失去古早餅乾的味道</div>
<br>
<div class="top4-1-3">來四秀找回兒時的記憶<br>憶起開始想當年!</div>
</div>
</div>
</div>
</div>
<!-- <div class="parallax-window" data-parallax="scroll" data-image-src="images/1122.jpg"></div>
<div class="about_text"><h3>四秀仔就是個賣古早味零食的商店，現在的便利超商太多，古早味童年的感覺就少了一味，而大家最念舊的依然是巧克力的存在。</h3></div>
<div class="parallax-window2" data-parallax="scroll" data-image-src="images/巧克力工廠-1.jpg"></div> -->
<!-- ----------------- -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
<script src="plugin/wow.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
<script>
$(window).width(function () {
var x = $(window).width();
console.log(x);
if (x < 960) {
$(".top1").removeClass("slideInLeft").addClass("fadeInDown");
$(".top1-1").removeClass("wow");
$(".top2-1").removeClass("wow");
$(".top2").removeClass("wow");
$(".top2-0").removeClass("wow");
$(".top3").removeClass("wow");
$(".top4").removeClass("wow");
$(".top4-1").removeClass("wow");
}
});
var lastscrollTop;
$(window).scroll(function () {
let scrollTop = $(this).scrollTop();
let scrollPage = $("body").height();
if (scrollTop > lastscrollTop) {
$("nav").addClass("active");
} else {
$("nav").removeClass("active");
}
lastscrollTop = scrollTop;
});
new WOW().init();
$("img.lazyload").lazyload();
</script>
</body>
</html>