网页设计期末作业 使用HTML实现一个静态页面（含源码）
📂文章目录
- 👨🎓网页题目
- ✍️网页描述
- 🌐网页效果
- ⚙️ 代码实现
- 🧱HTML结构代码
- 🎁更多干货
👨🎓网页题目
🍵茶文化网站、🏳️🌈中华传统文化题材、京剧文化🔏水墨风书画、xx民间年画文化艺术网站 、等网站的设计与制作。
✍️网页描述
🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习, 个别源码页面中没有使用js有需要的可以自行添加。
🌐网页效果
⚙️ 代码实现
🧱HTML结构代码
<html><head><meta charset="UTF-8"><title>中华传统文化title><link rel="stylesheet" href="css/normalize.min.css"><link rel="stylesheet" href="css/style.css"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><meta name="screen-orientation" content="portrait"><meta name="x5-orientation" content="portrait"><meta name="full-screen" content="yes"><meta name="x5-fullscreen" content="true"><meta name="browsermode" content="application"><meta name="x5-page-mode" content="app"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="msapplication-tap-highlight" content="no">head><body><audio id="main" hidden="hidden" src="file/jiangnan.mp3" loop="" autoplay="">audio><nav class="clearfix"><a href="#" onclick="push('index')">中华传统文化a><span>◆span><a href="#" onclick="push('clock')">时辰a><a href="#" onclick="push('solarterm')">节气a><a href="#" onclick="push('new-year')">春节a><a href="#" onclick="push('poem')">诗词a><a href="#" onclick="push('qin')">五音a><a href="#" onclick="push('bmzy')">笔墨a>nav><section class="main1 scene" id="page-index"><div class="layer" data-depth="0.10"><img class="p1_1 auto-p " src="picture/4.png">div><div class="layer" data-depth="0.12"><img class="p1_2 auto-p " src="picture/p1_bg10.png">div><div class="layer" data-depth="0.15"><img class="p1_3 auto-p " src="picture/p1_bg5.png">div><div class="layer" data-depth="0.2"><img class="p1_4 auto-p " src="picture/p1_bg6.png">div><div class="layer" data-depth="0.24"><img class="p1_5 auto-p " src="picture/p1_bg7.png">div><div class="layer" data-depth="0.27"><img class="p1_6 auto-p " src="picture/p1_bg8.png">div><div class="layer" data-depth="0.3"><img src="picture/p1_bg1.png" class="p1_7 auto-p ">div><div class="layer" data-depth="0.35"><img class="p1_8 auto-p " src="picture/p1_bg2.png">div><div class="layer" data-depth="0.4"><img class="p1_9 auto-p " src="picture/p1_bg3.png">div><div class="layer" data-depth="0.70"><div class="title">div>div><div class="layer" data-depth="0.550"><div class="main-nav "><a href="#" class="item fadeInUp" style="-webkit-animation-delay: .25s;" onclick="push('clock')"><img src="picture/shichen.png">a><a href="#" class="item fadeInUp" style="-webkit-animation-delay: .5s;" onclick="music('spring');push('solarterm')"><img src="picture/jieqi.png">a><a href="#" class="item fadeInUp" style="-webkit-animation-delay: .75s;" onclick="music('newyear');push('new-year')"><img src="picture/chunjie.png">a><a href="#" class="item fadeInUp" style="-webkit-animation-delay: 1s;" onclick="music('poem');push('poem')"><img src="picture/shici.png">a><a href="#" class="item fadeInUp" style="-webkit-animation-delay: 1.25s;" onclick="music('stop');push('qin')"><img src="picture/wuyin.png">a><div class="clearfix">div>div>div>section><section class="clock" id="page-clock"><div class="full clock"><div class="inner"><div class="circle"><div class="time"><h1 id="timestr">h1><h1 id="nowtime"><time id="hour">time>:<time id="minute">time>:<time id="second">time>h1>div><div class="hander">div><ul class="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><ul class="hour-name" id="JS-hour-name"><li>li><li>li><li>li><li>li><li>li><li>li><li>1li><li>3li><li>5li><li>7li><li>9li><li>11li>ul>div>div>div><div class="bottom"><div class="item"><a href="#" onclick="hourinfo(0)">子a>div><div class="item"><a href="#" onclick="hourinfo(1)">丑a>div><div class="item"><a href="#" onclick="hourinfo(2)">寅a>div><div class="item"><a href="#" onclick="hourinfo(3)">卯a>div><div class="item"><a href="#" onclick="hourinfo(4)">辰a>div><div class="item"><a href="#" onclick="hourinfo(5)">巳a>div><div class="item"><a href="#" onclick="hourinfo(6)">午a>div><div class="item"><a href="#" onclick="hourinfo(7)">未a>div><div class="item"><a href="#" onclick="hourinfo(8)">申a>div><div class="item"><a href="#" onclick="hourinfo(9)">酉a>div><div class="item"><a href="#" onclick="hourinfo(10)">戌a>div><div class="item"><a href="#" onclick="hourinfo(11)">亥a>div>div>section><section class="solarterm" id="page-solarterm"><div class="full"><div class="col-1-4"><div class="hexagon spring"><ul><li>li><li>li><li>li><span>春span>ul>div><div class="month"><span>二月span><span>立春<br>2月3~5日span><span>雨水<br>2月18~20日span>div><div class="month"><span>三月span><span>惊蛰<br>3月5~7日span><span>春分<br>3月20~22日span>div><div class="month"><span>四月span><span>清明<br>4月4~6日span><span>谷雨<br>4月19~21日span>div>div><div class="col-1-4"><div class="hexagon summer"><ul><li>li><li>li><li>li><span>夏span>ul>div><div class="month"><span>五月span><span>立夏<br>5月5~7日span><span>小满<br>5月20~22日span>div><div class="month"><span>六月span><span>芒种<br>6月5~7日span><span>夏至<br>6月21~22日span>div><div class="month"><span>七月span><span>小暑<br>7月6~8日span><span>大暑<br>7月22日~24日span>div>div><div class="col-1-4"><div class="hexagon autumn"><ul><li>li><li>li><li>li><span>秋span>ul>div><div class="month"><span>八月span><span>立秋<br>8月7~9日span><span>处暑<br>8月22~24日span>div><div class="month"><span>九月span><span>白露<br>9月7~9日span><span>秋分<br>9月22~24日span>div><div class="month"><span>十月span><span>寒露<br>10月8~9日span><span>霜降<br>10月23~24日span>div>div><div class="col-1-4"><div class="hexagon winter"><ul><li>li><li>li><li>li><span>冬span>ul>div><div class="month"><span>十一月span><span>立冬<br>11月7~8日span><span>小雪<br>11月22~23日span>div><div class="month"><span>十二月span><span>大雪<br>12月6~8日span><span>冬至<br>12月21~23日span>div><div class="month"><span>一月span><span>小寒<br>1月5~7日span><span>大寒<br>1月20~21日span>div>div>div>section><section class="new-year" id="page-new-year"><div class="up"><div class="item" onclick="newyear(0)"><div class="item-inner-1">腊月<br>廿三div>div><div class="item" onclick="newyear(1)"><div class="item-inner-2">腊月<br>廿四div>div><div class="item" onclick="newyear(2)"><div class="item-inner-1">腊月<br>廿五div>div><div class="item" onclick="newyear(3)"><div class="item-inner-2">腊月<br>廿六div>div><div class="item" onclick="newyear(4)"><div class="item-inner-1">腊月<br>廿七div>div><div class="item" onclick="newyear(5)"><div class="item-inner-2">腊月<br>廿八div>div><div class="item" onclick="newyear(6)"><div class="item-inner-1">腊月<br>廿九div>div><div class="item" onclick="newyear(7)"><div class="item-inner-2">腊月<br>三十div>div><div class="item" onclick="newyear(8)"><div class="item-inner-1">正月<br>初一div>div><div class="item" onclick="newyear(9)"><div class="item-inner-2">正月<br>初二div>div><div class="item" onclick="newyear(10)"><div class="item-inner-1">正月<br>初三div>div><div class="item" onclick="newyear(11)"><div class="item-inner-2">正月<br>初四div>div><div class="item" onclick="newyear(12)"><div class="item-inner-1">正月<br>初五div>div><div class="item" onclick="newyear(13)"><div class="item-inner-2">正月<br>初六div>div><div class="clearfix">div>div><div class="full container-fill-height"><div class="info container-content-middle"><h1 class="display-3">春节习俗h1><h4>春节是我国一个古老的节日，也是全年最重要的一个节日，如何过庆贺这个节日，在千百年的历史发展中，形成了一些较为固定的风俗习惯，有许多还相传至今。h4>div><div class="picture">div>div><div>div>section><section class="poem" id="page-poem"><div class="full container-fill-height"><div class="info container-content-middle"><div class="content"><h1>江畔何人初见月？h1><h1>江月何年初照人？h1>div><div class="from"><h1><span class="author">张若虚span>《<span class="title">春江花月夜span>》h1>div>div>div><div class="switch"><div class="rotate" onclick="roll()">div><h1>换h1>div>section><section class="qin" id="page-qin"><audio id="key-11" src="file/11.mp3" hidden="hidden" preload="none">audio><audio id="key-12" src="file/12.mp3" hidden="hidden" preload="none">audio><audio id="key-13" src="file/13.mp3" hidden="hidden" preload="none">audio><audio id="key-14" src="file/14.mp3" hidden="hidden" preload="none">audio><audio id="key-15" src="file/15.mp3" hidden="hidden" preload="none">audio><audio id="key-16" src="file/16.mp3" hidden="hidden" preload="none">audio><audio id="key-17" src="file/17.mp3" hidden="hidden" preload="none">audio><audio id="key-21" src="file/21.mp3" hidden="hidden" preload="none">audio><audio id="key-22" src="file/22.mp3" hidden="hidden" preload="none">audio><audio id="key-23" src="file/23.mp3" hidden="hidden" preload="none">audio><audio id="key-24" src="file/24.mp3" hidden="hidden" preload="none">audio><audio id="key-25" src="file/25.mp3" hidden="hidden" preload="none">audio><audio id="key-26" src="file/26.mp3" hidden="hidden" preload="none">audio><audio id="key-27" src="file/27.mp3" hidden="hidden" preload="none">audio><audio id="key-31" src="file/31.mp3" hidden="hidden" preload="none">audio><audio id="key-32" src="file/32.mp3" hidden="hidden" preload="none">audio><audio id="key-33" src="file/33.mp3" hidden="hidden" preload="none">audio><audio id="key-34" src="file/34.mp3" hidden="hidden" preload="none">audio><audio id="key-35" src="file/35.mp3" hidden="hidden" preload="none">audio><audio id="key-36" src="file/36.mp3" hidden="hidden" preload="none">audio><audio id="key-37" src="file/37.mp3" hidden="hidden" preload="none">audio>