-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsj.html
251 lines (238 loc) · 10.2 KB
/
sj.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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Site-Enter" content="revealTrans(Duration=2.0,Transition=7)">
<meta http-equiv="Site-Exit" content="revealTrans(Duration=2.0,Transition=7)">
<title>校园风采</title>
<link rel = "stylesheet" type = "text/css" href = "css/scene.css">
<style>
/* 打开和关闭手风琴面板的样式 */
.accordion {
margin-top: 40px;
margin-left: 180px;
border-radius: 40px; /*这句就是重点，让边框变为圆角*/
background: white;
box-shadow: 3px 2px 80px rgba(0, 0, 0, 0.2);
cursor: pointer;
padding: 18px;
width: 800px;
height: 300px;
text-align: center;
border: none;
outline: none;
transition: 0.4s;
font-size: 60px;
font-family: "仿宋";
font-weight: bold;
}
.accordion img{
margin-top: -110px;
margin-left: -800px;
box-shadow: 3px 2px 80px rgba(0, 0, 0, 0.2);
border-radius: 40px; /*这句就是重点，让边框变为圆角*/
}
.accordion p{
font-size: 40px;
font-weight: 400;
height: 30px;
width: 200px;
margin-top: -30px;
margin-left: 420px;
}
/* 为手风琴面板设计样式。 默认隐藏 */
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
margin-left: 140px;
transition: max-height 0.2s ease-out;
font-size: 50px;
}
.panel p{
margin-top: 30px;
font-size: 50px;
font-family: "仿宋";
}
/* 设置 +、- 标志 */
.accordion:after {
content: '\002B'; /* Unicode 字符 + 号 */
color: #777;
font-weight: bold;
font-size: 80px;
float: right;
margin-left: 5px;
margin-top: -150px;
}
.active:after {
content: "\2212"; /* Unicode 字符 - 号 */
}
</style>
</head>
<body>
<div id = "nav">
<div class = "nav-center">
<div class = "logo">财大美食</div>
<ul class = "link">
<li><a href = "index.html" title = "网站首页">返回</a></li>
</ul>
</div>
</div>
<button class="accordion">
<div id = "font">三明治</div>
<img src = "img/sj1.jpeg" width = 200px height = 200px>
<p>1191人推荐</p>
</button>
<div class="panel">
<p>推荐指数：</p>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<p>简介：三明治中两片软糯飘香的面包，夹着鲜香多汁的肉片、鸡蛋和各种新鲜蔬菜，一口咬下去各种美味在口中辗转，兼顾了美味、卖相的同时，为同学们带来了丰富的营养。</p>
<p>地点：山东财经大学圣井校区一餐二楼</p>
<p>售价：8元</p>
</div>
<button class="accordion">
<div id = "font">麻辣香锅</div>
<img src = "img/sj2.jpg" width = 200px height = 200px>
<p>1148人推荐</p>
</button>
<div class="panel">
<p>推荐指数：</p>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<p>简介：冬天的气息逐渐蔓延，冷气悄悄四溢，这时候吃上一碗麻辣香锅最舒服不过啦！那发端于唇齿之间的甜辣，穿过舌尖，给全身心传递着温暖的信号。在微寒的秋日细细品味，味道仍旧美好。</p>
<p>地点：山东财经大学圣井校区二餐一楼</p>
<p>售价：1.78元/500g</p>
</div>
<button class="accordion">
<div id = "font">大盘鸡</div>
<img src = "img/sj3.jpg" width = 200px height = 200px>
<p>1107人推荐</p>
</button>
<div class="panel">
<p>推荐指数：</p>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<p>简介：嫩白的鸡肉和酥软的土豆，香味芬香溢鼻，肉质软嫩爽口，滑而不腻，土豆绵糯入味，入口即化，是土豆和鸡肉的完美结合。手扯的宽面配上红而不辣的灵魂汤汁，食物原始的味道在味蕾中绽开，鲜香无比。</p>
<p>地点：山东财经大学圣井校区民族餐厅</p>
<p>售价：12元</p>
</div>
<button class="accordion">
<div id = "font">金汤肥牛米线</div>
<img src = "img/sj4.jpeg" width = 200px height = 200px>
<p>1083人推荐</p>
</button>
<div class="panel">
<p>推荐指数：</p>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<p>简介：晶莹剔透的米线浸在汤中，完全吸收了汤汁和肉香的米线，入口是极致的美味。鲜香四溢，醇厚浓香的口感令人忍不住要大口大口地唆吸面条。在降温天，汤面的暖意最能冲淡体内的寒意。</p>
<p>地点：山东财经大学圣井校区二餐一楼</p>
<p>售价：10元</p>
</div>
<button class="accordion">
<div id = "font">鸡公煲</div>
<img src = "img/sj5.jpeg" width = 200px height = 200px>
<p>984人推荐</p>
</button>
<div class="panel">
<p>推荐指数：</p>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<p>简介：鸡公煲的中辣是汤拌饭刚刚好的那种，肉质鲜嫩可口，米饭粒粒饱满，当又热又辣的鸡汤汁淋上香喷喷白米饭，简直绝了！鸡公煲里的芹菜和洋葱都很软糯，真的很好吃！</p>
<p>地点：山东财经大学圣井校区二餐二楼</p>
<p>售价：12元</p>
</div>
<button class="accordion">
<div id = "font">烤鸭拌饭</div>
<img src = "img/sj6.jpeg" width = 200px height = 200px>
<p>937人推荐</p>
</button>
<div class="panel">
<p>推荐指数：</p>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<p>简介：这里的烤鸭拌饭，真的很嫩很入味！酸辣土豆丝开胃爽口，烤鸭肉很多，肉质嫩嫩的，烤鸭皮烤得焦香焦香，咬一口脆脆的，再浇上黑胡椒酱汁，搭配酸酸甜甜的梅子酱，真的太香了！</p>
<p>地点：山东财经大学圣井校区二餐二楼</p>
<p>售价：10元</p>
</div>
<button class="accordion">
<div id = "font">生煎</div>
<img src = "img/sj7.jpg" width = 200px height = 200px>
<p>914人推荐</p>
</button>
<div class="panel">
<p>推荐指数：</p>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<p>简介：这里的生煎实在令我惊艳。雪白松软的面皮，饱满紧实的肉馅，香浓滚烫的汤汁，焦香酥脆带着芝麻香气的底板。一口咬下去，汤汁涌出，伴着酥脆的卡嚓声，真是“皮薄”、“肉鲜”、“馅多”、“汁香”。</p>
<p>地点：山东财经大学圣井校区三餐一楼</p>
<p>售价：6元</p>
</div>
<button class="accordion">
<div id = "font">炸鸡</div>
<img src = "img/sj8.jpg" width = 200px height = 200px>
<p>887人推荐</p>
</button>
<div class="panel">
<p>推荐指数：</p>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<p>简介：金黄香脆的外皮，鲜嫩多汁的鸡肉，软软糯糯有嚼劲的年糕，再淋上浓郁的酱汁。美味的炸鸡入口回味无穷，香味扑鼻，味道鲜美，炸鸡表皮酥软鸡肉又滑嫩，尝过的都说美味。</p>
<p>地点：山东财经大学圣井校区二餐一楼</p>
<p>售价：15元</p>
</div>
<button class="accordion">
<div id = "font">牛杂面</div>
<img src = "img/sj9.jpg" width = 200px height = 200px>
<p>859人推荐</p>
</button>
<div class="panel">
<p>推荐指数：</p>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<img src = "img/star.png" width = 80px height = 80px>
<p>简介：一碗面，有牛杂、青菜、豆芽、花生和黄瓜，菜品的种类多样，而且青菜吃起来非常爽口，牛杂的种类也比较丰富。面条筋道弹牙，面的口感恰到好处。汤料混合了麻汁和牛杂汤，吃完面后回味无穷。</p>
<p>地点：山东财经大学圣井校区二餐二楼</p>
<p>售价：9元</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
</body>
</html>