260. 传统工艺文化南京绒花网页实例大学生期末大作业 Web前端网页制作 html+css+js

本文链接：https://blog.csdn.net/A240307/article/details/139352830

欢迎光临仙女的网页世界！这里有Web前端网页制作的各行各业的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设的辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

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

二、网页文件

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

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>南京绒花</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body οnlοad="MM_preloadImages('images/img02a.png','images/img03a.png','images/img04a.png','images/img05a.png')">
<div class="main">
<div class="top">
<div class="logo">
<img src="images/logo.jpg" />
</div>
<div class="nav">
<ul>
<li><a class="hoo" href="index.html" >首页</a></li>
<li><a href="yuanyuan.html">历史渊源</a></li>
<li><a href="chuancheng.html">文化传承</a> </li>
<li><a href="tese.html" >工艺特色</a></li>
<li><a href="news.html" >最热资讯</a></li>
<li><a href="about.html" >关于我们</a></li>
</ul>
</div>
</div>

<div class="box" id="box">
<div class="inner">

<ul>
<li><a href="#"><img src="images/banner1.jpg" ></a></li>
<li><a href="#"><img src="images/banner2.jpg" ></a></li>
<li><a href="#"><img src="images/banner3.jpg" ></a></li>

</ul>

<ol class="bar">

</ol>

<div id="arr">
<span id="left">
<
</span>
<span id="right">
>
</span>
</div>

</div>
</div>
<script src="js/banner.js" type="text/jscript"></script>
<div class="titile"><h2>南京绒花</h2></div>
<div class="bx01">
<div class="bx01-left"><img src="images/img01.jpg" /></div>
<div class="bx01-right">
<p>绒花始于秦朝，《中华古今注》中就记录了当时秦始皇让他的妃子
"插五色通草苏朵子"。唐代被列为皇室贡品。谐音荣华，是中华富贵文
化的代表。明末清初流入民间，主要在春节、端午节、中秋节及际逢婚嫁
喜事时佩戴绒花。二零零六年，南京绒花被列为江苏省非物质文化遗产。
制作绒花的主要材料是蚕丝制作,造型也多自取自民间喜闻乐见的事物。绒
花的工艺作品现在主要有胸花类、头饰类、动物类、发冠类、装饰类等。</p>
<p>如有需要南京绒花传承人赵树宪还可以专门定制绒花。</p>
</div>
</div>
<div class="bx02">
<ul>
<li><a href="#"><img src="images/img02.png" id="Image1" οnmοuseοver="MM_swapImage('Image1','','images/img02a.png',1)" οnmοuseοut="MM_swapImgRestore()" /><h2>胸花类</h2></a></li>
<li><a href="#"><img src="images/img03.png" id="Image2" οnmοuseοver="MM_swapImage('Image2','','images/img03a.png',1)" οnmοuseοut="MM_swapImgRestore()" /><h2>头饰类</h2></a></li>
<li><a href="#"><img src="images/img04.png" id="Image3" οnmοuseοver="MM_swapImage('Image3','','images/img04a.png',1)" οnmοuseοut="MM_swapImgRestore()" /><h2>动物类</h2></a></li>
<li><a href="#"><img src="images/img05.png" id="Image4" οnmοuseοver="MM_swapImage('Image4','','images/img05a.png',1)" οnmοuseοut="MM_swapImgRestore()" /><h2>装饰类</h2></a></li>
</ul>
</div>
<div class="foot">
<P>南京绒花传统文化手工艺</P>

</div>

</div>
</body>
</html>

...

2.CSS

代码如下（节选示例）：

}

.hoo {
color: #faab18 !important;
}

.box {
width: 1024px;
height: 418px;
}

.inner {
   width: 1024px;
   height: 418px;
   position: relative;
   overflow: hidden;
}

.inner img {
   width: 1024px;
   height: 418px;
   vertical-align: top
}

...

3.JS

代码如下（节选示例）：

// JavaScript Document
/**
*
* @param id 传入元素的id
* @returns {HTMLElement | null} 返回标签对象，方便获取元素
*/
function my$(id) {
return document.getElementById(id);
}

//获取各元素，方便操作
var box=my$("box");
var inner=box.children[0];
var ulObj=inner.children[0];
var list=ulObj.children;
var olObj=inner.children[1];
var arr=my$("arr");
var imgWidth=inner.offsetWidth;
var right=my$("right");
var pic=0;
//根据li个数，创建小按钮
for(var i=0;i<list.length;i++){
var liObj=document.createElement("li");

olObj.appendChild(liObj);
liObj.innerText=(i+1);
liObj.setAttribute("index",i);

//为按钮注册mouseover事件
liObj.οnmοuseοver=function () {
//先清除所有按钮的样式

for (var j=0;j<olObj.children.length;j++){
olObj.children[j].removeAttribute("class");
}
this.className="current";
pic=this.getAttribute("index");
animate(ulObj,-pic*imgWidth);
}

}

//设置ol中第一个li有背景颜色
olObj.children[0].className = "current";
//克隆一个ul中第一个li,加入到ul中的最后=====克隆
ulObj.appendChild(ulObj.children[0].cloneNode(true));

var timeId=setInterval(onmouseclickHandle,2000);
//左右焦点实现点击切换图片功能
box.οnmοuseοver=function () {
arr.style.display="block";
clearInterval(timeId);
};
box.οnmοuseοut=function () {
arr.style.display="none";
timeId=setInterval(onmouseclickHandle,2000);
};