138. 大学生HTML5期末大作业 ―【中华宝藏非遗文化主题精品网页】 Web前端网页制作 html5+css3+js-CSDN博客

本文链接：https://blog.csdn.net/m0_67368443/article/details/144309462

一、更多推荐

欢迎来到我的CSDN主页！Web前端网页制作、大学生期末大作业、课程设计、毕业设计、网页模版源码、学习资料等，更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-CSDN博客

5000+完整代码，主题涵盖30+种类型:

二、网页简介

本实例应用html5+css3+js： Div、导航栏、三级页面、图片轮翻效果、登录页面等。适用于大学生网页课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

三、网页文件

本网页实例共包含14个页面：

四、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

五、代码展示

1.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/all.css" rel="stylesheet" media="all" type="text/css" />
<title>非遗</title>
</head>
<body>
<div class="banner">
<div class="c-banner">
   <div class="banner">
       <ul>
           <li><img src="images/201133058101657.jpg"></li>
           <li><img src="images/banner2.jpg"></li>

       </ul>
   </div>

   <div class="jumpBtn">
       <ul>
           <li jumpImg="0"></li>
           <li jumpImg="1"></li>
       </ul>
   </div>
</div>
</div>
<div class="menu">
<ul class="center">
<li><a href="index.html">主页</a></li>
<li><a href="photo.html">相册</a></li>
<li><a href="news.html">文章</a></li>
<li><a href="about.html">网站信息</a></li>
</ul>
<p class="clear"></p>
</div>
<div class="content">
<div class="bar">
<h2>文章</h2>
</div>
<div class="pad">
<div class="left"><img src="images/0.jpg" width="100%"/> <br />
</div>
<div class="right">
<h2>85后非遗传人隐居深山，千年窑火传承不熄</h2>
<p>黑色框架眼镜，搭配卫衣、牛仔裤……陈振云的这身打扮，似乎很难将他跟隐居深山的非遗传人的身份联系起来。实际上，1986年出生的陈振云，已隐居深山7年，其间只干了一件事：柴火烧窑，手工制瓷。在陕西历史博物馆的“唐三彩”展区里，有一幅唐代瓷窑遗址分布图，将乐就是其中一处。将乐窑位于福建省三明市将乐县境内，始见商周，兴于唐代，盛在两宋，明清窑火不断，延续至今。</p>
<a href="info2.html" class="more">阅读更多</a> </div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="bar">
<h2>非遗乐器相册</h2>
</div>
<div class="tub">
<ul>
<li><a href="photo1.html"><img src="images/a1.jpg" /></a></li>
<li><a href="photo1.html"><img src="images/a2.jpg" /></a></li>
<li><a href="photo1.html"><img src="images/a5.jpg" /></a></li>
<li><a href="photo1.html"><img src="images/a4.jpg" /></a></li>
<li><a href="photo1.html"><img src="images/a3.jpg" /></a></li>
<li><a href="photo1.html"><img src="images/a6.jpg" /></a></li>
<li><a href="photo1.html"><img src="images/a7.jpg" /></a></li>
<li><a href="photo1.html"><img src="images/a8.jpg" /></a></li>
</ul>
<div class="clear"></div>
</div>

<div class="bar">
<h2>视频</h2>
</div>

<div class="imglist">
<ul>
<li><video controls="controls" width="100%">
<source src="video/v.mp4" type="video/mp4" />
Your browser does not support the video tag. </video> </li>
<li><video controls="controls" width="100%">
<source src="video/v2.mp4" type="video/mp4" />
Your browser does not support the video tag. </video></li>
</ul> <div class="clear"></div>
</div>
<div style="text-align:center; padding-bottom:30px"> <a href="shipin.html" class="more">更多视频</a> </div>
<div class="clear"></div>
</div>
<div class="end">
<p>www.www.www</p>
</div>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* CSS Document */

div{}
ul,li,h1,h2,h3,p{ padding:0; margin:0; list-style:none}
a{ text-decoration:none}
html{ background:url(../images/timg.jpg)}
body{ width:960px; background:rgba(0,0,0,0.8); margin:0 auto; line-height:21px}
.clear{ clear:both}
.menu li{ list-style:none}
.logo{ position:absolute; top:50px; width:250px; height:100px; margin-left:40px}
.banner{ position:relative; margin-top:0px;}
.banner img{ display:block}
.menu{ width:100%; text-align:center; float:left; background:#c53333}
.menu li a{ color:#fff}
.menu li { border-radius:10px; float:left; margin:12px; font-size:18px; padding:8px 13px ; width:185px; font-weight:bold}

.right{ float:right; width:480px; padding:10px}
.right h2{ margin:20px 0}
.left{ float:left; width:380px; margin-left:10px; padding:10px}
.content { padding-bottom:20px; font-size:16px; line-height:28px; clear:both; padding-top:10px; display:block ; color:#fff;}
.more{-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;padding:0 20px; line-height:40px; background:#c53333; color:#fff; display:inline-block; margin-top:30px}
.end{ clear:both; background:#c53333; color:#fff; padding:30px 0; text-align:center;}
.produce img{ margin:0 20px 20px 0}
.produce { line-height:30px}
.pad{ padding:20px; display:block}
.pics p{ margin:1px; text-align:center}
.txt{ margin:20px 100px; text-align:center}
.imglist{ width:96%; margin:0 auto}
.imglist li a{ color:#fff}
.imglist li{ float:left; width:440px; margin:10px ; margin-top:30px; text-align:center}
.scrollleft{ margin:2%}
.scrollleft li{ float:left; width:47.5%; margin:1%; border:#CC9900 solid 1px}
.scrollleft li img{ float:left; margin-right:20px;}

...

3.JS

代码如下（节选示例）：

//定时器返回值
var time=null;
//记录当前位子
var nexImg = 0;
//用于获取轮播图图片个数
var imgLength = $(".c-banner .banner ul li").length;
//当时动态数据的时候使用,上面那个删除
// var imgLength =0;
//设置底部第一个按钮样式
$(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");

//页面加载
$(document).ready(function(){
   // dynamicData();
   //启动定时器,设置时间为3秒一次
   time =setInterval(intervalImg,3000);
});

//点击上一张
$(".preImg").click(function(){
   //清楚定时器
   clearInterval(time);
   var nowImg = nexImg;
   nexImg = nexImg-1;
   console.log(nexImg);
   if(nexImg<0){
       nexImg=imgLength-1;
   }
   //底部按钮样式设置
   $(".c-banner .jumpBtn ul li").css("background-color","white");
   $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");

   //将当前图片试用绝对定位,下一张图片试用相对定位
   $(".c-banner .banner ul img").eq(nowImg).css("position","absolute");
   $(".c-banner .banner ul img").eq(nexImg).css("position","relative");

   //轮播淡入淡出
   $(".c-banner .banner ul li").eq(nexImg).css("display","block");
   $(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000);
   $(".c-banner .banner ul li").eq(nowImg).stop().animate({"opacity":0},1000,function(){
       $(".c-banner ul li").eq(nowImg).css("display","none");
   });

   //启动定时器,设置时间为3秒一次
   time =setInterval(intervalImg,3000);
})