forked from mollyleeyang/html-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathintroduction.html
378 lines (335 loc) · 21.9 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
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
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<meta name="description" content="Activitar Template">
<meta name="keywords" content="Activitar, unica, creative, html">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>川剧简介</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700,800,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap" rel="stylesheet">
<!-- Css Styles -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="css/elegant-icons.css" type="text/css">
<link rel="stylesheet" href="css/nice-select.css" type="text/css">
<link rel="stylesheet" href="css/owl.carousel.min.css" type="text/css">
<link rel="stylesheet" href="css/magnific-popup.css" type="text/css">
<link rel="stylesheet" href="css/slicknav.min.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<!-- Page Preloder
<div id="preloder">
<div class="loader"></div>
</div> -->
<!-- Header Section Begin -->
<header class="header-section header-normal" style="background: linear-gradient(0deg, #8B0000 30%, #000000 100%);">
<div class="container-fluid">
<div class="logo">
<a href="./index.html">
<img src="img/logo.png" alt="">
</a>
</div>
<div class="top-social">
<a href="#"><i class="fa fa-pinterest-p"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-pinterest-p"></i></a>
<a href="#"><i class="fa fa-youtube-play"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
</div>
<div class="container">
<div class="nav-menu">
<nav class="mainmenu mobile-menu">
<ul>
<li><a href="./index.html">首页</a></li>
<li class="active"><a href="./introduction.html">川剧简介</a></li>
<li><a href="./classic.html">经典剧目</a></li>
<li><a href="./specific.html">川剧文化专有项</a></li>
<li><a href="./contact.html">联系我们</a></li>
</ul>
</nav>
</div>
</div>
<div id="mobile-menu-wrap"></div>
</div>
</header>
<!-- Header End -->
<!-- Aboutus Section Begin -->
<section class="aboutus-section ">
<div class="container">
<div class="aboutus-page-text">
川剧在三百年的演进过程中，形成了深厚的艺术传统。
<br>
川剧有传统剧目和创作剧目六千余个，其中有源于宋元南戏的《荆钗记》、《刘智远》、《拜月记》、《杀狗记》，有来自元杂剧的《窦娥冤》、《汉宫秋》、《梧桐雨》、《赵氏孤儿》，有继承明传奇的众多传奇故事剧，有沿袭地方戏的大批历史演义剧，魏明伦、徐棻等人的剧作，如《情探》、《柴市节》、《是谁害了她》、《谭记儿》、《巴山秀才》、《死水微澜》等，乡土气息浓郁，更独具巴蜀文化的奇异风彩，素以博大精深的文化底蕴和雅俗共赏的文学品格享誉中国剧坛。
<br>
川剧集五种声腔于一体，有源于苏州昆曲的昆腔，典雅妙曼；有源于弋阳诸腔的高腔，高亢婉转；有源于徽调、汉调的胡琴，咿唔如语；有源于陕西秦腔的弹戏，激越沉雄；有源于四川本土的灯调，俚俗活脱，色彩斑斓而又统一于川剧的剧种风格。其中尤以帮、打、唱结合的高腔音乐最具特色，在中国戏曲高腔系统中堪称独步。
<br>
至上世纪中叶，川剧一直保持着一统四川戏剧舞台的局面。改革开放时期，群众的娱乐方式日趋多元化，观众分流已成为历史的必然。但川剧仍有广泛的群众基础。近些年来，民间职业川剧团呈方兴未艾之势，川剧玩友活动遍及四川广大城乡，足见其巨大的发展潜力。老作家马识途预言，只要有四川人在，川剧就不会消亡，实乃至理名言。川剧生成和发展于四川民间，是四川人聪明智慧和创造才能的结晶，最能体现巴蜀的社会风情和人文精神，它的艺术生命将与这块土地一样万古长青。
</div>
</div>
</div>
</section>
<!-- Aboutus Section End -->
<!-- Breadcrumb Section Begin -->
<section class="breadcrumb-section set-bg spad" data-setbg="img/contet/backgroud.jpg">
<div class="section-title">
<h2>川剧发展阶段</h2>
</div>
<div id="timeline">
<div class="dot" id="one">
<span></span>
<text>明朝</text>
</div>
<div class="dot" id="two">
<span></span>
<text>清朝</text>
</div>
<div class="dot" id="three">
<span></span>
<text>民国</text>
</div>
<div class="dot" id="four">
<span></span>
<text>现代</text>
</div>
<div class="inside"></div>
</div>
<!-- Modals -->
<article class='modal one'>
<h2>孕育期</h2>
<p>川剧的孕育期可以从清初上朔到明代以前，而孕育川剧的种子主要来自两个方面，一是历史上四川戏剧的深厚传统，二是清初从外省入川的诸多声腔。这二者的结合，便培育出具有巴蜀戏剧基因而又兼融多种声腔艺术的川剧。民国十三年（1924年）蜀伶杂志·班目·庆华班》记载，清雍正二年(1724年)有“著重高腔”的泸州戏班艺人二十余人来成都招生课徒，于同年成立庆华班，川剧名角康子林、康大蛮、周名超、尹华轩、饶玉山等皆为该班后期弟子。可见庆华班演唱的高腔同后世的川剧高腔有直接的传承关系，这是迄今有据可查的关于川剧戏班最早的记载。可以推想，泸州川剧戏班成立的时间至迟可以上朔到清代康熙后期。川剧是一个以高腔为代表性声腔的地方大剧种，川剧高腔在川剧五种声腔中一直处于主导地位。如果以四大徽班进京为京剧形成的标志作参照，清代康雍年间则可视为川剧的形成期。
</p>
<img src="img\content\孕育期.png" alt="相关图片描述">
</article>
<article class='modal two'>
<h2>成长期</h2>
<p>清代乾隆、嘉庆及道光年间
清代乾隆、嘉庆及道光年间是川剧的成长期，其间，昆腔、梆子、皮黄等外来声腔先后完成地方化演变，川剧高腔逐步以锣鼓为纽带与之联为一体，出现“二下锅”或“三下锅”的发展趋势，俗称为“风绞雪”。戏台和戏班也与日俱增，呈现出一派兴旺的景象。清代咸丰、同治年间，以大名班的崛起为标志，实现昆、高、胡、弹与本土灯调的结合，形成延续至今的多声腔体制。至此，川剧的艺术形态在经历百余年的成长期后趋于定型。大名班的“窝子戏”及其台柱演员岳春的拿手戏中，昆、高、胡、弹四种声腔的剧目均有可靠的文字记载，虽然大名班曾演过那些灯戏剧目，仍是一个未解之谜。但岳春及其弟子蒋润堂擅演灯戏则为业内人所熟知。咸丰以后，五腔同台的情况在各地已经比较普通，宣统元年《成都日报》刊登的戏报上，各戏班上演的川剧剧目，都是五腔齐全，证明那一时期五腔同台早已成为常态。
</p>
<img src="img\content\成长期.png" alt="相关图片描述">
</article>
<article class='modal three'>
<h2>成熟期-鼎盛期</h2>
<p>晚清戏曲改良至三庆会成立后的一段时间，一些蜀中文化名人如赵熙、黄吉安、尹仲锡、冉樵子、刘怀叙、刘师亮等先后参与川剧剧本的改编与创作，极大地提高了川剧剧目的文化品位；三庆会以悦来茶园为基地，集演出、研究、教学于一体，致力于演员素质的培养和演出质量的提高，有力地促进了川剧剧场艺术的发展；川剧时装戏的勃兴，开启了川剧由古典艺术向现代艺术过渡的变革历程，其在川剧发展史上的意义和影响，更是不可低估。这些，都标志着川剧已进入成熟期。
</p>
<p>
新中国成立后的前十七年，川剧在党和政府的领导下，改人、改制、改戏，通过推陈出新走向繁荣，出现为世人称道的“黄金时代”，是它发展的鼎盛期。</p>
<p>上世纪50年代
新中国成立之初，国家就对川剧艺术予以高度重视。50年代初，有关部门在组织成都市全市艺人学习时事政治、历史和党的文艺方针、政策的同时，对成都戏剧和曲艺的常演剧目、曲目进行了全面登记，对各剧团、戏班和玩友组织进行整顿、合并。成都最负盛名的川剧团“三庆会”在1950年底与其他三个剧团合组为大众川剧院。此外，整顿、组织各剧团和流散艺人先后组成了成都市实验川剧院、新光川剧团、群众川剧团、望江川剧团等具有一定艺术水平和规模和剧团。加上一些民间职业剧团，川剧演出活动普遍开展。这一时期，成都各剧团除了上演一定数量的传统剧目外，普遍排练演出以老解放区常演剧目为主的“解放戏”，如《三打祝家庄》《白毛女》《血泪仇》等。
</p>
<p>上世纪50至60年代之交
在上世纪50至60年代之交，迅速红遍大江南北，首次登上国际舞台，在国内外赢得了崇高的声誉。
从1951年开始，成都各川剧演出团体相继开展“改人、改戏、改制”的“三改”工作。在此基础上，有关部门组织编剧和演出人员对传统剧目进行发掘、记录和整理。这次工作整理出《反徐州》《杜十娘》《金霞配》《借亲配》等优秀剧目。通过近十年的改革探索和建设，广大川剧工作者的政治觉悟和文化艺术水平逐步提高，剧团体制得以改造，根除了一些艺人的不良生活习惯，荡涤了原有的恐怖、庸俗的舞台现象，开始了局部的音乐改革，并探索性地试行导演制度。
1952年10月，在北京举行了第一届全国戏曲观摩演出大会。成都演员刘成基、阳友鹤、周企何、陈书舫、戴雪如等参与组成了西南代表团。成都和重庆演员主演的川剧高腔《柳荫记》获得剧本奖，贾培之、周慕莲等获荣誉奖，《秋江》《评雪辨踪》获得二等奖，多名演员分别获得一、二、三等奖。这是川剧剧目演出历史上第一次荣获全国性奖励。
1957年，在党的“百花齐放，百家争鸣”方针的指导下，全国一度出现空前的文艺繁荣景象。这一年至次年，成都市川剧团进行了为期7个多月的全国巡回演出，先后在北京、天津、上海、徐州、西安等地上演了传统剧目《拉郎配》《一只鞋》《穆桂英》等和根据元代杂剧编的《谭记儿》等10出大戏和60多出折子戏。这是川剧产生以来第一次以最大覆盖面影响南北各地的观众。
1959年，四川省川剧院二团同成都市川剧团合组整编为成都市川剧院。1960年，四川省实验川剧团在成都成立。成都市川剧艺术力量得以集中壮大，成为川西地区地方戏曲的中坚。
1959年夏未秋初，该院演员陈书舫、杨淑英、李笑非、唐云峰等人参与组成中国川剧院，赴波兰、捷克斯洛伐克、保加利亚和民主德国进行访问演出。以成都演员担任主角的大戏《谭记儿》和折戏《秋江》《柜中緣》等，使东欧观众耳目一新，首次领略了川剧艺术的诱人魅力。成都川剧以它前所未有的风貌，献艺京华，历访江南，并首次登上国际舞台，形成新中国建立以来第一个鼎盛期。
</p>
<img src="img\content\鼎盛期.png" alt="相关图片描述">
</article>
<article class='modal four'>
<h2>转型期--三次转折</h2>
<ul class="list">
<li>第一次转折</li>
<p>第一次发生于清代光绪年间。鸦片战争之后，随着中国殖民地、半殖民地化进程的加快，政治腐败日益深重，社会风气每况愈下。川剧受其影响，有的戏班“渐染欧风”，“借自由之名，演出不规则之事”(《成都鞠部题名》)。晦谣晦盗之戏泛滥成灾，从而引发了“戏曲改良”的强烈呼声。
</p>
<li>第二次转折</li>
<p>
第二次发生于上世纪40年代。1946年夏，国民党反动派发动全面内战。从八年抗战的艰难境遇中解脱出来的四川人民．又堕入战乱和饥谨之中。川剧戏班难以维继，川剧艺人星流云散。1949年底四川解放，川剧方获新生。
</p>
<li>第三次转折</li>
<p>
第三次发生于“十年动乱”之际。这一时期，在“四人帮”文化专制主义的禁锢下，传统戏通通被赶下戏剧舞台，全国只能演八个样板戏。直到小平同志复出之后，才逐步恢复传统剧目的演出。</p>
<img src="img\content\转型期.png" alt="相关图片描述">
</article>
</section>
<!-- Breadcrumb End -->
<!-- Trainer Section Begin -->
<section class="trainer-section spad">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-title">
<h2>川剧专家</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="trainer-item">
<div class="ti-pic">
<img src="img/川剧专家/王道正.png" alt="">
<div class="ti-links">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-pinterest"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
<div class="trainer-text">
<h5>王道正</h5>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="trainer-item">
<div class="ti-pic">
<img src="img/川剧专家/徐棻.jpg" alt="">
<div class="ti-links">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-pinterest"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
<div class="trainer-text">
<h5>徐棻</h5>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="trainer-item">
<div class="ti-pic">
<img src="img/川剧专家/晓艇.png" alt="">
<div class="ti-links">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-pinterest"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
<div class="trainer-text">
<h5>晓艇</h5>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="trainer-item">
<div class="ti-pic">
<img src="img/川剧专家/陈智林.png" alt="">
<div class="ti-links">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-pinterest"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
<div class="trainer-text">
<h5>陈智林</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Trainer Section End -->
<!-- Js Plugins -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/mixitup.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/main.js"></script>
<script >
// 将你的JavaScript代码添加到这里
// 当第一个圆点被点击时，动画效果将内部元素宽度变为20%
$('.dot:nth-child(1)').click(function () {
$('.inside').animate({
'width': '20%'
}, 500);
});
// 当第二个圆点被点击时，动画效果将内部元素宽度变为40%
$('.dot:nth-child(2)').click(function () {
$('.inside').animate({
'width': '40%'
}, 500);
});
// 当第三个圆点被点击时，动画效果将内部元素宽度变为60%
$('.dot:nth-child(3)').click(function () {
$('.inside').animate({
'width': '60%'
}, 500);
});
// 当第四个圆点被点击时，动画效果将内部元素宽度变为80%
$('.dot:nth-child(4)').click(function () {
$('.inside').animate({
'width': '80%'
}, 500);
});
// 如果复选框#switch1未被选中
if ($('#switch1').not(':checked')) {
// 所有模态框被包装进一个新的.mask元素中
$('.modal').wrap('<div class="mask"></div>');
// .mask点击时，淡出自身，并动画将内部article元素向上移动至-100%
$('.mask').click(function () {
$(this).fadeOut(300);
$('.mask article').animate({
'top': '-100%'
}, 300);
});
// 圆点点击时，根据圆点id找到对应的mask内部article元素并显示
$('.dot').click(function () {
var modal = $(this).attr('id');
$('.mask').has('article.' + modal).fadeIn(300);
$('.mask article.' + modal).fadeIn(0).animate({
'top': '10%'
}, 300);
});
}
// 复选框#switch1的点击事件
$("#switch1").click(function () {
// 如果复选框被选中
if ($('#switch1').is(':checked')) {
// 解除所有模态框的.mask包装
$('.modal').unwrap('<div class="mask"></div>');
// 隐藏所有模态框并添加nobox类
$('.modal').hide();
$('.modal').addClass('nobox');
// 圆点点击时，隐藏所有nobox类article元素，然后只显示对应的
$('.dot').click(function () {
var modal = $(this).attr('id');
$('article.nobox').hide();
$('article.nobox.' + modal).fadeIn(200);
});
} else {
// 如果复选框未被选中
// 移除所有article元素的nobox类
$('article').removeClass("nobox");
// 重新包装.modal元素进.mask
$('.modal').wrap('<div class="mask"></div>');
// 恢复.mask点击时的淡出和article元素动画效果
$('.mask').click(function () {
$(this).fadeOut(300);
$('.mask article').animate({
'top': '-100%'
}, 300);
});
// 恢复圆点点击时的模态框显示逻辑
$('.dot').click(function () {
var modal = $(this).attr('id');
$('.mask').has('article.' + modal).fadeIn(300);
$('.mask article.' + modal).fadeIn(0).animate({
'top': '10%'
}, 300);
});
}
});
document.addEventListener('DOMContentLoaded', function () {
var bgSection = document.querySelector('.breadcrumb-section');
if (bgSection) {
var bgImage = bgSection.getAttribute('data-setbg');
bgSection.style.backgroundImage = 'url(' + bgImage + ')';
}
});
document.addEventListener('DOMContentLoaded', function () {
var bgSection = document.querySelector('.home7-section');
if (bgSection) {
var bgImage = bgSection.getAttribute('data-setbg');
bgSection.style.backgroundImage = 'url(' + bgImage + ')';
}
});
</script>
</body>
</html>