1、引言
设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决
2、作品介绍
川剧网页采用html，css技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。
2.1、作品简介方面
川剧网页系统采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选
2.2、作品二次开发工具
此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）。
2.3、作品技术介绍
html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。 使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计
3、作品演示
【coding加油站】HTML设计--戏曲网页设计--川剧
3.1、首页
相关代码：
<div class="banner w">
<ul class="banner-slider">
<li><a href="./html/history.html"><img src="./material/3.homePage/2、banner/banner4.png" alt=""></a></li>
<li><a href="./html/history.html"><img src="./material/3.homePage/2、banner/banner1.png" alt=""></a></li>
<li><a href="./html/history.html"><img src="./material/3.homePage/2、banner/banner2.png" alt=""></a></li>
<li><a href="./html/history.html"><img src="./material/3.homePage/2、banner/banner3.png" alt=""></a></li>
<li><a href="./html/history.html"><img src="./material/3.homePage/2、banner/banner4.png" alt=""></a></li>
<li><a href="./html/history.html"><img src="./material/3.homePage/2、banner/banner1.png" alt=""></a></li>
</ul>
<!-- 指示器 -->
<ul class="banner-indicator">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 耳朵图 -->
<span class="banner-prev"><</span>
<span class="banner-next">></span>
</div>
<!-- 川剧历史文化 -->
<div class="culture">
<div class="culture-content">
<!-- 总的一个大盒子 -->
<div class="tab">
<!-- 上面切换栏 -->
<div class="tab_list">
<ul>
<li class="current"><i class="iconfont"></i</li>
<li><i class="iconfont"></i</li>
</ul>
</div>
<!-- 下面一个介绍区域 -->
<div class="tab_con">
<div class="item"><p>川剧，俗称川戏，主要流行于中国西南地区川渝云贵四省市的汉族地区，是融汇高腔、昆曲、胡琴(即皮黄)、弹戏(即梆子)和四川民间灯戏五种声腔艺术而成的传统剧种。</p>
<p class="art">川剧是汉族戏曲剧种之一，流行于四川东中部、重庆及贵州、云南部分地区。</p>
<p>川剧脸谱，是川剧表演艺术中重要的组成部分，是历代川剧艺人共同创造并传承下来的艺术瑰宝。</p></div>
<div class="item">
<p>川剧由昆腔、高腔、胡琴、弹戏、灯调五种声腔组成。</p>
<p class="art-one">川剧分小生，须生，旦，花脸，丑角5个行当，各行当均有自成体系的功法程序，尤以“三小”，即小丑，小生，小旦的表演最具特色，在戏剧表现手法、表演技法方面多有卓越创造，能充分体现中国戏曲虚实相生、遗形写意的美学特色。</p>
<p>2006年5月20日，川剧经国务院批准列入第一批国家级非物质文化遗产名录。</p>
</div>
</div>
</div>
</div>
<div class="cultrue-more"><a href="./html/history.html"><img src="./material/3.homePage/2、banner/more-index.png" alt=""></a></div>
<p class="shenru">川剧文化博大精深 深入学习了解川剧发展历史</p>
</div>3.2、历史文化
相关代码：
<div class="history-development">
<div class="history-logo"><img src="../material/4.history/3、lishifazhan/lishifazhan.png" alt=""></div>
<div class="tang">
<div class="tang-content">
<p>唐代起源</p>
<p>川剧在唐代曾被称为“川戏”，有资料显示，唐宪宗元和元年(公元806年) </p>
</div>
</div>
<div class="xia-one"><div class="xia-pic"><img src="../material/4.history/3、lishifazhan/xiangxia1.png" alt=""></div></div>
<div class="mingqin">
<p>明清发展</p>
<p>川剧，流行于四川全省及云南、贵州部分地区。原先外省流入的昆腔、高腔、胡琴腔（皮黄）、弹戏和四川民间灯戏五种声腔艺术，均单独在四川各地演出，清乾隆年间（公元1736年—公元1795年），由于这五种声腔艺术经常同台演出，日久逐渐形成共同的风格，清末时统称“川戏”，后改称“川剧”。</p>
</div>
<div class="xia-two"><div class="xia-pic"><img src="../material/4.history/3、lishifazhan/xiangxia1.png" alt=""></div></div>
<div class="zhijin">
<p>现代传承</p>
<p>2018年11月28日，重庆大学和电子科技大学的川剧项目入选第一批全国普通高校中华优秀传统文化传承基地名单。
2019年10月2日，在2019中国戏曲文化周上，川剧参与其中 </p>
</div>
</div>
<!-- 艺术唱腔 -->
<div class="art">
<div class="d"></div>
<div class="art-logo"><img src="../material/4.history//3、lishifazhan/changqiang.png" alt=""></div>
<!-- 壹 -->
<div class="art-qiang kunqiang">
<div class="art-qiang-pic"><img src="../material/4.history/4、changqiang/1kunqian.png" alt=""></div>
<ul class="art-qiang-xulie">
<li class="art-qiang-num">壹</li>
<li class="art-qiang-name">昆腔</li>
</ul>
<div class="art-qiang-content">
<p> 昆腔多文人之作，词白典雅，格律规严，演唱时特别讲究字正腔圆，加之曲牌曲折，节奏缓慢，如今已渐衰微。川昆源于苏昆，川剧艺人利用了昆曲长于歌唱和利于舞蹈的特点，往往只选取昆曲中某些曲牌或唱句，插入其它声腔中演唱，形成了川昆独具姿色的艺术风格。</p>
<p>川剧昆腔的曲牌结构与它的母体"苏昆"基本相同。应用时有"单支"和"成堂"两种形式。当前，以昆腔单一的声腔形式演出的剧目已经不多了，更多的是溶于高腔、胡琴、弹戏诸声腔之中，或者是与其它声腔共和。</p>
<p>昆腔的主奏乐器是笛子。伴奏锣鼓及方式与其余高、胡、弹、灯诸声腔相同，以大锣敲边和苏钹二件乐器的特殊单色构成锣鼓的"苏味"来区别于其它声腔的锣鼓伴奏。</p>
</div>
</div>
<!-- 贰 -->
<div class="art-qiang top-qiang-line gaoqiang">
<div class="art-qiang-pic"><img src="../material/4.history/4、changqiang/2gaoqiang.png" alt=""></div>
<ul class="art-qiang-xulie">
<li class="art-qiang-num">贰</li>
<li class="art-qiang-name">高腔 </li>
</ul>
<div class="art-qiang-content">
<p>高腔是川剧中最重要的一种声腔，是明末清初从外地传入四川。高腔传入四川以后，结合了四川方言、民间歌谣、劳动号子、发问说唱等形式，几经加工和提炼，逐步形成了具有地方特色的声腔音乐。</p>
<p>川剧高腔是曲牌体音乐，川剧高腔曲牌数量众多，形式复杂。它的结构基本上可以概括为：起腔、立柱、唱腔、扫尾。高腔剧目多、题材广、适应多种文词格式。高腔最主要的特点是没有乐器伴奏的干唱即所谓"一唱众和"的徒歌形式，它以帮打唱为一体。锣鼓的曲牌都是以这种方式组成的。有的曲牌帮腔多于唱腔，有的基本全部都是帮腔，有的曲牌只在首尾两句有帮腔，其具体形式是由戏决定的。</p>
<p>川剧高腔保留了南曲和北曲的优秀传统，它兼有高亢激越和婉转抒情的唱腔曲调。</p>
</div>
</div>
<!-- 叁 -->
<div class="art-qiang top-qiang-line huqin">
<div class="art-qiang-pic"><img src="../material/4.history/4、changqiang/3huqin.png" alt=""></div>
<ul class="art-qiang-xulie">
<li class="art-qiang-num">叁</li>
<li class="art-qiang-name">胡琴</li>
</ul>
<div class="art-qiang-content">
<p>胡琴是二黄与西皮腔的统称。因其主要伴奏乐器是"小胡琴"，故统称胡琴。《燕兰小谱》卷五记载："蜀伶新出琴腔，……其器不用笙笛，以胡琴为主，月琴应之，工尺咿唔如话"，可以说是四川胡琴腔的注脚。</p>
<p>胡琴腔约在乾隆年间就已经形成了。二黄包括正调（二黄）、阴调（反二黄）、老调三类基本腔。正调善于表现深沉、严肃、委婉和轻快的情绪；反二黄宜表现苍凉、凄苦、悲愤的情绪；老调则大多用于高亢、激昂的情绪。西皮腔与二黄腔的音乐性格相反，具有明朗、潇洒、激越、简练、流畅的品格。西皮、二黄多为单独使用，但也有不少剧目同时包纳二种声腔。</p>
</div>
</div>
<!-- 肆 -->
<div class="art-qiang top-qiang-line tanxi">
<div class="art-qiang-pic"><img src="../material/4.history/4、changqiang/4tanxi.png" alt=""></div>
<ul class="art-qiang-xulie">
<li class="art-qiang-num">肆</li>
<li class="art-qiang-name">弹戏</li>
</ul>
<div class="art-qiang-content">
<p> 川剧弹戏是用盖板胡琴为主要伴奏乐器演唱的一种戏曲声腔。它源自陕西的秦腔，属梆子系统，因此又有"川梆子"之称。弹戏虽源于秦腔，但它同四川地方语言结合，并受四川锣鼓和民间音乐的影响，经过长期的衍变，无论曲调、唱法还是唱腔结构都与秦腔有所不同，形成了自己独特的艺术风格，具有浓郁的四川地方色彩。尽管二者的关系不是相当接近，但从从曲调结构，调式特点，以及整个唱腔的韵味等方面分析，均可找到它们之间的渊源。</p>
<p>弹戏包括情绪完全不同的两类曲调：一类是长于表现喜的感情的叫"甜平"（又称"甜品"、"甜皮"、"甜腔"），一类叫"苦平"（又称"苦品"、"苦皮"），则善于表现悲的感情。它们具有相对的独立性，但它们的调式、板别、结构都是相同的，甚至在同一板别的唱腔中，曲调的骨架都一样。</p>
</div>
</div>
<!-- 伍 -->
<div class="art-qiang top-qiang-line dengdiao">
<div class="art-qiang-pic"><img src="../material/4.history/4、changqiang/5dengdiao.png" alt=""></div>
<ul class="art-qiang-xulie">
<li class="art-qiang-num">伍</li>
<li class="art-qiang-name">灯调</li>
</ul>
<div class="art-qiang-content">
<p> 灯戏在川剧中颇有特色，它源于四川民间的迎神赛社时的歌舞表演，也可以说是古代川蜀传统灯会的产物。所演为生活小戏，所唱为民歌小调，村坊小曲，体现了当地浓烈的生活气息</p>
<p>灯戏声腔的特点是：乐曲短小，节奏鲜明，轻松活泼，旋律明快，具有浓厚的四川地方风味。</p>
<p>灯调声腔主要由"胖筒筒"、发间小曲和"神歌腔"组成。灯戏伴奏的"胖筒筒"，是一种比二胡杆粗、筒身大、声音略带"嗡"声的琴。</p>
</div>
</div>
</div>3.3、精彩剧照
相关代码：
<div class="photo">
<!-- 第一列 -->
<ul class="photo-first">
<a href="../html/showPhoto1.html">
<li class="photo-first-one shd"><img src="../material/5.photo/3、juzhao/1.png" alt="">
<div class="shw"></div>
</li>
</a>
<a href="../html/showPhoto1.html">
<li class="photo-first-two">《死水微澜》剧照</li>
</a>
<a href="../html/2.html">
<li class="photo-first-three shd"><img src="../material/5.photo/3、juzhao/2.png" alt="">
<div class="shw"></div>
</a>
<a href="../html/2.html">
<li class="photo-first-four">《扫松》剧照</li>
</a>
<a href="../html/3.html">
<li class="photo-first-five shd"><img src="../material/5.photo/3、juzhao/3.png" alt="">
<div class="shw"></div>
</li>
</a>
<a href="../html/3.html">
<li class="photo-first-six">《曹甫走雪》剧照</li>
</a>
<a href="../html/4.html">
<li class="photo-first-seven shd"><img src="../material/5.photo/3、juzhao/4.png" alt="">
<div class="shw"></div>
</li>
</a>
<a href="../html/4.html">
<li class="photo-first-eight">《鱼禅寺》剧照</li>
</a>
</ul>
<!-- 第二列 -->
<ul class="photo-second">
<a href="../html/5.html">
<li class="shd"><img src="../material/5.photo/3、juzhao/5.png" alt="">
<div class="shw"></div>
</li>
</a>
<li><a href="../html/5.html">川剧《白蛇传》剧照</a></li>
<a href="../html/6.html">
<li class="shd"><img src="../material/5.photo/3、juzhao/6.png" alt="">
<div class="shw"></div>
</li>
</a>
<li><a href="../html/6.html">《清风亭》剧照</a></li>
<a href="../html/7.html">
<li class="shd"><img src="../material/5.photo/3、juzhao/7.png" alt="">
<div class="shw"></div>
</li>
</a>
<li> <a href="../html/7.html">《访白》剧照</a></li>
</ul>
<!-- 第三列 -->
<ul class="photo-third">
<a href="../html/8.html">
<li class="shd"><img src="../material/5.photo/3、juzhao/8.png" alt="">
<div class="shw"></div>
</li>
</a>
<li><a href="../html/8.html">《打虎收孝》剧照</a></li>
<a href="../html/9.html">
<li class="shd"><img src="../material/5.photo/3、juzhao/9.png" alt="">
<div class="shw"></div>
</li>
</a>
<li> <a href="../html/9.html">《江姐》剧照</a></li>
<a href="../html/10.html">
<li class="shd"><img src="../material/5.photo/3、juzhao/10.png" alt="">
<div class="shw"></div>
</li>
</a>
<li> <a href="../html/10.html">《收姜维》剧照</a></li>
</ul>
<!-- 第四列 -->
<ul class="photo-fourth">
<a href="../html/11.html">
<li class="shd"><img src="../material/5.photo/3、juzhao/11.png" alt="">
<div class="shw"></div>
</li>
</a>
<li><a href="../html/11.html">《花子骂相》剧照</a></li>
<a href="../html/12.html">
<li class="shd"><img src="../material/5.photo/3、juzhao/12.png" alt="">
<div class="shw"></div>
</li>
</a>
<li> <a href="../html/11.html">《白露为霜》剧照</a></li>
<a href="../html/13.html">
<li class="shd"><img src="../material/5.photo/3、juzhao/13.png" alt="">
<div class="shw"></div>
</li>
</a>
<li> <a href="../html/13.html">《受禅台》剧照</a></li>
</ul>
</div>3.4、川剧状态
相关代码：
<a href="../html/newOne.html">
<div class="content-one">
<div class="one">
<ul class="content-one-one">
<li class="content-one-title">01</li>
<li class="content-one-pic"><img src="../material/8.dongtai/3、xinwenzixun/1.png" alt=""></li>
</ul>
</div>
<div class="two">
<ul class="content-one-two">
<li>2021-6-29 </li>
<li>大型革命题材川剧《浩气长歌》在射洪首演</li>
<li>该剧讲述了射洪人于渊不畏列强，带领士兵坚决捍卫民族尊严；后加入中国共产党积极参加革命斗争，最终壮烈牺牲的故事。</li>
</ul>
</div>
</div>
</a>
<a href="../html/newsTwo.html">
<div class="content-one">
<div class="one">
<ul class="content-one-one">
<li class="content-one-title">02</li>
<li class="content-one-pic"><img src="../material/8.dongtai/3、xinwenzixun/2.png" alt=""></li>
</ul>
</div>
<div class="two">
<ul class="content-one-two">
<li>22021-6-24</li>
<li>电子科大原创川剧《小萝卜头》即将与观众见面</li>
<li>由电子科技大学新编川剧大幕戏《小萝卜头》即将上演，通过对“小萝卜头”感人故事的精彩演绎，致敬革命烈士，庆祝中国共产党成立100周年。</li>
</div>
</div>
</a>4、代码结构图
总结
以上就是本次项目的全部内容，需要交流或者获取代码请关注微信公众号：coding加油站，获取
扫一扫
664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
