Web前端大作业—传统文化网站设计题材(html+css+javascript)

本文链接：https://blog.csdn.net/qq_38512571/article/details/127182179

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍
三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
四、💒 网站代码
- 🧱HTML结构代码
- 🏠CSS样式代码
五、🎁更多源码

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

N41JP-绒花JS轮播图（6页）

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱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 onload="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>
<!---banner---->
<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" onmouseover="MM_swapImage('Image1','','images/img02a.png',1)" onmouseout="MM_swapImgRestore()" /><h2>胸花类</h2></a></li>
<li><a href="#"><img src="images/img03.png" id="Image2" onmouseover="MM_swapImage('Image2','','images/img03a.png',1)" onmouseout="MM_swapImgRestore()" /><h2>头饰类</h2></a></li>
<li><a href="#"><img src="images/img04.png" id="Image3" onmouseover="MM_swapImage('Image3','','images/img04a.png',1)" onmouseout="MM_swapImgRestore()" /><h2>动物类</h2></a></li>
<li><a href="#"><img src="images/img05.png" id="Image4" onmouseover="MM_swapImage('Image4','','images/img05a.png',1)" onmouseout="MM_swapImgRestore()" /><h2>装饰类</h2></a></li>
</ul>
</div>
<div class="foot">
<P>南京绒花传统文化手工艺</P>

</div>

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

🏠CSS样式代码



li {
	list-style: none;
}

a {
	text-decoration: none;
}

img {
	border: 0;
	margin: 0;
	padding: 0;
} 
.main {
	width: 1024px;
	height: auto;
	margin: 0 auto;
	background: #FFF;
}

.top {
	height: 88px;
	padding-top: 16px;
}

.logo {
	width: 66px;
	height: 72px;
	float: left;
	margin-left: 25px;
}

.nav {
	width: 685px;
	height: 55px;
	float: right;
	padding-top: 10px;
}

.nav ul {
	padding: 0px
}

.nav ul li {
	line-height: 55px;
	float: left;
	text-align: center;
	display: inline-block;
	position: relative;
	width: 110px;
}

.nav ul li a {
	color: #221e1f;
	font-size: 18px;
}

.nav ul li a:hover {
	color: #faab18;
}

.hoo {
	color: #faab18 !important;
}

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

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