首页分享 html大学生网站开发实践作业：传统文化网页设计题材【绒花6页】html css javascript

html大学生网站开发实践作业：传统文化网页设计题材【绒花6页】html css javascript

来源：花匠小妙招时间：2025-01-29 01:04

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

文章目录 ‍网页题目✍️网页描述网页效果⚙️ 代码实现HTML结构代码更多干货

‍网页题目

茶文化网站、️‍中华传统文化题材、京剧文化水墨风书画、xx民间年画文化艺术网站、等网站的设计与制作。

✍️网页描述

️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习, 个别源码页面中没有使用js有需要的可以自行添加。

网页效果

在这里插入图片描述

⚙️ 代码实现

HTML结构代码

<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>南京绒花</title> <link href="style/style.css" rel="stylesheet" type="text/css"> </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> <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> <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>

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485