家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套、浮动、margin、border、background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大学学习的前端知识点和布局方式都有运用,CSS的代码量也很足、很细致,使用hover来完成过渡效果、鼠标滑过效果等,使用表格、表单补充模块,为方便新手学习页面中没有使用js有需要的可以自行添加。
❤ 【作者主页——获取更多优质源码】
❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】
❤ 【web前端期末大作业——毕设项目精品实战案例】
文章目录
一、网页介绍一、网页效果二、代码展示1.HTML结构代码 隣2.CSS样式代码
三、个人总结四、更多干货
一、网页介绍
1 网页简介:此作品为学生个人主页网页设计题材,HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码,这是一个不错的网页制作,画面精明,代码为简单学生水平, 非常适合初学者学习使用。
2.网页编辑:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
3.知识应用:技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了Logo(源文件)所需的知识点。
一、网页效果
二、代码展示
1.HTML结构代码 隣
代码如下(示例):以下仅展示部分代码供参考~
什 么 是 戏 曲
中国 戏曲
中国戏曲主要是由民间歌舞、说唱和滑稽戏三种不同艺术形式综合而成。它起源于原始歌舞,是一种历史悠久的综合舞台艺术样式。经过汉、唐到宋、金才形成比较完整的戏曲艺术,它由文学、音乐、舞蹈、美术、武术、杂技以及表演艺术综合而成,约有三百六十多个种类。它的特点是将众多艺术形式以一种标准聚合在一起,在共同具有的性质中体现其各自的个性。 中国的戏曲与希腊悲剧和喜剧、印度梵剧并称为世界三大古老的戏剧文化,经过长期的发展演变,逐步形成了以“京剧、越剧、黄梅戏、评剧、豫剧”五大戏曲剧种为核心的中华戏曲百花苑。
发展  历程
先秦(萌芽期)
戏曲最早可以追溯到上古时代用来娱神的原始歌舞。从春秋战国到汉代,在娱神的歌舞中逐渐演变出娱人的歌舞。从汉魏到中唐,又先后出现了以竞技为主的“角抵”(即百戏)、以问答方式表演的“参军戏”和扮演生活小故事的歌舞“踏摇娘”等,这些都是萌芽状态的戏剧。
唐代中后期(形成期)
中唐以后,中国戏剧飞跃发展,戏剧艺术逐渐形成。唐代文学艺术的繁荣,是经济高度发展的结果,促进了戏曲艺术的自立门户,并给戏曲艺术以丰富的营养,诗歌的声律和叙事诗的成熟给了戏曲决定性影响。
宋金(发展期)
宋代的“杂剧”,金代的“院本”和讲唱形式的“诸宫调”,从乐曲、结构到内容,都为元代杂剧打下了基础。
元代(成熟期)
到了元代,“杂剧”就在原有基础上大大发展,成为一种新型的戏剧。它具备了戏剧的基本特点,标志着中国戏剧进入成熟的阶段。
明清(繁荣期)
戏曲到了明代,传奇发展起来了。明代中叶,传奇作家和剧本大量涌现。明后期的舞台,开始流行以演折子戏为主的风尚。
近代(革新期)
辛亥革命前后,一批有造诣的戏曲艺术家从事戏曲艺术改良活动,他们为以后的戏曲改良积累了宝资的经验。
现代(争辉期)
艺术特色 戏曲剧种
艺术特色
综合性、虚拟性、程式性,是中国戏曲的主要艺术特征。这些特征,凝聚着中国传统文化的美学思想精髓,构成了独特的戏剧观,使中国戏曲在世界戏曲文化的大舞台上闪耀着它的独特的艺术光辉。综合性:中国戏曲是一种高度综合的汉族民间艺术;程式性:程式是戏曲反映生活的表现形式。虚拟性:虚拟是戏曲反映生活的基本手法。
戏曲剧种
中国五大戏曲剧种一般均表述依次为:京剧(有“国剧”之称 )、越剧(有“中国第二大剧种”、“第二国剧”之称 )、黄梅戏、评剧、豫剧。 采用如此表述的书籍出版物有数十种,覆盖教育、旅游、戏曲、电影、网络、民俗、文化、电视、国学、艺术、漫画等各领域.
联系我们
关于我们  |  版权声明 | 联系电话:111111 | 邮箱:111111@www.com
Copyright © 大美中国 | 实名认证
2.CSS样式代码
/*---------------------------------------------------------------------
File Name: nice-select.css
---------------------------------------------------------------------*/
.nice-select {
background-color: #f6f6f6;
border-radius: 0;
box-sizing: border-box;
clear: both;
display: block;
float: left;
height: auto;
outline: none;
padding-left: 20px;
padding-right: 35px;
position: relative;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 50%;
cursor: pointer;
font-family: inherit;
font-weight: normal;
line-height: 50px;
text-align: left !important;
white-space: nowrap;
font-weight: 300;
}
.nice-select:after {
border-bottom: 2px solid #999;
border-right: 2px solid #999;
content: '';
display: block;
height: 5px;
margin-top: -4px;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
-webkit-transform-origin: 66% 66%;
-ms-transform-origin: 66% 66%;
transform-origin: 66% 66%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
width: 5px;
}
.nice-select.open:after {
-webkit-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.nice-select.open .list {
opacity: 1;
pointer-events: auto;
-webkit-transform: scale(1) translateY(0);
-ms-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
}
.nice-select.disabled {
border-color: #ededed;
color: #999;
pointer-events: none;
}
.nice-select.disabled:after {
border-color: #cccccc;
}
.nice-select.wide {
width: 100%;
}
.nice-select.wide .list {
left: 0 !important;
right: 0 !important;
}
.nice-select.right {
float: right;
}
.nice-select.right .list {
left: auto;
right: 0;
}
.nice-select.small {
font-size: 12px;
height: 36px;
line-height: 34px;
}
.nice-select.small:after {
height: 4px;
width: 4px;
}
.nice-select.small .option {
line-height: 34px;
min-height: 34px;
}
.nice-select .list {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
box-sizing: border-box;
margin-top: 4px;
opacity: 0;
overflow: hidden;
padding: 0;
pointer-events: none;
position: absolute;
top: 100%;
left: 0;
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: scale(0.75) translateY(-21px);
-ms-transform: scale(0.75) translateY(-21px);
transform: scale(0.75) translateY(-21px);
-webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
z-index: 9;
}
.nice-select .list:hover .option:not(:hover) {
background-color: transparent !important;
}
.nice-select .option {
cursor: pointer;
font-weight: 400;
line-height: 40px;
list-style: none;
min-height: 40px;
outline: none;
padding-left: 18px;
padding-right: 29px;
text-align: left;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
background-color: #f6f6f6;
}
.nice-select .option.selected {
font-weight: bold;
}
.nice-select .option.disabled {
background-color: transparent;
color: #999;
cursor: default;
}
.no-csspointerevents .nice-select .list {
display: none;
}
.no-csspointerevents .nice-select.open .list {
display: block;
}
三、个人总结
一套合格的网页应该包含(具体可根据个人要求而定)
页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分;所有页面相互超链接,可到三级页面,有5-10个页面组成;页面样式风格统一布局显示正常,不错乱,使用Div+Css技术;菜单美观、醒目,二级菜单可正常弹出与跳转;要有JS特效,如定时切换和手动切换图片新闻;页面中有多媒体元素,如gif、视频、音乐,表单技术的使用;页面清爽、美观、大方,不雷同。网站前端程序不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “点赞” “✍️评论” “收藏” 一键三连哦!
2.❤️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!
❤ 【作者主页——获取更多优质源码】
❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】
❤ 【web前端期末大作业——毕设项目精品实战案例】
参考阅读
发表评论