forked from bedimcode/responsive-travel-website
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathacient-buildings.html
362 lines (301 loc) · 19.8 KB
/
acient-buildings.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
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="assets/img/favicon.png" type="image/png">
<!--=============== REMIXICONS ===============-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
<!--=============== SWIPER CSS ===============-->
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
<!--=============== CSS ===============-->
<link rel="stylesheet" href="assets/css/styles.css">
<title>九章—中国古代数学成就科普平台</title>
</head>
<body>
<header class="header" id="header">
<nav class="nav container">
<a href="index.html" class="nav__logo"><img src="assets/img/transparent-logo.png"></a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">
<a href="index.html" class="nav__link">首页</a>
</li>
<li class="nav__item">
<a href="achievements.html" class="nav__link active-link">数学成就</a>
</li>
<li class="nav__item">
<a href="Mathematicians.html" class="nav__link">杰出科学家</a>
</li>
<li class="nav__item">
<a href="books.html" class="nav__link">数学著作</a>
</li>
<li class="nav__item">
<a href="culture.html" class="nav__link">数学文化</a>
</li>
<li class="nav__item">
<a href="interaction.html" class="nav__link">古今互动</a>
</li>
<li class="nav__item">
<a href="https://chatai.tblu.xyz" class="nav__link">对话数学</a>
</li>
<li class="nav__item">
<a href="about.html" class="nav__link">关于</a>
</li>
<div class="nav__dark">
<!-- Theme change button -->
<!-- <span class="change-theme-name">深色模式</span> -->
<i class="ri-moon-line change-theme" id="theme-button"></i>
</div>
</ul>
<i class="ri-close-line nav__close" id="nav-close"></i>
</div>
<div class="nav__toggle" id="nav-toggle">
<i class="ri-function-line"></i>
</div>
</nav>
</header>
<main class="main">
<!--==================== BANNER ====================-->
<section class="home" id="home">
<img src="assets\img\古建筑中的奥秘3.jpg" class="home__img"></img>
<div class="home__container container grid">
<!-- <div class="home__social">
<a href="https://www.facebook.com/" target="_blank" class="home__social-link">
<i class="ri-facebook-box-fill"></i>
</a>
<a href="https://www.instagram.com/" target="_blank" class="home__social-link">
<i class="ri-instagram-fill"></i>
</a>
<a href="https://twitter.com/" target="_blank" class="home__social-link">
<i class="ri-twitter-fill"></i>
</a>
</div> -->
</div>
</section>
<!-- <section>
<div>
<img src="assets/img/part_03.png">
<img src="assets/img/part_04.png">
<img src="assets/img/part_05.png">
<img src="assets/img/part_06.png">
</div>
</section> -->
<!--==================== EXPERIENCE ====================-->
<section class="experience section">
<h2 class="section__title" style="font-size:80px">探索古建筑的数学奥秘</h2>
<div class="section__title" style="font-size:larger;padding-left:10%;padding-right:10%">
<p>在世界的历史长河中，就古建筑而言，最具有视觉美感的，毫无疑问是源远流长、绵延不绝的中国古建筑。建筑的美学可以体现在方方面面，比如造型、规模、材料、色彩、构造、细部雕琢等，在这些美学的原动力中，完全来源于人类智力活动的，唯有蕴含其中的数学密码：形状、比例、尺寸等。古希腊数学家毕达哥拉斯说过：万物皆数，数支配着宇宙；而大诗人李白的诗句：“危楼高百尺，手可摘星辰”，表述了他对建筑、数学以及宇宙星辰的认知。
</p>
</div>
<h2 class="section__title" style="font-size:50px">从一幅古画说起</h2>
<div class="section__title" style="font-size:larger;padding-left:10%;padding-right:10%">
<p>这是宋代著名画家和书法家、宋徽宗赵佶的作品《瑞鹤图》，描绘了汴梁宣德门外仙鹤群舞的祥和气氛。除了仙鹤之外，画家采用工笔写实的画法、鸟瞰的视角，对建筑进行了细致的描摹，渲染层次分明、配景丰富多彩。从建筑设计者角度来看，这可视为一幅加盖红章的宋代建筑屋盖立面图。这幅画也被电视剧《大宋宫词》选作片头，展现了大宋建筑的风格特点。
</p>
</div>
<div class="experience__container container grid">
<div class="experience__content grid">
<div class="experience__data">
<h2 class="experience__number"></h2>
<span class="experience__description"> </span>
</div>
<div class="experience__data">
<h2 class="experience__number"></h2>
<span class="experience__description"></span>
</div>
<div class="experience__data">
<h2 class="experience__number"></h2>
<span class="experience__description"></span>
</div>
</div>
<div class="experience__img grid">
<div class="experience__overlay">
<img src="assets\img\瑞鹤图3.jpg" alt="" class="experience__img-one">
</div>
<div class="experience__overlay">
<img src="assets\img\瑞鹤图2.jpg" alt="" class="experience__img-two">
</div>
</div>
</div>
</section>
</div>
<!--==================== EXPERIENCE ====================-->
<h2 class="section__title" style="font-size:50px">屋顶造型与最速降线</h2>
<div class="section__title" style="font-size:larger;padding-left:10%;padding-right:10%">
<p>要全面具体地了解宋代建筑与数学的关系，单从画作去了解是不够的，需要结合工程营造的历史资料和现存的古建筑实物进行更深入的剖析。我们主要选取现存宋代建筑代表作——晋祠圣母殿、宋代李诫（一说为李诚）所著的《营造法式》等古建资料作为研究对象。作为整个建筑冠冕的屋面，建筑造型艺术发挥得淋漓尽致。我们的研究着重分析两个数据：屋面的圆心角A（° ）、坡屋面高度半径H/半坡宽度W。
</p>
</div>
<div class="experience__container container grid">
<div class="experience__content grid">
<div class="experience__data">
<h2 class="experience__number"></h2>
<span class="experience__description"> </span>
</div>
<div class="experience__data">
<h2 class="experience__number"></h2>
<span class="experience__description"></span>
</div>
<div class="experience__data">
<h2 class="experience__number"></h2>
<span class="experience__description"></span>
</div>
</div>
<div class="experience__img grid">
<div class="experience__overlay">
<img src="assets\img\圣母殿1.png" alt="" class="experience__img-one">
</div>
<div class="experience__overlay">
<img src="assets\img\圣母殿2.png" alt="" class="experience__img-two">
</div>
</div>
</div>
</section>
<!--==================== EXPERIENCE ====================-->
<div class="section__title" style="font-size:larger;padding-left:10%;padding-right:10%">
<p>从对屋顶曲线进行数学拟合时，却发现圆弧的拟合度并非最佳。那么什么曲线的拟合度最好？经过对多个屋面曲线的模拟尝试，可以看出绿色的曲线是最佳的。这条曲线是摆线或旋轮线，也叫最速降线<br>就是在起点与终点确定并且忽略阻力的情形下，物体下滑所需时间最短的曲线。屋面除了审美需求，根本用途是期望能以最快的速度排水<br>最速降线的理论，是在1696年才由牛顿、伯努利等欧洲的数学家们整明白的，古代的中国工匠们不可能知晓，他们模拟的是圆弧，但是在配合举架的模数确定相关尺寸时，恰好拟合成了最速降线<br>同时，屋面曲线在檐口处的切线基本水平，使水流排出屋面后，以平抛的抛物线离开屋面，这不得不说又体现了工匠们的智慧<br>正是这种做法，保证了屋面不积水并且能够把雨水排到最远，以便更好地保护房屋的基础（地盘）<br>我们以拟合屋面的数学方程的方式，得到最速降线的参数方程：x=R(θ-sinθ), y=R(1-cosθ)。平抛抛物线方程：x²=-2py(p>0, x≥0)<br>由此我们也得到了一个数学密码：最速降线和平抛抛物线。斗栱与三角不变形原理
</p>
</div>
<div class="experience__container container grid">
<div class="experience__content grid">
<div class="experience__data">
<h2 class="experience__number"></h2>
<span class="experience__description"> </span>
</div>
<div class="experience__data">
<h2 class="experience__number"></h2>
<span class="experience__description"></span>
</div>
<div class="experience__data">
<h2 class="experience__number"></h2>
<span class="experience__description"></span>
</div>
</div>
<div class="experience__img grid">
<div class="experience__overlay">
<img src="assets\img\圣母殿3.png" alt="" class="experience__img-one">
</div>
<div class="experience__overlay">
<img src="assets\img\圣母殿4.png" alt="" class="experience__img-two">
</div>
</div>
</div>
</section>
<!--==================== EXPERIENCE ====================-->
<h2 class="section__title" style="font-size:50px">古代建筑设计与画法几何</h2>
<div class="section__title" style="font-size:larger;padding-left:10%;padding-right:10%">
<p>古代房屋设计施工一体化，统筹营造者同时也是设计者<br>比如紫禁城设计师蒯祥，建筑设计世家“样式雷”等等，古代建筑设计者采用了一些与现代建筑设计不同的表达方式。现代建筑设计采用的是绝对尺寸与模数制，图纸上注明绘图比例<br>而《营造法式》采用的是“材栔分”制，《清式营造则例》采用的是“斗口”制<br>这两种营造制度，直接以主材尺寸作为绘图基数，其它尺寸均为基数的倍数关系<br>这样一来，不同规制尺度的建筑，相当于用不同的比例尺对图纸进行放缩，模型或图纸就有了通用性<br>这是古建筑的第二个数学密码：“材栔分”制和“斗口”制的比例尺作用。<br>现代制图采用平立剖图、轴测图、透视图绘制，《营造法式》上为了表达清楚层层叠叠的斗栱关系，创造了一种特殊的绘图法：<br>变角透视图。这是一种介于轴测图和透视图之间的绘图法，<br>从技术上说，并不符合画法几何的数学投影关系，而是类似于现代广角摄影术。<br>以此法绘制的图样，兼顾了实用性和可读性，这是一种务实的智慧。这是古建筑的第三个数学密码：变角透视法。
</p>
</div>
<div class="experience__container container grid">
<div class="experience__content grid">
<div class="experience__data">
<h2 class="experience__number"></h2>
<span class="experience__description"> </span>
</div>
<div class="experience__data">
<h2 class="experience__number"></h2>
<span class="experience__description"></span>
</div>
<div class="experience__data">
<h2 class="experience__number"></h2>
<span class="experience__description"></span>
</div>
</div>
<div class="experience__img grid">
<div class="experience__overlay">
<img src="assets\img\几何3.jpg" alt="" class="experience__img-one">
</div>
<div class="experience__overlay">
<img src="assets\img\几何4.jpg" alt="" class="experience__img-two">
</div>
</div>
<a href="#" class="button">Reserve a place</a>
</div>
</section>
<!--==================== FOOTER ====================-->
<footer class="footer section">
<div class="footer__container container grid">
<div class="footer__content grid">
<div class="footer__data">
<h3 class="footer__title"><b>九章</b></h3>
<p class="footer__description"> 中国古代 <br> 数学成就科普平台 </p>
<div>
<a href="https://www.facebook.com/" target="_blank" class="footer__social">
<i class="ri-facebook-box-fill"></i>
</a>
<a href="https://twitter.com/" target="_blank" class="footer__social">
<i class="ri-twitter-fill"></i>
</a>
<a href="https://www.instagram.com/" target="_blank" class="footer__social">
<i class="ri-instagram-fill"></i>
</a>
<a href="https://www.youtube.com/" target="_blank" class="footer__social">
<i class="ri-youtube-fill"></i>
</a>
</div>
</div>
<div class="footer__data">
<h3 class="footer__subtitle">关于</h3>
<ul>
<li class="footer__item">
<a href="about.html" class="footer__link">关于我们</a>
</li>
<li class="footer__item">
<a href="" class="footer__link">特色</a>
</li>
<li class="footer__item">
<a href="" class="footer__link">最新动态</a>
</li>
</ul>
</div>
<div class="footer__data">
<h3 class="footer__subtitle">团队</h3>
<ul>
<li class="footer__item">
<a href="" class="footer__link">团队成员</a>
</li>
<li class="footer__item">
<a href="" class="footer__link">赞助我们</a>
</li>
<li class="footer__item">
<a href="" class="footer__link">加入我们</a>
</li>
</ul>
</div>
<div class="footer__data">
<h3 class="footer__subtitle">帮助与反馈</h3>
<ul>
<li class="footer__item">
<a href="" class="footer__link">FAQs</a>
</li>
<li class="footer__item">
<a href="" class="footer__link">服务中心</a>
</li>
<li class="footer__item">
<a href="" class="footer__link">联系我们</a>
</li>
</ul>
</div>
</div>
<div class="footer__rights">
<p class="footer__copy">© 2023 <b>占位符</b>. All rigths reserved.</p>
<div class="footer__terms">
<a href="#" class="footer__terms-link">服务协议</a>
<a href="#" class="footer__terms-link">隐私政策</a>
</div>
</div>
</div>
</footer>
<!--========== SCROLL UP ==========-->
<a href="#" class="scrollup" id="scroll-up">
<i class="ri-arrow-up-line scrollup__icon"></i>
</a>
<!--=============== SCROLL REVEAL===============-->
<script src="assets/js/scrollreveal.min.js"></script>
<!--=============== SWIPER JS ===============-->
<script src="assets/js/swiper-bundle.min.js"></script>
<!--=============== MAIN JS ===============-->
<script src="assets/js/main.js"></script>
</div>
</body>
</html>