📂文章目录
👨🎓网页题目
🍵茶文化网站、🏳️🌈中华传统文化题材、京剧文化🔏水墨风书画、xx民间年画文化艺术网站 、等网站的设计与制作。
✍️网页描述
🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习, 个别源码页面中没有使用js有需要的可以自行添加。
🌐网页效果
⚙️ 代码实现
🧱HTML结构代码
<html><head><metacharset="UTF-8"><title>中华传统文化</title><linkrel="stylesheet"href="css/normalize.min.css"><!--<link href="css/pace-theme-flash.min.css" rel="stylesheet" />--><linkrel="stylesheet"href="css/style.css"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><metaname="screen-orientation"content="portrait"><metaname="x5-orientation"content="portrait"><metaname="full-screen"content="yes"><metaname="x5-fullscreen"content="true"><metaname="browsermode"content="application"><metaname="x5-page-mode"content="app"><metaname="format-detection"content="telephone=no"><metaname="apple-mobile-web-app-capable"content="yes"><metaname="msapplication-tap-highlight"content="no"></head><body><audioid="main"hidden="hidden"src="file/jiangnan.mp3"loop=""autoplay=""></audio><navclass="clearfix"><ahref="#"onclick="push('index')">中华传统文化</a><span>◆</span><ahref="#"onclick="push('clock')">时辰</a><ahref="#"onclick="push('solarterm')">节气</a><ahref="#"onclick="push('new-year')">春节</a><ahref="#"onclick="push('poem')">诗词</a><ahref="#"onclick="push('qin')">五音</a><ahref="#"onclick="push('bmzy')">笔墨</a></nav><sectionclass="main1 scene"id="page-index"><divclass="layer"data-depth="0.10"><imgclass="p1_1 auto-p "src="picture/4.png"></div><divclass="layer"data-depth="0.12"><imgclass="p1_2 auto-p "src="picture/p1_bg10.png"></div><divclass="layer"data-depth="0.15"><imgclass="p1_3 auto-p "src="picture/p1_bg5.png"></div><divclass="layer"data-depth="0.2"><imgclass="p1_4 auto-p "src="picture/p1_bg6.png"></div><divclass="layer"data-depth="0.24"><imgclass="p1_5 auto-p "src="picture/p1_bg7.png"></div><divclass="layer"data-depth="0.27"><imgclass="p1_6 auto-p "src="picture/p1_bg8.png"></div><divclass="layer"data-depth="0.3"><imgsrc="picture/p1_bg1.png"class="p1_7 auto-p "></div><divclass="layer"data-depth="0.35"><imgclass="p1_8 auto-p "src="picture/p1_bg2.png"></div><divclass="layer"data-depth="0.4"><imgclass="p1_9 auto-p "src="picture/p1_bg3.png"></div><divclass="layer"data-depth="0.70"><divclass="title"></div></div><divclass="layer"data-depth="0.550"><divclass="main-nav "><ahref="#"class="item fadeInUp"style="-webkit-animation-delay: .25s;"onclick="push('clock')"><imgsrc="picture/shichen.png"></a><ahref="#"class="item fadeInUp"style="-webkit-animation-delay: .5s;"onclick="music('spring');push('solarterm')"><imgsrc="picture/jieqi.png"></a><ahref="#"class="item fadeInUp"style="-webkit-animation-delay: .75s;"onclick="music('newyear');push('new-year')"><imgsrc="picture/chunjie.png"></a><ahref="#"class="item fadeInUp"style="-webkit-animation-delay: 1s;"onclick="music('poem');push('poem')"><imgsrc="picture/shici.png"></a><ahref="#"class="item fadeInUp"style="-webkit-animation-delay: 1.25s;"onclick="music('stop');push('qin')"><imgsrc="picture/wuyin.png"></a><divclass="clearfix"></div></div></div></section><sectionclass="clock"id="page-clock"><divclass="full clock"><divclass="inner"><divclass="circle"><divclass="time"><h1id="timestr"></h1><h1id="nowtime"><timeid="hour"></time>:<timeid="minute"></time>:<timeid="second"></time></h1></div><divclass="hander"></div><ulclass="minute-divide"id="JS-minute-divide"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><ulclass="hour-name"id="JS-hour-name"><li></li><li></li><li></li><li></li><li></li><li></li><li>1</li><li>3</li><li>5</li><li>7</li><li>9</li><li>11</li></ul></div></div></div><divclass="bottom"><divclass="item"><ahref="#"onclick="hourinfo(0)">子</a></div><divclass="item"><ahref="#"onclick="hourinfo(1)">丑</a></div><divclass="item"><ahref="#"onclick="hourinfo(2)">寅</a></div><divclass="item"><ahref="#"onclick="hourinfo(3)">卯</a></div><divclass="item"><ahref="#"onclick="hourinfo(4)">辰</a></div><divclass="item"><ahref="#"onclick="hourinfo(5)">巳</a></div><divclass="item"><ahref="#"onclick="hourinfo(6)">午</a></div><divclass="item"><ahref="#"onclick="hourinfo(7)">未</a></div><divclass="item"><ahref="#"onclick="hourinfo(8)">申</a></div><divclass="item"><ahref="#"onclick="hourinfo(9)">酉</a></div><divclass="item"><ahref="#"onclick="hourinfo(10)">戌</a></div><divclass="item"><ahref="#"onclick="hourinfo(11)">亥</a></div></div></section><sectionclass="solarterm"id="page-solarterm"><divclass="full"><divclass="col-1-4"><divclass="hexagon spring"><ul><li></li><li></li><li></li><span>春</span></ul></div><divclass="month"><span>二月</span><span>立春<br>2月3~5日</span><span>雨水<br>2月18~20日</span></div><divclass="month"><span>三月</span><span>惊蛰<br>3月5~7日</span><span>春分<br>3月20~22日</span></div><divclass="month"><span>四月</span><span>清明<br>4月4~6日</span><span>谷雨<br>4月19~21日</span></div></div><divclass="col-1-4"><divclass="hexagon summer"><ul><li></li><li></li><li></li><span>夏</span></ul></div><divclass="month"><span>五月</span><span>立夏<br>5月5~7日</span><span>小满<br>5月20~22日</span></div><divclass="month"><span>六月</span><span>芒种<br>6月5~7日</span><span>夏至<br>6月21~22日</span></div><divclass="month"><span>七月</span><span>小暑<br>7月6~8日</span><span>大暑<br>7月22日~24日</span></div></div><divclass="col-1-4"><divclass="hexagon autumn"><ul><li></li><li></li><li></li><span>秋</span></ul></div><divclass="month"><span>八月</span><span>立秋<br>8月7~9日</span><span>处暑<br>8月22~24日</span></div><divclass="month"><span>九月</span><span>白露<br>9月7~9日</span><span>秋分<br>9月22~24日</span></div><divclass="month"><span>十月</span><span>寒露<br>10月8~9日</span><span>霜降<br>10月23~24日</span></div></div><divclass="col-1-4"><divclass="hexagon winter"><ul><li></li><li></li><li></li><span>冬</span></ul></div><divclass="month"><span>十一月</span><span>立冬<br>11月7~8日</span><span>小雪<br>11月22~23日</span></div><divclass="month"><span>十二月</span><span>大雪<br>12月6~8日</span><span>冬至<br>12月21~23日</span></div><divclass="month"><span>一月</span><span>小寒<br>1月5~7日</span><span>大寒<br>1月20~21日</span></div></div></div></section><sectionclass="new-year"id="page-new-year"><divclass="up"><divclass="item"onclick="newyear(0)"><divclass="item-inner-1">
腊月<br>廿三
</div></div><divclass="item"onclick="newyear(1)"><divclass="item-inner-2">腊月<br>廿四</div></div><divclass="item"onclick="newyear(2)"><divclass="item-inner-1">腊月<br>廿五</div></div><divclass="item"onclick="newyear(3)"><divclass="item-inner-2">腊月<br>廿六</div></div><divclass="item"onclick="newyear(4)"><divclass="item-inner-1">腊月<br>廿七</div></div><divclass="item"onclick="newyear(5)"><divclass="item-inner-2">腊月<br>廿八</div></div><divclass="item"onclick="newyear(6)"><divclass="item-inner-1">腊月<br>廿九</div></div><divclass="item"onclick="newyear(7)"><divclass="item-inner-2">腊月<br>三十</div></div><divclass="item"onclick="newyear(8)"><divclass="item-inner-1">正月<br>初一</div></div><divclass="item"onclick="newyear(9)"><divclass="item-inner-2">正月<br>初二</div></div><divclass="item"onclick="newyear(10)"><divclass="item-inner-1">正月<br>初三</div></div><divclass="item"onclick="newyear(11)"><divclass="item-inner-2">正月<br>初四</div></div><divclass="item"onclick="newyear(12)"><divclass="item-inner-1">正月<br>初五</div></div><divclass="item"onclick="newyear(13)"><divclass="item-inner-2">正月<br>初六</div></div><divclass="clearfix"></div></div><divclass="full container-fill-height"><divclass="info container-content-middle"><h1class="display-3">春节习俗</h1><h4>春节是我国一个古老的节日，也是全年最重要的一个节日，如何过庆贺这个节日，在千百年的历史发展中，形成了一些较为固定的风俗习惯，有许多还相传至今。</h4></div><divclass="picture"></div></div><div></div></section><sectionclass="poem"id="page-poem"><divclass="full container-fill-height"><divclass="info container-content-middle"><divclass="content"><h1>江畔何人初见月？</h1><h1>江月何年初照人？</h1></div><divclass="from"><h1><spanclass="author">张若虚</span>《<spanclass="title">春江花月夜</span>》</h1></div></div></div><divclass="switch"><divclass="rotate"onclick="roll()"></div><h1>换</h1></div></section><sectionclass="qin"id="page-qin"><audioid="key-11"src="file/11.mp3"hidden="hidden"preload="none"></audio><audioid="key-12"src="file/12.mp3"hidden="hidden"preload="none"></audio><audioid="key-13"src="file/13.mp3"hidden="hidden"preload="none"></audio><audioid="key-14"src="file/14.mp3"hidden="hidden"preload="none"></audio><audioid="key-15"src="file/15.mp3"hidden="hidden"preload="none"></audio><audioid="key-16"src="file/16.mp3"hidden="hidden"preload="none"></audio><audioid="key-17"src="file/17.mp3"hidden="hidden"preload="none"></audio><audioid="key-21"src="file/21.mp3"hidden="hidden"preload="none"></audio><audioid="key-22"src="file/22.mp3"hidden="hidden"preload="none"></audio><audioid="key-23"src="file/23.mp3"hidden="hidden"preload="none"></audio><audioid="key-24"src="file/24.mp3"hidden="hidden"preload="none"></audio><audioid="key-25"src="file/25.mp3"hidden="hidden"preload="none"></audio><audioid="key-26"src="file/26.mp3"hidden="hidden"preload="none"></audio><audioid="key-27"src="file/27.mp3"hidden="hidden"preload="none"></audio><audioid="key-31"src="file/31.mp3"hidden="hidden"preload="none"></audio><audioid="key-32"src="file/32.mp3"hidden="hidden"preload="none"></audio><audioid="key-33"src="file/33.mp3"hidden="hidden"preload="none"></audio><audioid="key-34"src="file/34.mp3"hidden="hidden"preload="none"></audio><audioid="key-35"src="file/35.mp3"hidden="hidden"preload="none"></audio><audioid="key-36"src="file/36.mp3"hidden="hidden"preload="none"></audio><audioid="key-37"src="file/37.mp3"hidden="hidden"preload="none"></audio><divclass="mask"></div><divclass="line clearfix"style="padding-top: 120px;"><divclass="key-bg-1"onclick="qin('key-31')">宫<kbd>1</kbd></div><divclass="key-bg-2"onclick="qin('key-32')">商<kbd>2</kbd></div><divclass="key-bg-3"onclick="qin('key-33')">角<kbd>3</kbd></div><divclass="key-bg-4"onclick="qin('key-34')">徵<kbd>4</kbd></div><divclass="key-bg-5"onclick="qin('key-35')">变徵<kbd>5</kbd></div><divclass="key-bg-6"onclick="qin('key-36')">羽<kbd>6</kbd></div><divclass="key-bg-7"onclick="qin('key-37')">变羽<kbd>7</kbd></div></div><divclass="line clearfix"><divclass="key-bg-1"onclick="qin('key-21')">宫<kbd>Q</kbd></div><divclass="key-bg-2"onclick="qin('key-22')">商<kbd>W</kbd></div><divclass="key-bg-3"onclick="qin('key-23')">角<kbd>E</kbd></div><divclass="key-bg-4"onclick="qin('key-24')">徵<kbd>R</kbd></div><divclass="key-bg-5"onclick="qin('key-25')">变徵<kbd>T</kbd></div><divclass="key-bg-6"onclick="qin('key-26')">羽<kbd>Y</kbd></div><divclass="key-bg-7"onclick="qin('key-27')">变羽<kbd>U</kbd></div></div><divclass="line clearfix"><divclass="key-bg-1"onclick="qin('key-11')">宫<kbd>A</kbd></div><divclass="key-bg-2"onclick="qin('key-12')">商<kbd>S</kbd></div><divclass="key-bg-3"onclick="qin('key-13')">角<kbd>D</kbd></div><divclass="key-bg-4"onclick="qin('key-14')">徵<kbd>F</kbd></div><divclass="key-bg-5"onclick="qin('key-15')">变徵<kbd>G</kbd></div><divclass="key-bg-6"onclick="qin('key-16')">羽<kbd>H</kbd></div><divclass="key-bg-7"onclick="qin('key-17')">变羽<kbd>J</kbd></div></div><buttonid="stop-music"onclick="music('stop')">停止背景音乐</button></section><sectionid="page-bmzy"><video><sourcesrc="myvideo.mp4"type="video/mp4">
当前浏览器不支持 video直接播放，点击这里下载视频： <ahref="javascript:;">下载视频</a></video></section><scriptsrc="js/main.js"></script></body></html>
🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，
请 “👍点赞” “✍️评论” “💙收藏”
一键三连哦！
💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬
本文转载自: https://blog.csdn.net/p305114466/article/details/126655150
版权归原作者 @蜡笔小新星 所有， 如有侵权，请联系我们删除。
版权归原作者 @蜡笔小新星 所有， 如有侵权，请联系我们删除。