-
网页设计期末作业 使用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>