🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！
一、👨🎓网站题目
🍵茶文化网站、🏳️🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。
二、✍️网站描述
🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习, 个别源码页面中没有使用js有需要的可以自行添加。
🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
- 所有页面相互超链接，可到三级页面，有5-10个页面组成。
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
- 菜单美观、醒目，二级菜单可正常弹出与跳转。
- 要有JS特效，如定时切换和手动切换图片轮播。
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
- 页面清爽、美观、大方，不雷同。 。
- 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
三、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
四、🌐网站演示
五、⚙️ 网站代码
🧱HTML结构代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>中华传统文化</title>
<link rel="stylesheet" href="css/normalize.min.css">
<!--<script src="js/pace.min.js"></script>-->
<!--<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">
<!--避免IE使用兼容模式-->
<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">
<!-- UC强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="full-screen" content="yes">
<!-- UC强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- QQ强制全屏 -->
<meta name="browsermode" content="application">
<!-- UC应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- UC应用模式 -->
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="msapplication-tap-highlight" content="no">
<!-- windows phone 点击无高光 -->
</head>
<body>
<!-- 预设audio标签，后台播放用 <audio id="main" hidden="hidden" src="" loop></audio>-->
<audio id="main" hidden="hidden" src="file/jiangnan.mp3" loop="" autoplay=""></audio>
<!--PC端显示的导航栏-->
<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="cloud_block cloud1"></div>
<div class="cloud_block cloud2"></div>-->
<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="music/effect/11.wav" hidden="hidden" preload="none"></audio>
<audio id="key-12" src="music/effect/12.wav" hidden="hidden" preload="none"></audio>
<audio id="key-13" src="music/effect/13.wav" hidden="hidden" preload="none"></audio>
<audio id="key-14" src="music/effect/14.wav" hidden="hidden" preload="none"></audio>
<audio id="key-15" src="music/effect/15.wav" hidden="hidden" preload="none"></audio>
<audio id="key-16" src="music/effect/16.wav" hidden="hidden" preload="none"></audio>
<audio id="key-17" src="music/effect/17.wav" hidden="hidden" preload="none"></audio>
<audio id="key-21" src="music/effect/21.wav" hidden="hidden" preload="none"></audio>
<audio id="key-22" src="music/effect/22.wav" hidden="hidden" preload="none"></audio>
<audio id="key-23" src="music/effect/23.wav" hidden="hidden" preload="none"></audio>
<audio id="key-24" src="music/effect/24.wav" hidden="hidden" preload="none"></audio>
<audio id="key-25" src="music/effect/25.wav" hidden="hidden" preload="none"></audio>
<audio id="key-26" src="music/effect/26.wav" hidden="hidden" preload="none"></audio>
<audio id="key-27" src="music/effect/27.wav" hidden="hidden" preload="none"></audio>
<audio id="key-31" src="music/effect/31.wav" hidden="hidden" preload="none"></audio>
<audio id="key-32" src="music/effect/32.wav" hidden="hidden" preload="none"></audio>
<audio id="key-33" src="music/effect/33.wav" hidden="hidden" preload="none"></audio>
<audio id="key-34" src="music/effect/34.wav" hidden="hidden" preload="none"></audio>
<audio id="key-35" src="music/effect/35.wav" hidden="hidden" preload="none"></audio>
<audio id="key-36" src="music/effect/36.wav" hidden="hidden" preload="none"></audio>
<audio id="key-37" src="music/effect/37.wav" hidden="hidden" preload="none"></audio>-->
<!--低音质版-->
<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/parallax.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
💒CSS样式代码
.display-4 {
font-size: 3.5rem;
font-weight: 300;
}
.clearfix::after {
display: table;
clear: both;
content: "";
}
a {
text-decoration: none;
}
.container-fill-height {
display: table!important;
width: 100%;
height: 100vh;
}
.container-fill-height .container-content-bottom,
.container-fill-height .container-content-middle {
display: table-cell;
vertical-align: middle;
}
.container-fill-height .container-content-bottom {
vertical-align: bottom;
}
/*
* 全局页面
*/
body {
font-family: 'FZZYS';
}
.full {
min-height: 100vh;
margin: 0 auto;
display: block;
overflow: hidden;
position: relative;
}
.clock .full {
width: 100vmin;
}
.full .inner {
width: 100%;
padding: 10vmin;
height: 100vmin;
}
.main1 .title {
background: url(../image/title.svg) no-repeat center center;
max-width: 75vw;
width: 600px;
z-index: 1100;
height: 500px;
margin: 0 auto
}
.main-nav {
width: calc((20px * 2 + 80px) * 5);
margin: 0 auto;
top: 50%;
z-index: 900;
position: relative;
}
.main-nav .item {
float: left;
width: 80px;
margin: 0 20px;
}
@media (max-width: 768px) {
.main-nav {
width: calc((10px * 2 + 50px) * 5);
}
.main-nav .item {
width: 50px;
margin: 0 7px;
}
}
.auto-p {
z-index: 20;
}
.main1 .p1_5 {
position: absolute;
top: -80px;
left: 50%;
opacity: 0;
}
.main1 .p1_6 {
position: absolute;
top: 20px;
left: 50%;
opacity: 0;
}
.main1 .p1_7 {
position: absolute;
bottom: -30px;
left: -50px;
}
.main1 .p1_7 {
position: absolute;
width: 100%;
max-width: 1570px;
min-width: 1200px;
}
.main1 .p1_8 {
position: absolute;
left: 50%;
top: 400px;
}
.main1 .p1_9 {
position: absolute;
right: -70px;
top: 500px;
}
/*
* 钟表
*/
.clock {
background: #333333;
}
.circle {
border: 1px solid #ac9055;
border-radius: 50%;
width: 100%;
height: 100%;
display: flex;
align-items: center;
position: relative;
}
.time {
margin: 0 auto;
text-align: center;
}
.time h1 {
font-size: 9vmin;
color: #c0b595;
}
.hander {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
left: 0px;
right: 0px;
width: 100%;
max-width: 1400px;
white-space: nowrap;
overflow-x: auto;
}
.new-year .up .item {
position: relative;
width: 90px;
height: 260px;
text-align: center;
color: #ffffff;
font-size: 120%;
display: inline-block;
text-shadow: 2px 2px rgba(0, 0, 0, .3);
}
.new-year .up .item:hover {
cursor: pointer;
-webkit-animation: swing 1.2s;
}
@-webkit-keyframes swing {
20%,
40%,
60%,
80%,
100% {
-webkit-transform-origin: top center;
}
20% {
-webkit-transform: rotate(4deg);
}
40% {
-webkit-transform: rotate(-3deg);
}
60% {
-webkit-transform: rotate(2deg);
}
80% {
-webkit-transform: rotate(-1deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
.new-year .up .item {}
.new-year .up .item .item-inner-1,
.new-year .up .item .item-inner-2 {
background: url(../image/ChineseKnotting.svg) no-repeat;
width: 90px;
height: 200px;
padding-top: 115px;
position: absolute;
}
.new-year .up .item .item-inner-1 {}
.new-year .up .item .item-inner-2 {
position: absolute;
top: 60px;
}
.new-year .full {
right: 0;
margin: 0 auto;
border: none;
background: -webkit-linear-gradient(left, hsla(0, 0%, 48%, .9), hsla(0, 0%, 31%, .9));
cursor: pointer;
color: #FFFFFF;
font-size: 17px;
}
.qin .line {
display: block;
margin: 0 auto;
width: calc(((5px * 2) + 120px)*7);
/* calc( margin * 2 + width ) *item */
z-index: 2;
}
.key-bg-1,
.key-bg-2,
.key-bg-3,
.key-bg-4,
.key-bg-5,
.key-bg-6,
.key-bg-7 {
float: left;
width: 120px;
height: 120px;
margin: 5px;
line-height: 120px;
text-align: center;
font-size: 31px;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
border-radius: 5px;
}
.key-bg-1 {
background: hsla(50, 70%, 80%, .9);
}
.key-bg-2 {
background: hsla(100, 70%, 80%, .9);
}
.key-bg-3 {
background: hsla(150, 70%, 80%, .9);
}
.key-bg-4 {
background: hsla(200, 70%, 80%, .9);
}
.key-bg-5 {
background: hsla(250, 70%, 80%, .9);
}
.key-bg-6 {
background: hsla(300, 70%, 80%, .9);
}
.key-bg-7 {
background: hsla(0, 70%, 80%, .9);
}
.qin .line kbd {
position: absolute;
right: 3px;
top: 0;
line-height: 23px;
font-size: 23px;
}
@media (max-width: 768px) {
.qin .line {
width: 100%;
}
.key-bg-1,
.key-bg-2,
.key-bg-3,
.key-bg-4,
.key-bg-5,
.key-bg-6,
.key-bg-7 {
width: 14.28%;
margin: 0;
line-height: 60px;
border-radius: 0;
}
.qin .line kbd {
display: none;
}
}
/*笔墨纸砚*/
section#page-bmzy video {
position: absolute;
height: 100%;
width: 100%;
}
section#page-bmzy video {
position: absolute;
height: 100%;
width: 100%;
}
六、🥇 如何让学习不再盲目
第一、带着目标去学习，无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么，是想解决什么问题，实现怎样的目标。
第二、学习要建立个人知识体系
知识是学不完的，书籍是浩如烟海的。我们尽情徜徉其中的时候，千万不要被海水淹死，没有自我了。在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识
第三、学到了就要用到
有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事，但只有会学习的人，才有价值。
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
