前不久，曾经的一位朋友找到我，让我帮他弄一个简单的网页设计，起初打算拒绝来着，主要是因为真的没有自己写过html+CSS+javascript 构成的网页，不过后来想想又决定挑战一下自己，之前基本没接触过网页设计三剑客，最多也是再使用爬虫解析网页的时候看的比较多一点。
1.经历
网页设计的内容是做一个简单的有关戏剧的网页，只要通过本地访问就可以，于是乎，说干就干，从下午开始朋友交给我任务，到晚上夜里，弄完之后是这个样子的：
当朋友问我进度如何的时候，我都没好意思把张图片发给他。
真的被自己丑到了。
很不甘心，第二天早上起来的很早，就是为了不让朋友失望，
于是又干了一天，似乎终于有了点样子。
当我第二天收工之后，看着自己做的网页，突然有点欣慰了。
之后又经过了半天的时间，完成了分页的设计。
终于可以给朋友答复了。
2.总结
以前也想过要做网页设计，但是只是看着一些文档，看多了就烦了，都是三分钟热度，这次，突然带着任务感去做了自己并不擅长的，尽管过程真的痛苦，但是还是值得的，因为再短短3天里面就掌握了一些网页设计的基本语法，效率感人啊。
这种学习方法确实有些急功近利，但真的很有效，或许有的时候真的需要对自己狠一点。
虽然写的有些简陋，也不求对读者有什么帮助，就是想记录一下自己的小突破。
3.代码
- 文件目录如下
其中file中存放着一些网页制作需要用到的图片。 - index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>戏曲网</title>
<link rel="stylesheet" type=text/css href="../static/css/index.css">
</head>
<body id="example1">
<div class="contain_logo" >
<div class="logo">
<img src="../static/file/脸谱.jpg" style="opacity: 0.8" width="858px" height="300px" alt="">
</div>
<div class="title">
<p class="title_text" style="font-family: 新宋体;">戏曲魅影</p>
</div>
</div>
<div class="contain_column" >
<ul style="font-family: 黑体; " class="contain_ul">
<li >
<a id="a11" href="index.html" >首 页</a>
</li>
<li>
<a href="javascript:void(0)" id="hidden_a">经典剧目▼</a>
<div id="hidden1" style="display:none" class="contain_show_hidden1">
<a href="" class="a1">霸王别姬</a><br>
<a href="" class="a1">牡丹亭</a><br>
<a href="" class="a1">西厢记</a><br>
<a href="" class="a1">白蛇传</a><br>
<a href="" class="a1">穆桂英挂帅</a><br>
<a href="" class="a1">梁山伯与祝英台</a>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_b">名角介绍▼</a>
<div id="hidden2" style="display:none" class="contain_show_hidden2">
<a href="名角介绍/meilanfang.html" class="a2">梅兰芳</a><br>
<a href="名角介绍/malan.html" class="a2">马兰</a><br>
<a href="名角介绍/shangxiaoyun.html" class="a2">尚小云</a><br>
<a href="名角介绍/chengyanqiu.html" class="a2">程砚秋</a><br>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_c">剧种介绍▼</a>
<div id="hidden3" style="display:none" class="contain_show_hidden3">
<a href="剧种介绍/京.html" class="a3">京剧</a><br>
<a href="剧种介绍/川.html" class="a3">川剧</a><br>
<a href="剧种介绍/粤.html" class="a3">粤剧</a><br>
<a href="剧种介绍/昆.html" class="a3">昆剧</a><br>
<a href="剧种介绍/豫.html" class="a3">豫剧</a><br>
<a href="剧种介绍/淮.html" class="a3">淮剧</a><br>
</div>
</li>
</ul>
</div>
<div class="contain_content" style="background-image: url(../static/file/content背景.jpg);background-repeat: no-repeat; background-size: 100% 100%" >
<div class="contain_content1">
<div class="contain_text">
<h2 style="font-size: 50px; color: antiquewhite">国粹--京剧</h2><br>
<p style="font-size: 20px; color: white">
京剧舞台艺术在文学、表演、音乐、唱腔、锣鼓、化妆、脸谱等各个方面，
通过无数艺人的长期舞台实践，构成了一套互相制约、相得益彰的格律化和规范化的程式。
它作为创造舞台形象的艺术手段是十分丰富的，而用法又是十分严格的。不能驾驭这些程式，
就无法完成京剧舞台艺术的创造。由于京剧在形成之初，便进入了宫廷，使它的发育成长不同于地方剧种。
要求它所要表现的生活领域更宽，所要塑造的人物类型更多，对它的技艺的全面性、完整性也要求得更严，
对它创造舞台形象的美学要求也更高。当然，同时也相应地使它的民间乡土气息减弱，纯朴、粗犷的风格特色相对淡薄。
因而，它的表演艺术更趋于虚实结合的表现手法，最大限度地超脱了舞台空间和时间的限制，以达到“以形传神，形神兼备”的艺术境界。
表演上要求精致细腻，处处入戏；唱腔上要求悠扬委婉，声情并茂；武戏则不以火爆勇猛取胜，而以“武戏文唱”见佳。
</p>
</div>
<div class="contain_image">
<img src="../static/file/霸王别姬.jpg" width="480px" height="300px" alt="">
</div>
</div>
<div class="contain_content1">
<div class="contain_image1">
<img src="../static/file/白蛇传.jpg" alt="">
</div>
<div class="contain_text1">
<h2 style="font-size: 50px; color: antiquewhite">川剧</h2><br>
<p style="font-size: 20px; color: white">
川剧，是中国传统戏曲剧种之一，流行于四川东中部、重庆及贵州、云南部分地区。川剧脸谱，是川剧表演艺术中重要的组成部分，是历代川剧艺人共同创造并传承下来的艺术瑰宝。川剧由昆腔、高腔、胡琴、弹戏、灯调五种声腔组成。川剧分小生，须生，旦，花脸，丑角5个行当，各行当均有自成体系的功法程序，尤以“三小”，即小丑，小生，小旦的表演最具特色，在戏剧表现手法、表演技法方面多有卓越创造，能充分体现中国戏曲虚实相生、遗形写意的美学特色。 2006年5月20日，川剧经国务院批准列入第一批国家级非物质文化遗产名录。
</p>
</div>
</div>
</div>
</div>
<div class="contain_recommend">
<h3 style="color: #fffcdd;font-family: 新宋体;font-size: 50px">名段推荐</h3>
<div class="contain_list">
<ul style="font-size: 25px; ">
<li><a href="">京剧 曹操与杨修选段 言兴朋</a></li><br><hr>
<li><a href="">京剧 钓金龟 叫张义我的儿听娘教训 袁慧琴</a></li><br><hr>
<li><a href="">越剧名段欣赏 梁祝选段 十八相送 茅威涛 何</a></li><br><hr>
<li><a href="">越剧 盘夫 为妻也有一比方 王志萍 郑国凤</a></li><br><hr>
<li><a href="">京剧 春闺梦 被纠缠陡想起婚时情景 张火丁</a></li><br><hr>
<li><a href="">越剧 盘夫 为妻也有一比方 王志萍 郑国凤</a></li><br><hr>
<li><a href="">贵妃醉酒 海岛冰轮初转腾 李胜素</a></li>
</ul>
</div>
</div>
<div class="introduce">
关于我们
</div>
</body>
<script src="../static/js/jquery.js"></script>
<script src="../static/js/index.js"></script>
</html>
1.meilanfang.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>梅兰芳</title>
<link rel="stylesheet" type=text/css href="../../static/css/character.css">
</head>
<body id="example1">
<div class="contain_logo" >
<div class="logo">
<img src="../../static/file/脸谱.jpg" style="opacity: 0.8" width="858px" height="300px" alt="">
</div>
<div class="title">
<p class="title_text" style="font-family: 宋体;">名角介绍</p>
<p class="title_text1" style="font-family: 黑体;">--梅兰芳</p>
</div>
</div>
<div class="contain_column" >
<ul style="font-family: 黑体; " class="contain_ul">
<li >
<a id="a11" href="../index.html" >首 页</a>
</li>
<li>
<a href="javascript:void(0)" id="hidden_a">经典剧目▼</a>
<div id="hidden1" style="display:none" class="contain_show_hidden1">
<a href="" class="a1">霸王别姬</a><br>
<a href="" class="a1">牡丹亭</a><br>
<a href="" class="a1">西厢记</a><br>
<a href="" class="a1">白蛇传</a><br>
<a href="" class="a1">穆桂英挂帅</a><br>
<a href="" class="a1">梁山伯与祝英台</a>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_b">名角介绍▼</a>
<div id="hidden2" style="display:none" class="contain_show_hidden2">
<a href="meilanfang.html" class="a2">梅兰芳</a><br>
<a href="malan.html" class="a2">马兰</a><br>
<a href="shangxiaoyun.html" class="a2">尚小云</a><br>
<a href="chengyanqiu.html" class="a2">程砚秋</a><br>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_c">剧种介绍▼</a>
<div id="hidden3" style="display:none" class="contain_show_hidden3">
<a href="../剧种介绍/京.html" class="a3">京剧</a><br>
<a href="../剧种介绍/川.html" class="a3">川剧</a><br>
<a href="../剧种介绍/粤.html" class="a3">粤剧</a><br>
<a href="../剧种介绍/昆.html" class="a3">昆剧</a><br>
<a href="../剧种介绍/豫.html" class="a3">豫剧</a><br>
<a href="../剧种介绍/淮.html" class="a3">淮剧</a><br>
</div>
</li>
</ul>
</div>
<div class="contain_content">
<label style="font-size: 80px" for="">梅兰芳</label>
<label style="font-size: 50px" for="">(中国京剧表演艺术家)</label><br><br><br><br><br><br><hr>
<div class="contain_label"></div>
<label style="font-size: 30px;margin-left: 30px;margin-top: -35px;float: left" for="">人物介绍</label>
<p style="padding-left: 80px;padding-right: 300px;font-family: 宋体;font-size: 26px">
梅兰芳（1894年10月22日－1961年8月8日），名澜，又名鹤鸣，字畹华，别署缀玉轩主人，艺名兰芳.<br><br>清光绪二十年（1894年）出生于北京，祖籍江苏泰州。代表作有《贵妃醉酒》、《天女散花》、《宇宙锋》、《打渔杀家》等。
<br><br>梅兰芳8岁学戏，10岁登台。后又求教于秦稚芬和胡二庚学花旦。<br><br>1949年前荣获美国波莫纳学院和南加州大学的荣誉文学博士学位。<br><br>1950年任中国京剧院院长<br><br>1951年，任中国戏曲研究院院长<br><br>1953年，任中国戏剧家协会副主席。
</p><img src="../../static/file/梅2.jpg" class="contain_image" alt="">
<hr>
<div class="contain_label"></div>
<label style="font-size: 30px;margin-left: 30px;margin-top: -35px;float: left" for="">个人成就</label>
<br>
<p style="padding-left: 80px;padding-right: 300px;font-family: 宋体;font-size: 26px">
<label style="font-family: 方正粗黑宋简体" href="">1.梅派的创立</label><br>
二十世纪二三十年代，梅巧玲之孙梅兰芳继承并发展了梅派艺术，让整个京剧发展步入了巅峰时期，这是京剧走向兴盛的重要标志。
<br><br><br><label style="font-family: 方正粗黑宋简体" for="">2.艺术戏剧融合</label><br>
梅兰芳将艺术和生活，和兴趣走到了一起，让中国传统书画走进戏剧，扩展了艺术领域，同时将原有的艺术壁垒打破，开创出新的出路，并将这种新式事物传到了国外。
<br><br><br><label style="font-family: 方正粗黑宋简体" for="">3.书画艺术</label><br>
梅兰芳的画清丽秀雅、神形兼备，有深厚的艺术修养。在抗战时期蓄须铭志，曾以卖画为生计。
</p>
<img src="../../static/file/梅.jpg" class="contain_image1" alt="">
</div>
</body>
<script src="../../static/js/jquery.js"></script>
<script src="../../static/js/index.js"></script>
</html>
- malan.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>马兰</title>
<link rel="stylesheet" type=text/css href="../../static/css/character.css">
</head>
<body id="example1">
<div class="contain_logo" >
<div class="logo">
<img src="../../static/file/脸谱.jpg" style="opacity: 0.8" width="858px" height="300px" alt="">
</div>
<div class="title">
<p class="title_text" style="font-family: 宋体;">名角介绍</p>
<p class="title_text1" style="font-family: 黑体;">--马兰</p>
</div>
</div>
<div class="contain_column" >
<ul style="font-family: 黑体; " class="contain_ul">
<li >
<a id="a11" href="../index.html" >首 页</a>
</li>
<li>
<a href="javascript:void(0)" id="hidden_a">经典剧目▼</a>
<div id="hidden1" style="display:none" class="contain_show_hidden1">
<a href="" class="a1">霸王别姬</a><br>
<a href="" class="a1">牡丹亭</a><br>
<a href="" class="a1">西厢记</a><br>
<a href="" class="a1">白蛇传</a><br>
<a href="" class="a1">穆桂英挂帅</a><br>
<a href="" class="a1">梁山伯与祝英台</a>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_b">名角介绍▼</a>
<div id="hidden2" style="display:none" class="contain_show_hidden2">
<a href="meilanfang.html" class="a2">梅兰芳</a><br>
<a href="malan.html" class="a2">马兰</a><br>
<a href="shangxiaoyun.html" class="a2">尚小云</a><br>
<a href="chengyanqiu.html" class="a2">程砚秋</a><br>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_c">剧种介绍▼</a>
<div id="hidden3" style="display:none" class="contain_show_hidden3">
<a href="../剧种介绍/京.html" class="a3">京剧</a><br>
<a href="../剧种介绍/川.html" class="a3">川剧</a><br>
<a href="../剧种介绍/粤.html" class="a3">粤剧</a><br>
<a href="../剧种介绍/昆.html" class="a3">昆剧</a><br>
<a href="../剧种介绍/豫.html" class="a3">豫剧</a><br>
<a href="../剧种介绍/淮.html" class="a3">淮剧</a><br>
</div>
</li>
</ul>
</div>
<div class="contain_content">
<label style="font-size: 80px" for="">马兰</label>
<label style="font-size: 50px" for="">(黄梅戏表演艺术家、国家一级演员)</label><br><br><br><br><br><br><hr>
<div class="contain_label"></div>
<label style="font-size: 30px;margin-left: 30px;margin-top: -35px;float: left" for="">人物介绍</label>
<p style="padding-left: 80px;padding-right: 300px;font-family: 宋体;font-size: 26px">
1980年马兰从安徽艺术学院毕业。分配进安徽省黄梅戏剧院工作。
<br><br>1985年马兰获得全国黄梅戏中青年演员广播大奖赛第一名，同年获得全国五一劳动奖章。
<br><br>1987年因主演莎士比亚戏《无事生非》获得第四届中国戏剧奖·梅花表演奖。
<br><br>1988年凭借电视剧《严凤英》获得第6届中国电视金鹰奖最佳女演员，第8届中国电视剧飞天奖最佳女主角。
<br><br>1989年被评为全国首届黄梅戏青年演员电视大奖赛十佳之首。
<br><br>1989年获得全国先进工作者称号。
<br><br>2007年获得亚洲最杰出艺人奖终身成就奖。
</p><img src="../../static/file/马1.jpg" class="contain_image6" alt="">
<hr>
<div class="contain_label"></div>
<label style="font-size: 30px;margin-left: 30px;margin-top: -35px;float: left" for="">个人成就</label>
<br>
<p style="padding-left: 80px;padding-right: 300px;font-family: 宋体;font-size: 26px">
<label style="font-family: 方正粗黑宋简体" href="">1.唱腔特色</label><br>
马兰在学习传统戏曲唱腔的同时，借鉴科学的发声方法技巧，灵活的运用到黄梅戏唱腔中，收到了良好的效果。她的气息既深沉坚实又允满活力，不僵不硬，流动自如，中低音区稳重、柔和，高音区明亮、清丽，这些都得益于她科学系统的“胸腹联合式”呼吸方法，从而得到了松弛、丰满的声音。
<br><br><br><label style="font-family: 方正粗黑宋简体" for="">2.舞台表演</label><br>
在马兰塑造的舞台形象中，李碧翠和贾宝玉应是其中最闪亮、最亮丽的。他们一个与马兰本人的性格相去很远，一个是反串小王，改变了角色行当，两个人物形象都富有鲜明的个性色彩，被马兰搬到舞台上更是栩栩如生、眩目照人。马兰学习时所在的省艺校设置了四门表演骨架课程：唱念课、身段课、基训课、排练课，其中的身段课用于提高学生的舞蹈表现力，以适应黄梅戏艺术的表演特殊性。
</p>
<img src="../../static/file/马2.png" class="contain_image7" alt="">
</div>
</body>
<script src="../../static/js/jquery.js"></script>
<script src="../../static/js/index.js"></script>
</html>
- shangxiaoyun.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>尚小云</title>
<link rel="stylesheet" type=text/css href="../../static/css/character.css">
</head>
<body id="example1">
<div class="contain_logo" >
<div class="logo">
<img src="../../static/file/脸谱.jpg" style="opacity: 0.8" width="858px" height="300px" alt="">
</div>
<div class="title">
<p class="title_text" style="font-family: 宋体;">名角介绍</p>
<p class="title_text1" style="font-family: 黑体;">--尚小云</p>
</div>
</div>
<div class="contain_column" >
<ul style="font-family: 黑体; " class="contain_ul">
<li >
<a id="a11" href="../index.html" >首 页</a>
</li>
<li>
<a href="javascript:void(0)" id="hidden_a">经典剧目▼</a>
<div id="hidden1" style="display:none" class="contain_show_hidden1">
<a href="" class="a1">霸王别姬</a><br>
<a href="" class="a1">牡丹亭</a><br>
<a href="" class="a1">西厢记</a><br>
<a href="" class="a1">白蛇传</a><br>
<a href="" class="a1">穆桂英挂帅</a><br>
<a href="" class="a1">梁山伯与祝英台</a>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_b">名角介绍▼</a>
<div id="hidden2" style="display:none" class="contain_show_hidden2">
<a href="meilanfang.html" class="a2">梅兰芳</a><br>
<a href="malan.html" class="a2">马兰</a><br>
<a href="shangxiaoyun.html" class="a2">尚小云</a><br>
<a href="chengyanqiu.html" class="a2">程砚秋</a><br>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_c">剧种介绍▼</a>
<div id="hidden3" style="display:none" class="contain_show_hidden3">
<a href="../剧种介绍/京.html" class="a3">京剧</a><br>
<a href="../剧种介绍/川.html" class="a3">川剧</a><br>
<a href="../剧种介绍/粤.html" class="a3">粤剧</a><br>
<a href="../剧种介绍/昆.html" class="a3">昆剧</a><br>
<a href="../剧种介绍/豫.html" class="a3">豫剧</a><br>
<a href="../剧种介绍/淮.html" class="a3">淮剧</a><br>
</div>
</li>
</ul>
</div>
<div class="contain_content">
<label style="font-size: 80px" for="">尚小云</label>
<label style="font-size: 50px" for="">(著名京剧表演艺术家)</label><br><br><br><br><br><br><hr>
<div class="contain_label"></div>
<label style="font-size: 30px;margin-left: 30px;margin-top: -35px;float: left" for="">人物介绍</label><br>
<p style="padding-left: 80px;padding-right: 300px;font-family: 宋体;font-size: 26px">
尚小云年仅7岁时就投身梨园。
<br><br>1908年，他转入了三乐社科班学戏，初习武生，花脸，后改旦角。1914年冬，尚小云与孙菊仙配《三娘教子》《战蒲关》，声名渐起，被评为“第一童伶”。
<br><br>1918年，尚小云自组“重庆社”，不断排演新剧目，以巾帼英雄人物为居多。
<br><br>1927年，由北京《顺天时报》发起“五大名伶新剧夺魁评选活动”，尚小云以新编剧《摩登伽女》夺得第一。
<br><br>30年代，他被公认为四大名旦之一，誉满天下。 1937年创办“荣春社”，在京剧演出和京剧教育岗位上发挥重大作用。
</p><img src="../../static/file/尚1.jpg" class="contain_image4" alt="">
<hr>
<div class="contain_label"></div>
<label style="font-size: 30px;margin-left: 30px;margin-top: -35px;float: left" for="">个人成就</label>
<br>
<p style="padding-left: 80px;padding-right: 300px;font-family: 宋体;font-size: 26px">
<label style="font-family: 方正粗黑宋简体" href="">1.铁嗓钢喉，高劲圆亮</label><br>
直接继承了阳刚一派的传统，早期恪守传统青衣“口紧字松”的唱法，其后受陈德霖影响，于刚健中辅以婀娜，形成了自己的风格。他的发音上抗下坠，对比鲜明，注重气势，给人纵横捭阖、拔险攻坚的刚劲之美，传统青衣“节节高”的唱法，在他能举重若轻。
<br><br><br><label style="font-family: 方正粗黑宋简体" for="">2.文武兼善，面面俱到</label><br>
尚派的做工身段，如跑圆场等，能越跑越圆，有前激后荡之势。起落准确，跬步不失，他的武工，在四大名旦中独树一帜，最为人称道。每举手投足间，矫健非常。
<br><br><br><label style="font-family: 方正粗黑宋简体" for="">3.贞女节烈</label><br>
打破了以往京剧旦行(青衣)专门讲究“贞女节烈”的道德评判标准，从“烈”之一端引发了“侠”、“义”、“刚”、“健”等内涵，从更广阔的层面关注妇女的生存和生活价值，实际上已隐含了对传统妇女观念的批判，颇具时代意义。
</p>
<img src="../../static/file/尚2.jpg" class="contain_image5" alt="">
</div>
</body>
<script src="../../static/js/jquery.js"></script>
<script src="../../static/js/index.js"></script>
</html>
- chengyanqiu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>程砚秋</title>
<link rel="stylesheet" type=text/css href="../../static/css/character.css">
</head>
<body id="example1">
<div class="contain_logo" >
<div class="logo">
<img src="../../static/file/脸谱.jpg" style="opacity: 0.8" width="858px" height="300px" alt="">
</div>
<div class="title">
<p class="title_text" style="font-family: 宋体;">名角介绍</p>
<p class="title_text1" style="font-family: 黑体;">--程砚秋</p>
</div>
</div>
<div class="contain_column" >
<ul style="font-family: 黑体; " class="contain_ul">
<li >
<a id="a11" href="../index.html" >首 页</a>
</li>
<li>
<a href="javascript:void(0)" id="hidden_a">经典剧目▼</a>
<div id="hidden1" style="display:none" class="contain_show_hidden1">
<a href="" class="a1">霸王别姬</a><br>
<a href="" class="a1">牡丹亭</a><br>
<a href="" class="a1">西厢记</a><br>
<a href="" class="a1">白蛇传</a><br>
<a href="" class="a1">穆桂英挂帅</a><br>
<a href="" class="a1">梁山伯与祝英台</a>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_b">名角介绍▼</a>
<div id="hidden2" style="display:none" class="contain_show_hidden2">
<a href="meilanfang.html" class="a2">梅兰芳</a><br>
<a href="malan.html" class="a2">马兰</a><br>
<a href="shangxiaoyun.html" class="a2">尚小云</a><br>
<a href="chengyanqiu.html" class="a2">程砚秋</a><br>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_c">剧种介绍▼</a>
<div id="hidden3" style="display:none" class="contain_show_hidden3">
<a href="../剧种介绍/京.html" class="a3">京剧</a><br>
<a href="../剧种介绍/川.html" class="a3">川剧</a><br>
<a href="../剧种介绍/粤.html" class="a3">粤剧</a><br>
<a href="../剧种介绍/昆.html" class="a3">昆剧</a><br>
<a href="../剧种介绍/豫.html" class="a3">豫剧</a><br>
<a href="../剧种介绍/淮.html" class="a3">淮剧</a><br>
</div>
</li>
</ul>
</div>
<div class="contain_content">
<label style="font-size: 80px" for="">程砚秋</label>
<label style="font-size: 50px" for="">(著名京剧演员)</label><br><br><br><br><br><br><hr>
<div class="contain_label"></div>
<label style="font-size: 30px;margin-left: 30px;margin-top: -35px;float: left" for="">人物介绍</label><br>
<p style="padding-left: 80px;padding-right: 300px;font-family: 宋体;font-size: 26px">
程砚秋出生在1904年12月20日，幼年家道中落，六岁投荣蝶仙门下，习武生。
<br><br>1922年他首次到上海演出，引起轰动。
<br><br>1923年再次到上海，使上海观众欣喜若狂，艺术也逐步趋于成熟。
<br><br>1925年到1938年，程砚秋步入他风华正茂的黄金时期和“程派”艺术的成熟期。
<br><br>1953年任中国戏曲研究院副院长。
</p>
<img src="../../static/file/程1.jpg" class="contain_image2" alt="">
<hr>
<div class="contain_label"></div>
<label style="font-size: 30px;margin-left: 30px;margin-top: -35px;float: left" for="">个人成就</label>
<p style="padding-left: 80px;padding-right: 300px;font-family: 宋体;font-size: 26px">
<br><label style="font-family: 方正粗黑宋简体" href="">1.艺术上</label><br>
程砚秋在艺术上革旧创新、独辟蹊径，继承传统而不拘泥于传统，学习他家而不肯固步自封，创立了别具一格的京剧旦角艺术流派——“程派”。
<br><br><br><label style="font-family: 方正粗黑宋简体" for="">2.唱腔上</label><br>
程砚秋在唱腔上讲究音律、注重四声、起伏跌宕，节奏多变，形成了一种幽咽刚烈、似断非断的唱念风格。
<br><br><br><label style="font-family: 方正粗黑宋简体" for="">3.做工上</label><br>
在做工上，程砚秋善于观察生活，根据具体的情节和人物不同的性格，在眼神、身段、步法、指法、水袖、剑术等方面进行了一些创新和创造，动作舒展大方、柔中带刚。
</p>
<img src="../../static/file/程2.jpg" class="contain_image3" alt="">
</div>
</body>
<script src="../../static/js/jquery.js"></script>
<script src="../../static/js/index.js"></script>
</html>
5.京.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type=text/css href="../../static/css/drama.css">
</head>
<body id="example1">
<div class="contain_logo" >
<div class="logo">
<img src="../../static/file/脸谱.jpg" style="opacity: 0.8" width="858px" height="300px" alt="">
</div>
<div class="title">
<p class="title_text" style="font-family: 宋体;">剧种介绍</p>
<p class="title_text1" style="font-family: 黑体;">--京剧</p>
</div>
</div>
<div class="contain_column" >
<ul style="font-family: 黑体; " class="contain_ul">
<li >
<a id="a11" href="../index.html" >首 页</a>
</li>
<li>
<a href="javascript:void(0)" id="hidden_a">经典剧目▼</a>
<div id="hidden1" style="display:none" class="contain_show_hidden1">
<a href="" class="a1">霸王别姬</a><br>
<a href="" class="a1">牡丹亭</a><br>
<a href="" class="a1">西厢记</a><br>
<a href="" class="a1">白蛇传</a><br>
<a href="" class="a1">穆桂英挂帅</a><br>
<a href="" class="a1">梁山伯与祝英台</a>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_b">名角介绍▼</a>
<div id="hidden2" style="display:none" class="contain_show_hidden2">
<a href="../名角介绍/meilanfang.html" class="a2">梅兰芳</a><br>
<a href="../名角介绍/malan.html" class="a2">马兰</a><br>
<a href="../名角介绍/shangxiaoyun.html" class="a2">尚小云</a><br>
<a href="../名角介绍/chengyanqiu.html" class="a2">程砚秋</a><br>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_c">剧种介绍▼</a>
<div id="hidden3" style="display:none" class="contain_show_hidden3">
<a href="京.html" class="a3">京剧</a><br>
<a href="川.html" class="a3">川剧</a><br>
<a href="粤.html" class="a3">粤剧</a><br>
<a href="昆.html" class="a3">昆剧</a><br>
<a href="豫.html" class="a3">豫剧</a><br>
<a href="淮.html" class="a3">淮剧</a><br>
</div>
</li>
</ul>
</div> <div class="contain_recommend">
<h3 style="color: #fffcdd;font-family: 新宋体;font-size: 50px">名段推荐</h3>
<div class="contain_list">
<ul style="font-size: 25px; ">
<li><a href="">京剧 廉吏于成龙</a></li><br><hr>
<li><a href="">京剧 八大锤</a></li><br><hr>
<li><a href="">京剧 空城计</a></li><br><hr>
<li><a href="">京剧 霸王别姬</a></li><br><hr>
<li><a href="">京剧 四进士</a></li><br><hr>
<li><a href="">京剧 六月雪</a></li><br><hr>
<li><a href="">京剧 搜孤救孤</a></li>
</ul>
</div>
</div>
<div class="contain_content">
<label style="font-size: 80px" for="">京剧</label>
<br><br><br><br><br><br><hr>
<div class="contain_label"></div>
<label style="font-size: 30px;margin-left: 30px;margin-top: -35px;float: left" for="">介绍</label>
<p style="padding-left: 80px;padding-right: 300px;font-family: 宋体;font-size: 26px">
京剧，又称平剧、京戏，是中国影响最大的戏曲剧种，分布地以北京为中心，遍及全国各地。
清代乾隆五十五年（1790年）起，原在南方演出的三庆、四喜、春台、和春四大徽班陆续进入北京，与来自湖北的汉调艺人合作，
同时接受了昆曲、秦腔的部分剧目、曲调和表演方法，又吸收了一些地方民间曲调，通过不断的交流、融合，最终形成京剧。
京剧在文学、表演、音乐、舞台美术等各个方面都有一套规范化的艺术表现形式。京剧的唱腔属板式变化体，
以二簧、西皮为主要声腔。京剧伴奏分文场和武场两大类，文场以胡琴为主奏乐器，武场以鼓板为主。
京剧的角色分为生、旦、净、丑、杂、武、流等行当，后三行已不再立专行。各行当都有一套表演程式，唱念做打的技艺各具特色。
京剧以历史故事为主要演出内容，传统剧目约有一千三百多个，常演的在三四百个以上。
京剧流播全国，影响甚广，有“国剧”之称。以梅兰芳命名的京剧表演体系被视为东方戏剧表演体系的代表，为世界三大表演体系之一。
京剧是中华民族传统文化的重要表现形式，其中的多种艺术元素被用作中国传统文化的象征符号。
2006年5月，京剧被国务院批准列入第一批国家级非物质文化遗产名录。
</p>
<hr>
<div class="contain_label"></div>
<label style="font-size: 30px;margin-left: 30px;margin-top: -35px;float: left" for="">艺术特点</label>
<br>
<p style="padding-left: 80px;padding-right: 300px;font-family: 宋体;font-size: 26px">
京剧耐人寻味，韵味醇厚。京剧舞台艺术zd在文学、表演、音乐、唱腔、锣鼓、化妆、脸谱等各个方面，
通过无数艺人的长期舞台实践，构成了一套互相制约、相得益彰的格律化和规范化的程式。
它作为创造舞台形象的艺术手段是十分丰富的，而用法又是十分严格的。不能驾驭这些程式，就无法完成京内剧舞台艺术的创造。
由于京剧在形成之初，便进入了宫廷，使它的发育成长不同于地方剧种。要求它所要表现的生活领域更宽，所要塑造的人物类型更多，
对它的技艺的全面性、完整性也要求得更严，对它创造舞台形象的美学要求也更高。当然，同时也相应地使它的民间乡土气息减弱，
纯朴、粗犷的风格特色相对淡薄。因而，它的表演容艺术更趋于虚实结合的表现手法，最大限度地超脱了舞台空间和时间的限制，
以达到“以形传神，形神兼备”的艺术境界。表演上要求精致细腻，处处入戏；唱腔上要求悠扬委婉，声情并茂；武戏则不以火爆勇
猛取胜，而以“武戏文唱”见佳。 </p>
</div>
</body>
<script src="../../static/js/jquery.js"></script>
<script src="../../static/js/index.js"></script>
</html>
- 昆.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>昆剧</title>
<link rel="stylesheet" type=text/css href="../../static/css/drama.css">
</head>
<body id="example1">
<div class="contain_logo" >
<div class="logo">
<img src="../../static/file/脸谱.jpg" style="opacity: 0.8" width="858px" height="300px" alt="">
</div>
<div class="title">
<p class="title_text" style="font-family: 宋体;">剧种介绍</p>
<p class="title_text1" style="font-family: 黑体;">--昆剧</p>
</div>
</div>
<div class="contain_column" >
<ul style="font-family: 黑体; " class="contain_ul">
<li >
<a id="a11" href="../index.html" >首 页</a>
</li>
<li>
<a href="javascript:void(0)" id="hidden_a">经典剧目▼</a>
<div id="hidden1" style="display:none" class="contain_show_hidden1">
<a href="" class="a1">霸王别姬</a><br>
<a href="" class="a1">牡丹亭</a><br>
<a href="" class="a1">西厢记</a><br>
<a href="" class="a1">白蛇传</a><br>
<a href="" class="a1">穆桂英挂帅</a><br>
<a href="" class="a1">梁山伯与祝英台</a>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_b">名角介绍▼</a>
<div id="hidden2" style="display:none" class="contain_show_hidden2">
<a href="../名角介绍/meilanfang.html" class="a2">梅兰芳</a><br>
<a href="../名角介绍/malan.html" class="a2">马兰</a><br>
<a href="../名角介绍/shangxiaoyun.html" class="a2">尚小云</a><br>
<a href="../名角介绍/chengyanqiu.html" class="a2">程砚秋</a><br>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_c">剧种介绍▼</a>
<div id="hidden3" style="display:none" class="contain_show_hidden3">
<a href="京.html" class="a3">京剧</a><br>
<a href="川.html" class="a3">川剧</a><br>
<a href="粤.html" class="a3">粤剧</a><br>
<a href="昆.html" class="a3">昆剧</a><br>
<a href="豫.html" class="a3">豫剧</a><br>
<a href="淮.html" class="a3">淮剧</a><br>
</div>
</li>
</ul>
</div> <div class="contain_recommend">
<h3 style="color: #fffcdd;font-family: 新宋体;font-size: 50px">名段推荐</h3>
<div class="contain_list">
<ul style="font-size: 25px; ">
<li><a href="">昆剧 惊梦</a></li><br><hr>
<li><a href="">昆剧 皂罗袍</a></li><br><hr>
<li><a href="">昆剧 游园惊梦</a></li><br><hr>
<li><a href="">昆剧 牡丹亭</a></li><br><hr>
</ul>
</div>
</div>
<div class="contain_content" style="height: 2000px">
<label style="font-size: 80px" for="">昆剧</label>
<br><br><br><br><br><br><hr>
<div class="contain_label"></div>
<label style="font-size: 30px;margin-left: 30px;margin-top: -35px;float: left" for="">介绍</label>
<p style="padding-left: 80px;padding-right: 300px;font-family: 宋体;font-size: 26px">
昆剧是只采用昆腔这一单一声腔演故事的剧种。 一般而言，着重表达戏曲声腔时用昆山腔，
表达乐曲、尤其是脱离舞台的清唱时用昆曲，而将指表演艺术的戏曲剧种，则称为昆剧。
在历史的演变过程中，昆剧曾经有"昆山腔"（简称"昆腔"）"昆调""昆曲""南曲""南音""雅部"等各种不同的名称
昆剧的产生，不仅是昆腔自身发展的成熟标志，还是中国戏曲发展的成熟标志。
昆剧是受文人雅士、艺术专家精心呵护培植的特殊戏曲品种，昆剧音乐使用曲牌体音乐结构，
经典曲目有《牡丹亭》、《长生殿》、《单刀会》等。
</p>
<hr>
<div class="contain_label"></div>
<label style="font-size: 30px;margin-left: 30px;margin-top: -35px;float: left" for="">艺术特点</label>
<br>
<p style="padding-left: 80px;padding-right: 300px;font-family: 宋体;font-size: 26px">
昆剧行腔优美，以缠绵婉转、柔漫悠远见长。在演唱技巧上注重声音的控制，节奏速度的顿挫疾徐和咬字吐音的讲究，
场面伴奏乐曲齐全。
“水磨腔”。这种新腔奠定了昆剧演唱的特色，充分体现在南曲的慢曲子（即“细曲”）中
，具体表现为放慢拍子，延缓节奏，以便在旋律进行中运用较多的装饰性花腔,除了通常的一板三眼、
一板一眼外，又出现了“赠板曲”，即将4/4拍的曲调放慢成8/4，声调清柔委婉，并对字音严格要求，平
、上、去、入逐一考究，每唱一个字，注意咬字的头、腹、尾，即吐字、过腔和收音，使音乐布局的空间增
大，变化增多，其缠绵婉转、柔曼悠远的特点也愈加突出。
相对而言，北曲的声情偏于跌宕豪爽，跳跃性强。它使用七声音阶和南曲用五声音阶（基本上不用半音）不同，但在
昆山腔的长期吸收北曲演唱过程中，原来北曲的特性也渐渐被溶化成为“南曲化”的演唱风格，因此在昆剧
演出剧目中，北曲既有成套的使用，也有单支曲牌的摘用，还有“南北合套”。
“南北合套”的使用很有特色：一般情况是北曲由一个角色应唱，南曲则由几个不同的角色分唱。这几种南北曲的配合
使用办法，完全从剧情出发，使音乐尽可能完美地服从戏剧内容的需要。
昆山腔融合北曲与弋阳腔、海盐腔等南曲诸腔于一炉，并加以提炼，其音乐上的艺术成就是史无前例的。在节奏上，
除了通常的一板三眼、一板一眼外，又出现了赠板，使音乐布局的空间增大，变化增多，其缠绵婉转、柔曼
悠远的特点也愈加突出。在演唱技巧上，注重声音的控制，节奏速度的徐疾以及咬字发音，并有“豁”、“叠”
、“擞”、“嚯”等腔法的区分以及各类角色的性格唱法。
昆剧的表演，是一种歌、舞、介、白各种表演手段相互配合的综合艺术。通过长期的艺术实践，形成了载歌载舞的表现
形式。其舞蹈身段大体可以分成两种：一种是说话时的辅助姿态和由手势发展起来的着重写意的舞蹈；一种
是配合唱词的抒情舞蹈。在念白上，主要以中州韵白为主，丑角还有一种基于吴方言的地方白，如苏白、扬州
白等。昆曲的角色行当也划分得十分细致：老生分外、末、副末；小生分官生、巾生、雉尾生、鞋皮生等；旦
角分正旦、刺杀旦、五旦、六旦、老旦等；净丑分大面、白面、二面、小面等。各个行当都在表演上形成自己
的一套程式和技巧，这些程式化的动作语言在刻画人物性格、表达人物心理状态、渲染戏剧性和增强感染力方
面，形成了昆曲完整而独特的表演体系。
昆剧的音乐伴奏也颇为齐全，其中琵琶和三弦为常用伴奏乐器。管乐有：笛、箫、唢呐等，弦乐有：琵琶、三弦、月琴
等，打击乐有：鼓板、大锣、小锣、铴锣、云锣、小钹、堂鼓等。由于以声若游丝的笛为主要伴奏乐器，加上
赠板的广泛使用，字分头、腹、尾的吐字方式，以及它本身受吴中民歌的影响而具有的“流丽悠远”的特色，
使昆腔音乐以“婉丽妩媚、一唱三叹”著称。
昆剧的音乐使用曲牌体结构。即：由许多独立的曲调（曲牌）按照戏剧需要连缀而成。所谓“曲牌”是指那些经常被用来
填词的旋律程式。
昆曲的音乐、表演技巧对现代全国大部分声腔剧种都有深刻的影响。如：京剧、越剧的表演就受到昆曲的很大影响。京
剧的各类角色的性格唱法，也是在昆曲奠定的基础上发展起来的。此外，京剧、川剧、婺剧、桂剧、湘剧、
祁剧、赣剧等剧种中仍然保留着昆曲的部分剧目、声腔和曲牌。 </p>
</div>
</body>
<script src="../../static/js/jquery.js"></script>
<script src="../../static/js/index.js"></script>
</html>
- 淮.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淮剧</title>
<link rel="stylesheet" type=text/css href="../../static/css/drama.css">
</head>
<body id="example1">
<div class="contain_logo" >
<div class="logo">
<img src="../../static/file/脸谱.jpg" style="opacity: 0.8" width="858px" height="300px" alt="">
</div>
<div class="title">
<p class="title_text" style="font-family: 宋体;">剧种介绍</p>
<p class="title_text1" style="font-family: 黑体;">--淮剧</p>
</div>
</div>
<div class="contain_column" >
<ul style="font-family: 黑体; " class="contain_ul">
<li >
<a id="a11" href="../index.html" >首 页</a>
</li>
<li>
<a href="javascript:void(0)" id="hidden_a">经典剧目▼</a>
<div id="hidden1" style="display:none" class="contain_show_hidden1">
<a href="" class="a1">霸王别姬</a><br>
<a href="" class="a1">牡丹亭</a><br>
<a href="" class="a1">西厢记</a><br>
<a href="" class="a1">白蛇传</a><br>
<a href="" class="a1">穆桂英挂帅</a><br>
<a href="" class="a1">梁山伯与祝英台</a>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_b">名角介绍▼</a>
<div id="hidden2" style="display:none" class="contain_show_hidden2">
<a href="../名角介绍/meilanfang.html" class="a2">梅兰芳</a><br>
<a href="../名角介绍/malan.html" class="a2">马兰</a><br>
<a href="../名角介绍/shangxiaoyun.html" class="a2">尚小云</a><br>
<a href="../名角介绍/chengyanqiu.html" class="a2">程砚秋</a><br>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_c">剧种介绍▼</a>
<div id="hidden3" style="display:none" class="contain_show_hidden3">
<a href="京.html" class="a3">京剧</a><br>
<a href="川.html" class="a3">川剧</a><br>
<a href="粤.html" class="a3">粤剧</a><br>
<a href="昆.html" class="a3">昆剧</a><br>
<a href="豫.html" class="a3">豫剧</a><br>
<a href="淮.html" class="a3">淮剧</a><br>
</div>
</li>
</ul>
</div> <div class="contain_recommend">
<h3 style="color: #fffcdd;font-family: 新宋体;font-size: 50px">名段推荐</h3>
<div class="contain_list">
<ul style="font-size: 25px; ">
<li><a href=""> 淮剧 郑巧娇</a></li><br><hr>
<li><a href=""> 淮剧 牙痕记</a></li><br><hr>
<li><a href=""> 淮剧 赵五娘</a></li><br><hr>
<li><a href=""> 淮剧 吴汉三杀</a></li><br><hr>
<li><a href=""> 淮剧 打金枝</a></li><br><hr>
<li><a href=""> 淮剧 九件衣</a></li><br><hr>
<li><a href=""> 淮剧 白蛇传</a></li><br><hr>
<li><a href=""> 淮剧 李翠莲</a></li><br><hr>
<li><a href=""> 淮剧 蓝桥会</a></li><br>
</ul>
</div>
</div>
<div class="contain_content" style="height: 3000px">
<label style="font-size: 80px" for="">淮剧</label>
<br><br><br><br><br><br><hr>
<div class="contain_label"></div>
<label style="font-size: 30px;margin-left: 30px;margin-top: -35px;float: left" for="">介绍</label>
<p style="padding-left: 80px;padding-right: 300px;font-family: 宋体;font-size: 26px">
淮剧，又名江淮戏、淮戏，是一种古老的地方戏曲剧种，发源于今江苏省淮安市以及盐城市里下河一带，
发祥于近现代的上海市，现流行于江苏省、上海市以及安徽省部分地区。
淮剧说的是建湖话、唱的是建湖腔，淮剧各个阶段的领军人物多为建湖人。
建湖是淮剧人的老家。1950年11月，著名淮剧演员马麟童首先在戏单上打出标准的“淮剧”字样。
由此，“江北戏”、“江淮戏”等各种不同称呼逐步向“淮剧”统一。1952年10月，上海市人民淮剧团出席全国第一届戏曲观摩演出大会，
“淮剧”其名被正式载入国家级文件档案。1953年，经由周恩来总理提议，国家将这个剧种正式命名为淮剧。
清代中叶，在淮安府（今盐城市和淮安市）和扬州府两地区，当地民间流行着一种由农民号子和田歌“儴儴腔”
、“栽秧调”发展而成的说唱形式“门叹词”，形式为一人单唱或二人对唱称之为“二可子”，仅以竹板击节。
淮剧后与苏北民间酬神的“香火戏”结合演出，之后又受徽戏和京剧的影响（称为徽夹可），在唱腔、表演和剧目
等方面逐渐丰富，从而形成了淮剧。
2008年6月，上海淮剧团、 江苏省盐城市申报的淮剧经国务院批准列入第二批国家级非物质文化遗产名录。
2011年5月，江苏省淮安市、泰州市联合申报的淮剧经国务院批准被扩展入第三批国家级非物质文化遗产名录。
2015年1月，扬州市宝应县经江苏省政府批准入选江苏省第四批非物质文化遗产名录。
</p>
<hr>
<div class="contain_label"></div>
<label style="font-size: 30px;margin-left: 30px;margin-top: -35px;float: left" for="">艺术特点</label>
<br>
<p style="padding-left: 80px;padding-right: 300px;font-family: 宋体;font-size: 26px">
<br><label style="font-family: 方正粗黑宋简体" href="">一、淮剧表演艺术特色</label><br>
从唱法表演上来讲，淮剧有西路淮剧与东路淮剧之分，西路淮剧主要流行于淮安和宝应地区，其表演唱法以“老淮调”为主调，表演上略显生硬；东路淮剧则以盐阜地区为主要发源地，其表演唱法以“自由调”为主调，表演相对灵活。在表演上，由于淮剧曾与徽戏、京剧同台演出，所以吸收了很多这两个剧种的表演程式，比如说淮剧在武打方面受徽戲影响较深，一些诸如耍盘子、耍火流星、耍手帕、踩木球等杂技与“劈叉”“倒立”“乌龙搅”等动作都是从徽戏吸收而来。但淮剧与徽戏、京剧不同的是它同时保持了民间小戏的说唱艺术特点，尤其是以唱功见长。
淮剧的各种曲调一共100多个，均有完整的“起、落板”与“丢、接板”的结构形式。它的唱腔音乐主要以“淮调”“拉调”“自由调”为主。淮剧清装戏《杨乃武与小白菜》，选用“悲调”作为人物的音乐基调，定位清晰，淮韵极佳。在淮剧音乐传统的表现程式里，凡遇悲切伤感的情节，必用“悲调”。这首通称为“拉悲调”样式的“悲调”，没有更多华彩的旋律，不刻意追求富丽的色彩，而是让其在尽情自由的抒发中，强化其艺术表现的严谨性和唱腔本体的内在意蕴。面对酷刑的无情重压，为情所困的杨乃武与毕秀姑于监房相遇，互叙衷肠，一段深情的“悲调”由此而生。在这里，梁伟平用最易煽情的颤音、擞腔，和着上下起伏不定的凄楚旋律予以激情倾诉，似哀告，似呐喊，将一个受着严酷伤害的灵魂，一个想从昔日宁静的生活回忆中寻得一丝慰藉的杨乃武勾画得生动而逼真。充满悲怨的曲调，抒发了杨乃武难以排遣的怨恨之情。曲牌中间段落的“平板”，几乎是在同一个平行乐句上的反复或延展，有的则是对“悲调”唱腔素材作各种各样的浓缩。这段多为平静模仿型的上下对句，似为人物间心灵的对话。梁伟平此刻时断时续、苦味十足的咏唱，又犹如一声惊雷，让我们听到了杨乃武那颗受伤的心在颤抖，于是赞叹他唱出了人物抑压在心中的激愤、痛苦、悲切和绝望。
淮剧的伴奏乐器，管弦乐以二胡、三弦、扬琴、笛、唢呐为主，打击乐器则以扁暴、苏锣、铙钹、堂鼓等为主。
<br><br><label style="font-family: 方正粗黑宋简体" href="">二、淮剧人物塑造艺术特色</label><br>
淮剧创作中的人物塑造还有一个重要特点，就是同时塑造几个互相映衬的人物形象。这个特点的获得，一方面源自于创作观念的转变，一部作品可以塑造一个或者同时塑造几个人物形象，人物之间既可以互相衬托、互相作用、互相依赖，展示生活的丰富多彩和错综复杂，人物之间也可以独立行事，也可以有独立的思想和行动逻辑，以展示人物的独特性；另一方面得益于剧作家对戏曲艺术形式的自如掌握和运用，如果没有戏曲创作的实践和一定的积累，也难以实现剧作家的创作初衷。淮剧《奇婚记》以豪迈而又悲壮、细腻而又清新的众多人物形象给人耳目一新的审美感受。作品中众多人物形象的确立与塑造并非刻意杜撰，它首先来自客观的现实存在，而人物进入戏曲作品也并非随心所欲。淮剧《奇婚记》根据郑彦英小说《太阳》改编。这部作品的改编上演在现代戏的戏曲化方面为我们提供了一个可资借鉴的范例。20世纪80年代初期，《奇婚记》以十年内乱时期某偏僻农村为背景，述说了一个12岁的小姑娘秋萍与年近四十的单身汉农民田大憨辛酸的婚姻。秋萍的父亲临终前将女儿许配给大憨，因为年龄悬殊，善良的大憨与年幼的秋萍实以兄妹关系相依为命。八年后，秋萍长大却与和自己年龄相仿的田雨春相爱。秋萍在恩情与爱情中煎熬；大憨在爱护与背叛中受到打击。最后，在富有传奇色彩的故事演绎中大憨成全了秋萍与田雨春的婚姻。剧作运用戏曲化的处理方法，使整部作品始终在“戏曲”的韵律下运行，特别是“门里门外”闩门、擂门、开门、关门的表演，门里门外人物的相互倾诉等，充分运用了戏曲化的处理方法，将虚拟的表现手段成功用在了现代戏的表演中，为解决现代戏内容与形式的矛盾，获得了成功的经验。。 </p>
</div>
</body>
<script src="../../static/js/jquery.js"></script>
<script src="../../static/js/index.js"></script>
</html>
- 粤.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>粤剧</title>
<link rel="stylesheet" type=text/css href="../../static/css/drama.css">
</head>
<body id="example1">
<div class="contain_logo" >
<div class="logo">
<img src="../../static/file/脸谱.jpg" style="opacity: 0.8" width="858px" height="300px" alt="">
</div>
<div class="title">
<p class="title_text" style="font-family: 宋体;">剧种介绍</p>
<p class="title_text1" style="font-family: 黑体;">--粤剧</p>
</div>
</div>
<div class="contain_column" >
<ul style="font-family: 黑体; " class="contain_ul">
<li >
<a id="a11" href="../index.html" >首 页</a>
</li>
<li>
<a href="javascript:void(0)" id="hidden_a">经典剧目▼</a>
<div id="hidden1" style="display:none" class="contain_show_hidden1">
<a href="" class="a1">霸王别姬</a><br>
<a href="" class="a1">牡丹亭</a><br>
<a href="" class="a1">西厢记</a><br>
<a href="" class="a1">白蛇传</a><br>
<a href="" class="a1">穆桂英挂帅</a><br>
<a href="" class="a1">梁山伯与祝英台</a>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_b">名角介绍▼</a>
<div id="hidden2" style="display:none" class="contain_show_hidden2">
<a href="../名角介绍/meilanfang.html" class="a2">梅兰芳</a><br>
<a href="../名角介绍/malan.html" class="a2">马兰</a><br>
<a href="../名角介绍/shangxiaoyun.html" class="a2">尚小云</a><br>
<a href="../名角介绍/chengyanqiu.html" class="a2">程砚秋</a><br>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_c">剧种介绍▼</a>
<div id="hidden3" style="display:none" class="contain_show_hidden3">
<a href="京.html" class="a3">京剧</a><br>
<a href="川.html" class="a3">川剧</a><br>
<a href="粤.html" class="a3">粤剧</a><br>
<a href="昆.html" class="a3">昆剧</a><br>
<a href="豫.html" class="a3">豫剧</a><br>
<a href="淮.html" class="a3">淮剧</a><br>
</div>
</li>
</ul>
</div> <div class="contain_recommend">
<h3 style="color: #fffcdd;font-family: 新宋体;font-size: 50px">名段推荐</h3>
<div class="contain_list">
<ul style="font-size: 25px; ">
<li><a href="">粤剧 搜书院</a></li><br><hr>
<li><a href="">粤剧 关汉卿</a></li><br><hr>
<li><a href="">粤剧 柳毅传书</a></li><br><hr>
<li><a href="">粤剧 十奏严嵩</a></li><br><hr>
<li><a href="">粤剧 三件宝</a></li><br><hr>
<li><a href="">粤剧 寸金桥</a></li><br><hr>
<li><a href="">粤剧 金鸡岭</a></li><br><hr>
<li><a href="">粤剧 红花岗</a></li><br><hr>
<li><a href="">粤剧 山乡风云</a></li><br>
</ul>
</div>
</div>
<div class="contain_content" style="height: 1200px">
<label style="font-size: 80px" for="">粤剧</label>
<br><br><br><br><br><br><hr>
<div class="contain_label"></div>
<label style="font-size: 30px;margin-left: 30px;margin-top: -35px;float: left" for="">介绍</label>
<p style="padding-left: 80px;padding-right: 300px;font-family: 宋体;font-size: 26px">
粤剧（Cantonese Opera），又称“广东大戏”，发源于佛山，是以粤方言演唱，汉族传统戏曲剧种之一，
流行于广东珠三角、粤西、港澳地区以及广西的东南部，在国外粤语的华裔聚居区也时有演出。其源流可溯
到明嘉靖年间，由于广府人的先祖来自不同地域，所以粤剧的发展也受到弋阳腔、昆腔、汉剧、徽剧、秦腔等
多个剧种的影响而发展起来，取各家之长，自成风格，既与传统的戏曲文化一脉相承，又具有浓郁的岭南文化特色。
粤剧是集合唱念做打、乐师配乐、戏台服饰、抽象形体的表演艺术。粤剧每一个行当都有各自独特的服饰打扮。以后又在伴奏
乐器上大胆采用了一些西洋乐器，大大增强了烘托唱腔和戏剧动作的效果。
粤剧于2006年5月20日列入第一批国家级非物质文化遗产名录。2009年9月30日，粤剧被联合国教科文组织列入
人类非物质文化遗产代表作名录。
</p>
<hr>
<div class="contain_label"></div>
<label style="font-size: 30px;margin-left: 30px;margin-top: -35px;float: left" for="">艺术特点</label>
<br>
<p style="padding-left: 80px;padding-right: 300px;font-family: 宋体;font-size: 26px">
粤剧演员的表演工艺分为四大基本类别－唱、做、念、打。
唱是指唱功，配合不同的角色有各自不同演唱的方式，包括平喉及子喉。平喉是平常说
话的声调，一般男性角色小生就是采用平喉演出。子喉是比平喉调子高了八度，常常以
假音来扮演女性角色。除了以音阶来分类，也会以声音特色来分类。大喉是使用粗犷声
音。同时，粤剧也会吸收不同的地方的独特唱腔，例如来自福建的广东南音、木鱼、广东的本地民谣粤讴及板眼。
做是指做功，又称身段，即身体表演。当中包括手势、台步、走位、关目、做手、身段
、水袖、翎子功、须功、水发、抽象表演和传统功架。 念是指念白，即念出台词。用说话交代情节、人物的思想感情。
打是指武打，例如：舞水袖、水发、玩扇子、武刀弄枪、耍棍挥棒，舞动旗帜等等。 </p>
</div>
</body>
<script src="../../static/js/jquery.js"></script>
<script src="../../static/js/index.js"></script>
</html>
- 豫.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>豫剧</title>
<link rel="stylesheet" type=text/css href="../../static/css/drama.css">
</head>
<body id="example1">
<div class="contain_logo" >
<div class="logo">
<img src="../../static/file/脸谱.jpg" style="opacity: 0.8" width="858px" height="300px" alt="">
</div>
<div class="title">
<p class="title_text" style="font-family: 宋体;">剧种介绍</p>
<p class="title_text1" style="font-family: 黑体;">--豫剧</p>
</div>
</div>
<div class="contain_column" >
<ul style="font-family: 黑体; " class="contain_ul">
<li >
<a id="a11" href="../index.html" >首 页</a>
</li>
<li>
<a href="javascript:void(0)" id="hidden_a">经典剧目▼</a>
<div id="hidden1" style="display:none" class="contain_show_hidden1">
<a href="" class="a1">霸王别姬</a><br>
<a href="" class="a1">牡丹亭</a><br>
<a href="" class="a1">西厢记</a><br>
<a href="" class="a1">白蛇传</a><br>
<a href="" class="a1">穆桂英挂帅</a><br>
<a href="" class="a1">梁山伯与祝英台</a>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_b">名角介绍▼</a>
<div id="hidden2" style="display:none" class="contain_show_hidden2">
<a href="../名角介绍/meilanfang.html" class="a2">梅兰芳</a><br>
<a href="../名角介绍/malan.html" class="a2">马兰</a><br>
<a href="../名角介绍/shangxiaoyun.html" class="a2">尚小云</a><br>
<a href="../名角介绍/chengyanqiu.html" class="a2">程砚秋</a><br>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_c">剧种介绍▼</a>
<div id="hidden3" style="display:none" class="contain_show_hidden3">
<a href="京.html" class="a3">京剧</a><br>
<a href="川.html" class="a3">川剧</a><br>
<a href="粤.html" class="a3">粤剧</a><br>
<a href="昆.html" class="a3">昆剧</a><br>
<a href="豫.html" class="a3">豫剧</a><br>
<a href="淮.html" class="a3">淮剧</a><br>
</div>
</li>
</ul>
</div> <div class="contain_recommend">
<h3 style="color: #fffcdd;font-family: 新宋体;font-size: 50px">名段推荐</h3>
<div class="contain_list">
<ul style="font-size: 25px; ">
<li><a href="">豫剧 春秋配</a></li><br><hr>
<li><a href="">豫剧 对花枪</a></li><br><hr>
<li><a href="">豫剧 三上轿</a></li><br><hr>
<li><a href="">豫剧 宇宙锋</a></li><br><hr>
<li><a href="">豫剧 地塘板</a></li><br><hr>
<li><a href="">豫剧 提寇</a></li><br><hr>
<li><a href="">豫剧 铡美案</a></li>
</ul>
</div>
</div>
<div class="contain_content">
<label style="font-size: 80px" for="">豫剧</label>
<br><br><br><br><br><br><hr>
<div class="contain_label"></div>
<label style="font-size: 30px;margin-left: 30px;margin-top: -35px;float: left" for="">介绍</label>
<p style="padding-left: 80px;padding-right: 300px;font-family: 宋体;font-size: 26px">
豫剧（英文：Yu Opera），是中国五大戏曲剧种之一 ，发源于河南开封。豫剧是在河南梆子的基础上不断继承、
改革和创新发展起来的。建国后因河南简称“豫”，故称豫剧。
豫剧以唱腔铿锵大气、抑扬有度、行腔酣畅、吐字清晰、韵味醇美、生动活泼、有血有肉、善于表达人物内心情感著称，
凭借其高度的艺术性而广受各界人士欢迎。因其音乐伴奏用枣木梆子打拍，故早期得名河南梆子。
据文化部统计，除河南省外，湖北、安徽、江苏、山东、河北、山西、陕西、青海以及新疆、台湾等省市区都有专业豫剧团分布。
2019年11月，文化和旅游部办公厅组织开展了国家级非物质文化遗产代表性项目保护单位检查和调整工作，豫剧保护单位为河南省非物质文化遗产保护中心。
</p>
<hr>
<div class="contain_label"></div>
<label style="font-size: 30px;margin-left: 30px;margin-top: -35px;float: left" for="">艺术特点</label>
<br>
<p style="padding-left: 80px;padding-right: 300px;font-family: 宋体;font-size: 26px">
豫剧因各地语音差异，在音乐上形成带有区域特色的艺术流派。清末民初，洛阳等地的豫剧多用下五音，而
开封等地的豫剧多用上五音，形成鲜明对比。为了区别，豫剧艺人将洛阳等地的唱腔称为豫西调（又称西府
调），称封丘各地的唱腔为豫东调（又称祥符调）。新中国成立后，豫剧专家又把豫东调细分为祥符调、豫
东调、沙河调。这一划分得到广泛认同，即以封丘为中心的祥符调；以商丘为中心的豫东调；以洛阳为中心
的豫西调；流行于豫东南沙河一带的沙河调，又叫“本地梆”。其中祥符调、沙河调、豫东调多用上五音，豫
西调多用下五音；如今祥符调和沙河调都已经没落，豫东调与豫西调表现出顽强的生命力。
在豫剧繁盛时期，从事豫剧专业的演员，不仅有汉族，还有回族、满族、朝鲜族、
蒙古族、高山族、犹太人等少数族裔。豫剧根植中原、昂奋勃发的宏大气魄，雅俗共赏的审美效应，高亢激
越、简洁明快的唱腔曲调，古今兼具、老少咸宜的表演风格，幽默诙谐、乐观向上的语言情趣，不难不涩、
南北易懂的中州韵音，质朴无华、宽厚浩然的文化风貌，反映现实、贴近生活、有血有肉的大众格局等。
豫剧艺术古今兼纳、刚柔相济、豁达宽厚、有“中和”之美。首先，豫剧唱腔铿锵有力，大气磅礴、抑扬有度
、富有热情奔放的阳刚之气，具有很大的情感力度。其次，豫剧行腔酣畅、吐字清晰、本色自然、有血有肉
、善于表达人物内心情感。再者，豫剧节奏鲜明强烈、矛盾冲突尖锐、故事情节有头有尾，再加上曲调诙谐
欢快，使得豫剧不仅适合演出轻松的喜剧，又适合演帝王将相的大场面戏，豫西调委婉动听，唱腔悲凉故很
适合演悲剧。豫剧在关键剧情上一般都安排有大板唱腔，唱腔流畅、节奏鲜明、极具挑战性，一般吐字清晰
，易被观众听清。 </p>
</div>
</body>
<script src="../../static/js/jquery.js"></script>
<script src="../../static/js/index.js"></script>
</html>
10.川.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>川剧</title>
<link rel="stylesheet" type=text/css href="../../static/css/drama.css">
</head>
<body id="example1">
<div class="contain_logo" >
<div class="logo">
<img src="../../static/file/脸谱.jpg" style="opacity: 0.8" width="858px" height="300px" alt="">
</div>
<div class="title">
<p class="title_text" style="font-family: 宋体;">剧种介绍</p>
<p class="title_text1" style="font-family: 黑体;">--川剧</p>
</div>
</div>
<div class="contain_column" >
<ul style="font-family: 黑体; " class="contain_ul">
<li >
<a id="a11" href="../index.html" >首 页</a>
</li>
<li>
<a href="javascript:void(0)" id="hidden_a">经典剧目▼</a>
<div id="hidden1" style="display:none" class="contain_show_hidden1">
<a href="" class="a1">霸王别姬</a><br>
<a href="" class="a1">牡丹亭</a><br>
<a href="" class="a1">西厢记</a><br>
<a href="" class="a1">白蛇传</a><br>
<a href="" class="a1">穆桂英挂帅</a><br>
<a href="" class="a1">梁山伯与祝英台</a>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_b">名角介绍▼</a>
<div id="hidden2" style="display:none" class="contain_show_hidden2">
<a href="../名角介绍/meilanfang.html" class="a2">梅兰芳</a><br>
<a href="../名角介绍/malan.html" class="a2">马兰</a><br>
<a href="../名角介绍/shangxiaoyun.html" class="a2">尚小云</a><br>
<a href="../名角介绍/chengyanqiu.html" class="a2">程砚秋</a><br>
</div>
</li>
<li>
<a href="javascript:void(0)" id="hidden_c">剧种介绍▼</a>
<div id="hidden3" style="display:none" class="contain_show_hidden3">
<a href="京.html" class="a3">京剧</a><br>
<a href="川.html" class="a3">川剧</a><br>
<a href="粤.html" class="a3">粤剧</a><br>
<a href="昆.html" class="a3">昆剧</a><br>
<a href="豫.html" class="a3">豫剧</a><br>
<a href="淮.html" class="a3">淮剧</a><br>
</div>
</li>
</ul>
</div> <div class="contain_recommend">
<h3 style="color: #fffcdd;font-family: 新宋体;font-size: 50px">名段推荐</h3>
<div class="contain_list">
<ul style="font-size: 25px; ">
<li><a href="">川剧 卖画拍门</a></li><br><hr>
<li><a href="">川剧 裁衣</a></li><br><hr>
<li><a href="">川剧 空城计</a></li><br><hr>
<li><a href="">川剧 武松杀嫂</a></li><br><hr>
<li><a href="">川剧 马房放奎</a></li><br><hr>
<li><a href="">川剧 五台会兄</a></li><br><hr>
<li><a href="">川剧 花田写扇</a></li>
</ul>
</div>
</div>
<div class="contain_content" style="height: 1200px">
<label style="font-size: 80px" for="">川剧</label>
<br><br><br><br><br><br><hr>
<div class="contain_label"></div>
<label style="font-size: 30px;margin-left: 30px;margin-top: -35px;float: left" for="">介绍</label>
<p style="padding-left: 80px;padding-right: 300px;font-family: 宋体;font-size: 26px">
川剧俗称川戏，主要流行于中国西南地区川渝云贵四省市的汉族地区，是融汇高腔、昆曲、胡
琴(即皮黄)、弹戏(即梆子)和四川民间灯戏五种声腔艺术而成的传统剧种。
川剧，是中国传统戏曲剧种之一，流行于四川东中部、重庆及贵州、云南部分地区。川剧脸谱，是川剧
表演艺术中重要的组成部分，是历代川剧艺人共同创造并传承下来的艺术瑰宝。川剧由昆腔、高
腔、胡琴、弹戏、灯调五种声腔组成。川剧分小生，须生，旦，花脸，丑角5个行当，各行当均有自成
体系的功法程序，尤以“三小”，即小丑，小生，小旦的表演最具特色，在戏剧表现手法、表演技法方面
多有卓越创造，能充分体现中国戏曲虚实相生、遗形写意的美学特色。2006年5月20日，川剧经
国务院批准列入第一批国家级非物质文化遗产名录。
</p>
<hr>
<div class="contain_label"></div>
<label style="font-size: 30px;margin-left: 30px;margin-top: -35px;float: left" for="">艺术特点</label>
<br>
<p style="padding-left: 80px;padding-right: 300px;font-family: 宋体;font-size: 26px">
川剧由昆腔、高腔、胡琴、弹戏、灯调五种声腔组成。其中，除灯调系源于本土外，其余均由外地传入。这五种声腔和为五种声腔伴奏的锣鼓、唢呐曲牌以及琴、笛曲谱等音乐形式。川剧音乐博采众长，兼收并蓄，她囊括吸收了全国戏曲各大声腔体系的营养，与四川的地方语言、声韵、音乐融汇结合，衍变形成为形式多样、曲牌丰富、结构严谨、风格迥异的地方戏曲音乐。 </p>
</div>
</body>
<script src="../../static/js/jquery.js"></script>
<script src="../../static/js/index.js"></script>
</html>
静态文件
- index.js
$(document).ready(function(e) {
$("#hidden_a").click(function (e) {
$("#hidden,#hidden1").toggle();
});
});
$(document).ready(function(e) {
$("#hidden_b").click(function (e) {
$("#hidden,#hidden2").toggle();
});
});
$(document).ready(function(e) {
$("#hidden_c").click(function (e) {
$("#hidden,#hidden3").toggle();
});
});
- index.css
#example1{
background-color: rgba(60, 19, 94, 0.8);
}
.contain_logo{
width:100%;
height: 300px;
min-width: 1500px;
padding-right: 25px;
padding-bottom: 10px;
border: 20px darkblue;
margin: 10px auto;
background-color: red;
background-image: linear-gradient(#e66465,#9198e5);
}
.logo{
width: 858px;
height: 300px;
border: 20px darkblue;
background: none;
margin: 10px ;
}
.title{
width: 600px;
height: 150px;
border: 20px darkblue;
padding-left:50px;
padding-right: 100px;
padding-bottom: 10px;
padding-top: 10px;
background: none;
margin-top: -250px ;
margin-left: 1400px;
margin-bottom: 20px;
}
.contain_column{
min-width: 1500px;
padding-right: 25px;
width:100%;
height: 100px;
background: rgba(18, 50, 63, 0.94);
margin: 0 auto;
}
.contain_show_hidden{
width:800px;
height: 50px;
margin: auto;
background-color: white;
}
.contain_show_hidden1,.contain_show_hidden2,.contain_show_hidden3{
width:195px;
float:left;
z-index:999;
height: 160px;
position:absolute;
margin: auto;
background-color: rgba(16, 39, 122, 0.84);
}
.contain_content{
width:1200px;
height: 1200px;
z-index:998;
background-color: darkred;
border-radius: 15px 50px;
float: left;
padding-left: 50px;
padding-right: 150px;
padding-top: 50px;
margin-left: 80px;
margin-right: 80px;
margin-top: 40px;
}
.contain_recommend {
width: 500px;
height: 800px;
border-radius: 25px;
background-color: #9198e5;
margin-left: 1600px;
margin-top: 50px;
}
.contain_list{
width: 400px;
height: 500px;
border-radius: 25px 10px;
margin: 10px auto;
padding:20px 10px;
}
.contain_content1{
width:1500px;
height: 350px;
z-index:998;
margin-bottom: 10px;
margin-top: 5px;
}
.contain_text{
width: 800px;
height: 500px;
float: left;
}
.contain_image {
width: 480px;
height: 300px;
background-color: #9198e5;
float: left;
margin-top: 150px;
margin-left: 40px;
}
.contain_image1{
width: 480px;
height: 300px;
margin-top: 300px;
background-color: #96ff8b;
}
.contain_text1{
width: 750px;
height:500px;
margin-left: 550px;
margin-top: -350px;
}
.introduce{
width:1200px;
height: 200px;
background-color: white;
margin-top: 500px ;
margin-left:550px;
}
ul{
list-style-type: none;
overflow: hidden;
margin: auto;
}
li:hover{
background-color: black;
}
#hidden_a,#hidden_b,#hidden_c{
text-decoration: none;
color: whitesmoke;
font-size: 25px;
padding: 35px 35px;
display: block;
text-align: center;
}
#a11{
text-decoration: none;
color: whitesmoke;
font-size: 25px;
padding: 35px 60px;
display: block;
text-align: center;
}
li {
float: left;
}
.a1,.a2,.a3{
font-size: 20px;
text-decoration: none;
color: white;
font-weight: lighter;
font-family: 仿宋;
}
.a1:hover, .a2:hover, .a3:hover{
background-color: indianred;
}
.title_text{
margin: 10px auto;
font-size: 100px;
text-shadow :5px 5px 5px #FF0000;
}
.title_text1{
margin: 10px auto;
font-size: 50px;
color: #dddddd;
text-shadow :5px 5px 5px #0c1532;
margin-top: 10px;
margin-left: 300px;
}
li>a{
text-decoration: none;
color: #12323f;
}
li>a:hover{
background-color: indianred;
}
.table{
border-collapse:collapse!important}
.table td,.table th{background-color:#fff!important}
.table-bordered td,.table-bordered th{border:1px solid #ddd!important}
- drama.css
#example1{
background-color: rgba(60, 19, 94, 0.8);
}
.contain_logo{
width:100%;
height: 300px;
min-width: 1500px;
padding-right: 25px;
padding-bottom: 10px;
border: 20px darkblue;
margin: 10px auto;
background-color: red;
background-image: linear-gradient(#e66465,#9198e5);
}
.logo{
width: 858px;
height: 300px;
border: 20px darkblue;
background: none;
margin: 10px ;
}
.title{
width: 600px;
height: 150px;
border: 20px darkblue;
padding-left:50px;
padding-right: 100px;
padding-bottom: 10px;
padding-top: 10px;
background: none;
margin-top: -250px ;
margin-left: 1400px;
margin-bottom: 20px;
}
.contain_column{
min-width: 1500px;
padding-right: 25px;
width:100%;
height: 100px;
background: rgba(18, 50, 63, 0.94);
margin: 0 auto;
}
.contain_show_hidden{
width:800px;
height: 50px;
margin: auto;
background-color: white;
}
.contain_show_hidden1,.contain_show_hidden2,.contain_show_hidden3{
width:195px;
float:left;
z-index:999;
height: 160px;
position:absolute;
margin: auto;
background-color: rgba(16, 39, 122, 0.84);
}
.contain_content{
width:1200px;
height: 1500px;
z-index:998;
background-color: #647c8b;
border-radius: 15px 50px;
float: left;
padding-left: 50px;
padding-right: 150px;
padding-top: 50px;
margin-left: 100px;
margin-right: 80px;
margin-top: 40px;
}
.contain_label{
width: 24px;
height: 36px;
background-color: dodgerblue;
}
.contain_text{
width: 800px;
height: 500px;
float: left;
}
.contain_image {
width: 300px;
height: 410px;
background-color: #9198e5;
margin-top: -800px;
margin-left: 1310px;
}
.contain_recommend {
width: 500px;
height: 1200px;
border-radius: 25px;
background-color: #4c8b86;
margin-left: 100px;
float: left;
margin-top: 50px;
}
.contain_list{
width: 400px;
height: 500px;
border-radius: 10px 10px;
margin: 10px;
padding:20px 10px;
}
.contain_image1{
width: 400px;
height: 300px;
margin-top: -800px;
margin-left: 1210px;
background-color: #96ff8b;
}
.contain_image2{
width: 280px;
height: 390px;
margin-top: -800px;
margin-left: 1260px;
background-color: #96ff8b;
}
.contain_image3{
width: 292px;
height: 500px;
margin-top: -800px;
margin-left: 1260px;
background-color: #96ff8b;
}
.contain_image4{
width: 250px;
height: 340px;
margin-top: -800px;
margin-left: 1260px;
background-color: #96ff8b;
}.contain_image5{
width: 270px;
height: 380px;
margin-top: -900px;
margin-left: 1260px;
background-color: #96ff8b;
}
.contain_image6{
width: 320px;
height: 400px;
margin-top: -800px;
margin-left: 1260px;
background-color: #96ff8b;
}.contain_image7{
width: 300px;
height: 240px;
margin-top: -900px;
margin-left: 1260px;
background-color: #96ff8b;
}
ul{
list-style-type: none;
overflow: hidden;
margin: auto;
}
li:hover{
background-color: black;
}
#hidden_a,#hidden_b,#hidden_c{
text-decoration: none;
color: whitesmoke;
font-size: 25px;
padding: 35px 35px;
display: block;
text-align: center;
}
#a11{
text-decoration: none;
color: whitesmoke;
font-size: 25px;
padding: 35px 60px;
display: block;
text-align: center;
}
li {
float: left;
}
.a1,.a2,.a3{
font-size: 20px;
text-decoration: none;
color: white;
font-weight: lighter;
font-family: 仿宋;
}
.a1:hover, .a2:hover, .a3:hover{
background-color: indianred;
}
.title_text{
margin: 10px auto;
font-size: 100px;
text-shadow :5px 5px 5px #FF0000;
}
.title_text1{
margin: 10px auto;
font-size: 50px;
color: #dddddd;
text-shadow :5px 5px 5px #0c1532;
margin-top: 10px;
margin-left: 300px;
}
li>a{
text-decoration: none;
color: #12323f;
}
li>a:hover{
background-color: indianred;
}
.table{
border-collapse:collapse!important}
.table td,.table th{background-color:#fff!important}
.table-bordered td,.table-bordered th{border:1px solid #ddd!important}
- character.css
#example1{
background-color: rgba(60, 19, 94, 0.8);
}
.contain_logo{
width:100%;
height: 300px;
min-width: 1500px;
padding-right: 25px;
padding-bottom: 10px;
border: 20px darkblue;
margin: 10px auto;
background-color: red;
background-image: linear-gradient(#e66465,#9198e5);
}
.logo{
width: 858px;
height: 300px;
border: 20px darkblue;
background: none;
margin: 10px ;
}
.title{
width: 600px;
height: 150px;
border: 20px darkblue;
padding-left:50px;
padding-right: 100px;
padding-bottom: 10px;
padding-top: 10px;
background: none;
margin-top: -250px ;
margin-left: 1400px;
margin-bottom: 20px;
}
.contain_column{
min-width: 1500px;
padding-right: 25px;
width:100%;
height: 100px;
background: rgba(18, 50, 63, 0.94);
margin: 0 auto;
}
.contain_show_hidden{
width:800px;
height: 50px;
margin: auto;
background-color: white;
}
.contain_show_hidden1,.contain_show_hidden2,.contain_show_hidden3{
width:195px;
float:left;
z-index:999;
height: 160px;
position:absolute;
margin: auto;
background-color: rgba(16, 39, 122, 0.84);
}
.contain_content{
width:1500px;
height: 1500px;
z-index:998;
background-color: #647c8b;
border-radius: 15px 50px;
float: left;
padding-left: 50px;
padding-right: 150px;
padding-top: 50px;
margin-left: 200px;
margin-right: 80px;
margin-top: 40px;
}
.contain_label{
width: 24px;
height: 36px;
background-color: dodgerblue;
}
.contain_text{
width: 800px;
height: 500px;
float: left;
}
.contain_image {
width: 300px;
height: 410px;
background-color: #9198e5;
margin-top: -800px;
margin-left: 1310px;
}
.contain_image1{
width: 400px;
height: 300px;
margin-top: -800px;
margin-left: 1210px;
background-color: #96ff8b;
}
.contain_image2{
width: 280px;
height: 390px;
margin-top: -800px;
margin-left: 1260px;
background-color: #96ff8b;
}
.contain_image3{
width: 292px;
height: 500px;
margin-top: -800px;
margin-left: 1260px;
background-color: #96ff8b;
}
.contain_image4{
width: 250px;
height: 340px;
margin-top: -800px;
margin-left: 1260px;
background-color: #96ff8b;
}.contain_image5{
width: 270px;
height: 380px;
margin-top: -900px;
margin-left: 1260px;
background-color: #96ff8b;
}
.contain_image6{
width: 320px;
height: 400px;
margin-top: -800px;
margin-left: 1260px;
background-color: #96ff8b;
}.contain_image7{
width: 300px;
height: 240px;
margin-top: -900px;
margin-left: 1260px;
background-color: #96ff8b;
}
ul{
list-style-type: none;
overflow: hidden;
margin: auto;
}
li:hover{
background-color: black;
}
#hidden_a,#hidden_b,#hidden_c{
text-decoration: none;
color: whitesmoke;
font-size: 25px;
padding: 35px 35px;
display: block;
text-align: center;
}
#a11{
text-decoration: none;
color: whitesmoke;
font-size: 25px;
padding: 35px 60px;
display: block;
text-align: center;
}
li {
float: left;
}
.a1,.a2,.a3{
font-size: 20px;
text-decoration: none;
color: white;
font-weight: lighter;
font-family: 仿宋;
}
.a1:hover, .a2:hover, .a3:hover{
background-color: indianred;
}
.title_text{
margin: 10px auto;
font-size: 100px;
text-shadow :5px 5px 5px #FF0000;
}
.title_text1{
margin: 10px auto;
font-size: 50px;
color: #dddddd;
text-shadow :5px 5px 5px #0c1532;
margin-top: 10px;
margin-left: 300px;
}
li>a{
text-decoration: none;
color: #12323f;
}
li>a:hover{
background-color: indianred;
}
.table{
border-collapse:collapse!important}
.table td,.table th{background-color:#fff!important}
.table-bordered td,.table-bordered th{border:1px solid #ddd!important}
- jquery.js
自行下载
因为刚刚开始学，css写的时候有好多重复的部分没有做到简化。
6. file中的图片
再附上一张图片对应的目录
扫一扫
3161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
