📂文章目录
- 👨🎓网页题目
- ✍️网页描述
- 🌐网页效果
- ⚙️ 代码实现
- 🧱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 href="css/pace-theme-flash.min.css" rel="stylesheet" />-->
<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>1</li>
<li>3</li>
<li>5</li>
<li>7</li>
<li>9</li>
<li>11</li>
</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>
<div class="mask">
</div>
<div class="line clearfix" style="padding-top: 120px;">
<div class="key-bg-1" onclick="qin('key-31')">宫<kbd>1</kbd></div>
<div class="key-bg-2" onclick="qin('key-32')">商<kbd>2</kbd></div>
<div class="key-bg-3" onclick="qin('key-33')">角<kbd>3</kbd></div>
<div class="key-bg-4" onclick="qin('key-34')">徵<kbd>4</kbd></div>
<div class="key-bg-5" onclick="qin('key-35')">变徵<kbd>5</kbd></div>
<div class="key-bg-6" onclick="qin('key-36')">羽<kbd>6</kbd></div>
<div class="key-bg-7" onclick="qin('key-37')">变羽<kbd>7</kbd></div>
</div>
<div class="line clearfix">
<div class="key-bg-1" onclick="qin('key-21')">宫<kbd>Q</kbd></div>
<div class="key-bg-2" onclick="qin('key-22')">商<kbd>W</kbd></div>
<div class="key-bg-3" onclick="qin('key-23')">角<kbd>E</kbd></div>
<div class="key-bg-4" onclick="qin('key-24')">徵<kbd>R</kbd></div>
<div class="key-bg-5" onclick="qin('key-25')">变徵<kbd>T</kbd></div>
<div class="key-bg-6" onclick="qin('key-26')">羽<kbd>Y</kbd></div>
<div class="key-bg-7" onclick="qin('key-27')">变羽<kbd>U</kbd></div>
</div>
<div class="line clearfix">
<div class="key-bg-1" onclick="qin('key-11')">宫<kbd>A</kbd></div>
<div class="key-bg-2" onclick="qin('key-12')">商<kbd>S</kbd></div>
<div class="key-bg-3" onclick="qin('key-13')">角<kbd>D</kbd></div>
<div class="key-bg-4" onclick="qin('key-14')">徵<kbd>F</kbd></div>
<div class="key-bg-5" onclick="qin('key-15')">变徵<kbd>G</kbd></div>
<div class="key-bg-6" onclick="qin('key-16')">羽<kbd>H</kbd></div>
<div class="key-bg-7" onclick="qin('key-17')">变羽<kbd>J</kbd></div>
</div>
<button id="stop-music" onclick="music('stop')">停止背景音乐</button>
</section>
<section id="page-bmzy"><video>
<source src="myvideo.mp4" type="video/mp4">
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="javascript:;">下载视频</a>
</video></section>
<script src="js/main.js"></script>
</body>
</html>
🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬更多推荐
网页设计期末作业 使用HTML实现一个静态页面（含源码）
发布评论