web网页毕业设计，非遗文化网站期末大作业html+css+JS网页制作成品
此非遗文化网站为本本人纯手写代码，HTML代码简洁，修改方便。页面丰富，总共6个html页面全站采用HTML+CSS+JavaScript来完成。
一、 项目规划
非遗文化网站是以四川的变脸川剧来开的，网站设计的6个页面，包括首页、历史起源、川剧分类、川剧的艺术特点、川剧剧目、精彩图集、联系我们
二、网站效果图
其他几个页面由于图片超过了5M，无法上传效果图。
三、网站结构
1、历史起源
起源与发展
表演特色
表演名称
2、川剧分类、
川剧介绍
川剧分类
3、艺术特点
艺术特点-唱腔（昆腔、高腔、胡琴）
艺术特点-行当
艺术特点-服装
4、川剧剧目
主要就是一些视频，通过视频来介绍川剧剧目
5、精彩图集
主要就是一些川剧名的图片
如：《梦回东坡》《焚香记》《清风亭》等
6、联系我们
主要就是一些我们信息
二维码目前是打算用的我自己的和一些随机填的号码
四、HTML代码
川剧
PERFORMANCE FEATURES
川剧起源
起源与发展
川剧起源于唐代，形成于清代中叶，以四川为中心，遍及全国。最初只有“十大老生”和“十大花脸“两个行当，后来又增加了小生、丑角、武生和小丑等行当。清代中叶以后，又吸收了许多戏曲的表现手法，形成了川剧的主要流派。
小 生
须 生
小旦
花 脸
丑 角
唱腔
胡琴
高腔
滚灯
灯调
变脸
PERFORMANCE FEATURES
表演特色
01变 脸
川剧在表演上有两个特点:一是说唱结合，以说为主;二是表演细腻，以唱为主。其表演注重表现人物性格，讲究刻画人物形象，注意表演程式和身段技巧。川剧的艺术特点是唱、做、念、打、舞融为一体。舞台美术也有独特的风格，舞台布置主要是体现舞台空间的艺术效果
02喷 火
03滚 灯
04舞水袖
PERFORMANCE FEATURES
表演名称
双枪陆文
春草闯堂
杀狗劝妻
霸王别姬
黄鹤楼
- 川剧分类
- 川剧文化
- 川剧行当
- 川剧欣赏
网上传播视听节目许可证编号:66666 发证机关:国家广播电影电视总局
许可证编号:川B2-66666888 四川新闻网版权所有蜀1CP备12456789号-8 川公网安备
五、CSS代码
:root{
--bg1-color:#960001;
}
/* #960001 */
.ak{
background-image: url('./bg.png');
}
.hwb{
margin-left: 25px;/* 将图片向右移动20px */
}
div,a,p,ul,img{
margin: 0px auto;
padding: 0px;
}
.nav{
display: flex;
justify-content: space-between;
width: 1200px;
margin: 0px auto;
font-size: 14px;
font-weight: 600;
}
.nav div:nth-child(1){
width: 14%;
}
.nav div:nth-child(2){
width: 16%;
}
.nav div:nth-child(3){
width: 69%;
}
.nav div img{
width: 100%;
}
.nav-ul{
display: flex;
list-style-type: none;
/* writing-mode: vertical-lr; */
}
.nav-ul li{
display: flex;
margin: 10px auto;
border-right: 2px solid #333;
padding-right: 10px;
transition: background-color 0.3s;
}
.nav-ul li:last-child{border: 0px;}
.nav-ul li>p{
width: 3px;
margin: 0px 2px;
color: #666;
font-size: 13px;
writing-mode: vertical-rl;
}
.nav-ul li>a{
text-decoration: none;
color: #000;
writing-mode: vertical-rl;
}
.banner{
width: 1200px;
}
.banner img{
width: 100%;
}
.bb {
/* 初始样式 */
/* 初始的文字颜色 */
color: #000000; /* 初始颜色为黑色 */
color: red ;
/* 其他初始样式，比如字体大小、装饰等 */
text-decoration: none; /* 移除下划线 */
display: inline-block; /* 确保可以放大而不破坏布局 */
/* 平滑过渡效果，包括颜色 */
transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}
.bb:hover {
/* 鼠标悬停时的样式 */
transform: scale(1.2); /* 放大到原始大小的1.2倍 */
/* 悬停时的文字颜色 */
color: #FF0000; /* 悬停时文字颜色变为红色 */
/* 放大效果 */
/* 其他悬停样式 */
/* ... */
}
.nva2 ul{
display: flex;
justify-content: center;
}
.nva2 ul li{
display: flex;
justify-content: center;
justify-items: center;
margin: 0px 5px;
border-left: 3px solid #fff;
padding: 0px 20px;
position: relative;
}
.nva2 ul li:last-child{
border-right: 3px solid #fff;
}
/* .nva2 ul li:first-child,.nva2 ul li:last-child{width: 150px;} */
.nva2{
background-color:var(--bg1-color) ;
height: 128px;
width:1130px;
margin: 0px auto;
}
.nva2 a{
color: #fff;
font-size: 18px;
font-weight: 600;
height: 128px;
line-height: 128px;
text-decoration: none;
}
.nva2 img{
height: 20px;
position: relative;
left: -15px;
top:42%
}
.nva2 {
/* 初始样式 */
transition: transform 0.3s ease-in-out; /* 平滑过渡效果 */
}
.nva2 a:hover {
/* 鼠标悬停时的样式 */
transform: scale(1.2); /* 放大到原始大小的1.2倍 */
}
.con{
width: 1200px;
margin:0px auto;
}
.title-top{
display: flex;
color: #666;
width: 65%;
border-left: 3px solid var(--bg1-color);
margin: 0px auto;
height: 100px;
justify-content: space-between;
}
.title-top p:nth-child(1){
padding-top: 90px;
margin-left: 100px;
}
.title-top p:nth-child(2){
border-bottom: 3px solid #999
;width: 16%;
position: relative;
margin-right: 10px;
}
.title-top p:nth-child(2)>img{
position:absolute;
bottom: -15px;
right: -30px;
height: 30px;
}
.title-bottom{
display: flex;
justify-content: space-around;
width: 783px;
}
.title-bottom div:nth-child(3){
width: 65%;
}
.title-bottom div:nth-child(1){
margin-left: -27px;
}
.title-bottom>div>h2{
padding-left: 15px;
}
.con-list{
width:783px;
display: flex;
}
.con-list div{
width: 50%;
}
/* .con-list div:nth-child(1){float: left;}
.con-list div:nth-child(2){float: right;} */
.con-list P{
font-size: 15px;
color: #666;
}
.con-list img{
width: 95%;
}
.con-list div>h3{
margin-top: 0px;
}
.con-fl{
width:300px;
display: flex;
margin-top: 20px;
}
.con-fl p{
width: 20px;
text-align: center;
padding-top: 20px;
color: var(--bg1-color);
font-weight: 600;
padding-top: 25px;
}
.con-fl div{
background-image: url("../jpg/con1.png");
height: 100px;
background-size: contain;
background-repeat: no-repeat;
padding-right: 23px;
}
.con-fl p {
/* 初始样式 */
transition: transform 0.3s ease-in-out; /* 平滑过渡效果 */
}
.con-fl p:hover {
/* 鼠标悬停时的样式 */
transform: scale(1.2); /* 放大到原始大小的1.2倍 */
}
.con-pic{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
width: 783px;
margin: 39px auto;
}
.con-pic>div{
position:relative;
width:235px;
height: 268px;
overflow:hidden;
}
.con-pic img{
width: 100%;
}
.con-pic p{
position: absolute;
color: #fff;
width:100%;
height:50px;
text-align: center;
background-image:linear-gradient(to top,#960001,rgba(255,255,255,0));
bottom: 31px;
}
.con-pic {
perspective: 1000px; /* 创建一个3D空间 */
}
.con-pic img {
transition: transform 0.6s; /* 平滑过渡效果 */
transform-style: preserve-3d; /* 保持3D空间中的子元素 */
}
.con-pic img:hover {
transform: rotateY(180deg); /* 鼠标悬停时旋转180度 */
}
.byts{
display: flex;
width: 783px;
}
.byts div{
width: 100px;
height: 280px;
background-color: #c8bbaa;
position: relative;
}
.byts div>div{
position: absolute;
top:-20px;
background-color: #d0a675;
width: 30px;
height: 30px;
left: 35px;
color: #fff;
text-align: center;
}
.byts div p{
font-size: 30px;
writing-mode:vertical-lr;
text-align: center;
margin-top: 50%;
}
.byts div img{
width: 100%;
margin-top: 20px;
}
.byts .byts-t{
width: 30%;
}
.byts-t img{
width: 100%;
margin: 5px auto
}
#byts-t-p{
color: #666
; font-size: 13px;
writing-mode: horizontal-tb;
margin-top: 10px;
line-height: 1.5;
}
.byts img {
/* 初始样式 */
transition: transform 0.3s ease-in-out; /* 平滑过渡效果 */
}
.byts img:hover {
/* 鼠标悬停时的样式 */
transform: scale(1.1); /* 放大到原始大小的1.2倍 */
}
.dbjm{
width: 670px;
display: flex;
justify-content: space-between;
}
.dbjm div{
width: 15%;
border-right: 3px solid var(--bg1-color);
}
.dbjm div p{
writing-mode:vertical-rl;
padding-top: 30px;
margin-right: 10px;
letter-spacing: 2px;
font-weight: 600;
letter-spacing: 5px;
}六、说明
以上代码是非遗文化网站期末大作业的首页HTML代码和CSS代码，由于代码太多， 不能全部上传。有需要的可以点选关注后留言或者评论