编程技术

Document

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

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

📂文章目录

👨‍🎓网页题目

🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、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>

🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬