html5做一个静态页面_大一html网页制作作业

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 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"> <!-- 强制竖屏 --> <meta name="full-screen" content="yes"> <!-- UC强制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- 强制全屏 --> <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: #; } .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 知识，互相学习」！

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

今天的文章
html5做一个静态页面_大一html网页制作作业分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/80658.html