-
HTML学生中秋节日网页设计模板 DIV布局大学生中秋节网页作业制作 八月十五中秋静态网页成品代码下载 中秋节日网页设计作品
🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！
一、👨🎓网站题目
🏮传统春节网页设计、🎅圣诞节节日发展、🥮中秋、端午传统节日习俗庆祝、🎏地区特色，网站模板 、等网站的设计与制作。
二、✍️网站描述
🏷️ 大学生传统节日网页作业成品采用DIV CSS布局制作，主要内容包括
节日介绍、节日发展、习俗庆祝、地区特色等内容，作品共多个页面，学生HTML静态网页基础水平制作，页面排版干净简洁。网页技术方面应用包括网页背景颜色、字号字体设置、超链接、图文页面、菜单栏、顶部大图等网页基础知识点🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
- 所有页面相互超链接，可到三级页面，有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结构代码
<html> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>我们的节日▪中秋节日title> <script id="_trs_ta_js" src="js/ta.js" async defer>script> <script type="text/javascript" src="js/jquery.min.js">script> <script src="js/ttplugins.js" type="text/javascript">script> <style> .eachtop_smy { width: 1170px; margin: 0 auto; } .eachtop_smy img { margin-top: 20px; } .eachtop_artsmy { width: 1000px; margin: 0 auto; } .eachtop_artsmy img { margin-top: 20px; } .localtop_smy { width: 1000px; margin: 0 auto; } .localtop_smy img { margin-top: 20px; } .litloctop_smy { float: left; } .litloctop_smy img { width: 460px; margin-left: 30px; margin-top: 20px; } style> <link href="css/yy-jwztzqj-20190911.css" type="text/css" rel="stylesheet"> <link href="css/yy-animate.min-20190911.css" type="text/css" rel="stylesheet"> <script type="text/javascript" src="js/jquery-1.8.2.min_hy_20170609.js">script> <script type="text/javascript" src="js/jquery.superslide.2.1.1_hy_20170609.js">script> <script src="js/yy-carousel-20190912.js">script> <style> @media { .banner-img { height: auto; } } style> <div class="banner-img"> <div class="banner-deng"> <img src="picture/yy-jwzjd1-20190911.png" class="deng1 animated3 bounceInDown" /> <img src="picture/yy-jwzjd2-20190911.png" class="deng2 animated2 bounceInDown" /> div> <div class="banner-bt"> <img src="picture/yy-jwzqbt1-20190911.png" class="ybanner-bt1 animated4 fadeInUp" /> <img src="picture/yy-jwzqbt2-20190911.png" class="ybanner-bt2 animated5 fadeInDown" /> div> <div class="ScrollDown"><a onClick=" window.location.href='#dy'"><sub class="ScrollDownicon">sub> <p>开始浏览p> a>div> div> <div class="bk1" id="dy"> <div class="yybt0"> <p>中秋节又叫仲秋、月夕，是华夏民族岁时节日中仅次于春节的第二大民俗节日。中秋节有很多习俗:观潮、吃月饼、赏桂花、饮桂花酒、赏月拜月等。中秋佳节，以月之圆兆人之团圆，以饼之圆兆人之常生，用月饼寄托思念故乡、祈盼幸福，也越来越成为人们的心愿。情怀如梦，家国在心。p> div> <div class="bk1-nr" pcautomorelistid="1"> <div class="part2 clearfix"> <div class="part2-L left"> <span class="pageState"><span>1span>/1span> <div class="bd"> <ul style="position: relative; width: 0px; height: 0px;"> <li> <a href="#" target="_blank"> <img src="picture/w020190916552567582631.jpg" /> <div class="txt">月圆人团圆，家国贺双节div> a> li> <li> <a href="#" target="_blank"> <img src="picture/w020190915359626839924.jpg" /> <div class="txt">己亥中秋：浓浓“文化味”，悠悠“家国情”div> a> li> <li> <a href="#" target="_blank"> <img src="picture/w020190912461534557058.jpg" /> <div class="txt">中秋佳节今非昔比，越过越有滋有味儿div> a> li> ul> div> <a class="prev">a> <a class="next">a> div> div> <script> //第一个轮播 jQuery(".part2-L").slide({mainCell:".bd ul",autoPlay:true,effect: "fold"}); script> <div class="bk1-list"> <div class="bklist1"> <h2><a href="#" target="_blank"> 中秋假期最后一日 市民休闲度过a>h2> <p>9月15日，中秋小假期即将结束。长春天朗气清、惠风和畅，市民纷纷从家中来到户外感受...<a href="#" target="_blank"> [详情]a>p> div> <ul class="list"> <li><a href="#" target="_blank">“月饼”更新换代，幸福在升级a>li> <li><a href="#" target="_blank">风清气正过中秋是众望所归a>li> <li><a href="#" target="_blank">中秋节：感受文化意蕴，弘扬民族传统文化a>li> <li><a href="#" target="_blank">中秋节，香醇月饼要吃出“奋斗味”a>li> <li><a href="#" target="_blank">中秋佳节传喜讯 一日两冠庆团圆a>li> ul> <div class="more"><a target="_blank" subject_automorlist="1" singletaglinkage="1" href="#">查看更多a>div> div> div> div> <div class="bk2" pcautomorelistid="2"> <div class="yybt2"><a target="_blank" subject_automorlist="2" href="#"><img src="picture/yy-jwztmbbt2-20190912.png" />a>div> <div class="bk2-nr"> <div class="slideTxtBox"> <div class="hd"> <ul> <li class="img-f1"> <img src="picture/w020190912562790693859.jpg" /> li> <li class="img-f2"> <img src="picture/w020190912569189721355.jpg" /> li> <li class="img-f3"> <img src="picture/w020190912569301444271.jpg" /> li> <li class="img-f4 on"> <img src="picture/w020190911591303293560.jpg" /> li> <style> .slideTxtBox .bd ul{margin-left:116px; width:270px;} .slideTxtBox .bd li{width:270px;} style> <li class="img-f5"> <img src="picture/w020190911587059271819.jpg" /> li> ul> div> <div class="bd"> <ul> <li>中秋节为我国传统节日之一，旧时与新年(今春节)、端午齐名。所谓“中秋”，原为季节描述，依照中国所用农历历法习俗，农历七、八、九三个月为秋季，以古时排行称呼，在古籍中常以“孟秋”“仲秋”“季秋”称之。古时“仲”“中”互通，而八月十五日又处于仲秋之中，故称中秋。在文献记载中，很难找到一个将八月十五对应为“中秋节”的明确日期，但却随处可见今人耳熟能详的中秋习俗。这充分说明，中秋节其实是一个从民间习惯演化而来的节日。li> ul> <ul> <li>中秋节始于唐朝初年，盛行于宋朝，指明清时期与春节起名的传统节日之一，中秋节自古就有祭月，赏月、拜月、吃月饼、赏桂花、饮桂花酒等习俗，流传至今，经久不息。每一个习俗都代表了浓厚的民族文化，理应由一代代国人传承和发扬。传承中秋“团圆”文化，不只是增进亲人间的感情，更有利于增强家国认同感。团圆，是一种培育国家认同感的有效途径。它帮助人们对自己祖国的历史文化传统、道德价值观、理想信念、国家主权等在其头脑中引起反映并确认自己的国民身份，将自己归属于国家，形成捍卫国家主权和民族利益的主体意识。li> ul> <ul> <li>相传，远古时候有一个名叫后羿的英雄，他娶了个美丽善良的妻子，名叫嫦娥。一天，后羿到昆仑山访友求道，巧遇由此经过的王母娘娘，便向王母求得一包不死药。据说，服下此药，能即刻升天成仙。然而，后羿舍不得撇下妻子，只好暂时把不死药交给嫦娥珍藏。不料被小人蓬蒙看见了，他想偷吃不死药自己成仙，威逼嫦娥交出不死药。嫦娥知道自己不是蓬蒙的对手，危急之时拿出不死药一口吞了下去。li> ul> <ul> <li>桂花，银月，静夜，一幅朦胧而空灵的水墨丹青，一首清丽而委婉的浅吟低唱。月在水里，月在天上，月在画里，月在心上……古往今来，中秋佳节，文人墨客纷纷寄情于中秋佳节，或倾诉乡愁或盼人长久或吟离别之苦，以最美中秋诗词寄情思。对月当空，你想到了什么?月下沉吟，古人又说什么?li> ul> <ul> <li>中秋节是月圆人团圆的佳节，难得举杯邀明月，家人两团圆，又怎少得了美食相伴。“八月十五月儿圆，中秋月饼香又甜”，中秋节我们都会吃月饼，已示团团圆圆。月饼作为一种形如圆月，内含佳馅的食品，在北宋时期就已出现。诗人兼美食家苏东坡就有“小饼如嚼月，中有酥和饴”的诗句。而作为一种食品，称为“月饼”，则始见于南宋《武林旧事·蒸作饮食》。当时，杭州民间就有“又月饼相馈，取中秋团圆之意”。到了元朝末年，月饼已成为中秋节日美点。li> ul> div> div> div> div> <div class="bk3" pcautomorelistid="3"> <div class="yybt3"><a target="_blank" subject_automorlist="3"><img src="picture/yy-jwztmbbt3-20190912.png" />a>div> <div class="poster-main bk"> <div class="poster-btn poster-prev-btn">div> <ul class="poster-list "> <li class="poster-item"> <a href="#" target="_blank"> <img src="picture/w020190916554907392600.jpeg" /> a> <span class="poster-item-title">【图集】中秋假期最后一日 市民休闲度过span> li> <li class="poster-item"> <a href="#" target="_blank"> <img src="picture/w020190912470947382891.jpg" /> a> <span class="poster-item-title">吉林外国留学生迎来“开学第一课”span> li> <li class="poster-item"> <a href="#" target="_blank"> <img src="picture/w020190912474389030652.png" /> a> <span class="poster-item-title">延吉边检民警与驻地群众共庆中秋span> li> <li class="poster-item"> <a href="#" target="_blank"> <img src="picture/w020190915339378158176.jpg" /> a> <span class="poster-item-title">中秋佳节传喜讯 一日两冠庆团圆span> li> <li class="poster-item"> <a href="#" target="_blank"> <img src="picture/w020190912464566709984.jpg" /> a> <span class="poster-item-title">营口社区开展共庆中秋月儿圆”活动span> li> ul> <div class="poster-btn poster-next-btn">div> div> <script> //$(".poster-main").Carousel("init"); $(".poster-main").Carousel({ "width":1170, "height":500, "posterWidth":800, "posterHeight":500, "scale":0.85, "speed": 500, "autoPlay":true, "delay":1500, "verticalAlign":"middle" }); script> div> <div class="bk4" pcautomorelistid="4"> <div class="yybt4"><a target="_blank" subject_automorlist="4" href="#"><img src="picture/yy-jwztmbbt4-20190912.png" />a>div> <div class="bk bk4-nr"> <div class="bk4nr1"> <ul> <li> <a href="#" target="_blank"> <img src="picture/w020190912555502543588.jpg" /> a> <p> <a href="#" target="_blank"> <b>中秋将至 哪些人不宜多吃月饼b>a> <span>就传统意义的月饼而言，一般都是高热量，高脂肪，高糖分的。因此，对于有一些特殊疾病的患者们，吃月饼要格外注意。span> <sub>来源：中国吉林网sub><sub>2019-09-12sub> p> li> <li> <a href="#" target="_blank"> <img src="picture/w020190912559912373350.jpg" /> a> <p> <a href="#" target="_blank"> <b>中秋假期高速路出行该咋走？b>a> <span>中秋期间，高速通行不免费，2019年中秋节9月13日放假，与周末连休。根据相关规定，高速公路免费仅针对春节、清明节、劳动节和国庆节四个国家法定节假日。span> <sub>来源：中国吉林网sub><sub>2019-09-12sub> p> li> <li> <a href="#" target="_blank"> <img src="picture/w020190912557193908467.jpg" /> a> <p> <a href="#" target="_blank"> <b>中秋遇国庆，长春这些地方机票价格大“降温”b>a> <span>价格“降温”在8月底已开始显现，进入9月愈发明显，除多地机票价格5折外，部分出行产品价格也下降2至3成。span> <sub>来源：中国吉林网sub><sub>2019-09-12sub> p> li> <li> <a href="#" target="_blank"> <img src="picture/w020190912558609191025.jpg" /> a> <p> <a href="#" target="_blank"> <b>中秋、国庆期间，吉林省将增开多趟列车b>a> <span>中秋节小长假和国庆期间您有出行计划吗？为满足出行需要，假期沈铁将加开临客，开行“周末线”和“高峰线”列车。span> <sub>来源：中国吉林网sub><sub>2019-09-12sub> p> li> ul> div> <div class="wbht"> <iframe width="280" height="650" frameborder="0" scrolling="no" src="http://widget.weibo.com/livestream/listlive.php?language=zh_cn&width=0&height=600&uid=3275115274&skin=1&refer=1&appkey=&pic=0&titlebar=1&border=1&publish=1&atalk=1&recomm=0&at=0&atopic=中秋节&ptopic=中秋节&dpc=1">iframe> div> div> div> div> <div class="footer_sqd"> <style> li{list-style-type: none;} img{ border:0;} a{ text-decoration:none; color: #333;} a:hover{ text-decoration:underline;} body{min-width:1000px; margin:0; padding:0; font-family:"微软雅黑"; font-size:14px;} /*-----------------底部开始------------*/ .footer_sqd { width:1000px; margin:0 auto; height:65px;} .footer_sqd img { width:208px; height:50px; margin:10px auto; display:block;} .footer_sqd span { display:block; text-align:center; color:#999; font-size:12px; line-height:30px;} .footer_sqd span a { color:#999; padding:0 5px;} .footer_sqd span a:hover { color:#f54343;} .no_linie { text-decoration:none!important;} .no_linie:hover { color:#999!important;} /*-----------------底部结束！------------*/ style> <span>Copyright © 2001-2018 00000000.com, All Rights Reserved span> <span>版权所有 吉ICP备00000000000号 span> div> <script> jQuery(".slideTxtBox").slide({autoPlay:true}); script> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
💒CSS样式代码
.part2{height: 430px;width: 690px;overflow: hidden;float: left;} .part2-L{ height: 430px;width: 690px;overflow:hidden; position:relative;} .part2-L .hd{height:15px;overflow:hidden;z-index:1;position: absolute;} .part2-L .hd ul{ overflow:hidden; zoom:1; float:left; } .part2-L .hd ul li{ float:left; margin-right:8px; width:8px; height:8px; background:#fff; cursor:pointer; border-radius: 50%;} .part2-L .hd ul li.on{ background:#e60216;} .part2-L .bd ul{height: 430px;width: 690px;} .part2-L .bd{ position:relative; height:100%; z-index:0; } .part2-L .bd li{ zoom:1; vertical-align:middle; position: relative;height: 430px;width: 690px;} .part2-L .bd img{ height: 430px;width: 690px;display:block; object-fit: cover; transform: scale(1); animation: slowMotion 20s infinite ease-in-out; } .part2-L .bd .txt{position: absolute;bottom: 0;left: 0;z-index: 1;width: 100%;padding-left: 20px;height: 40px;font-size: 18px;line-height: 40px;background: url(../images/yanyan_yldsbtgj_2018-01-03.png) repeat;color: #fff;} .pageState{font-size:16px;color: #fff;position: absolute;bottom: 9px;right: 15px;z-index: 99999;} .part2-L .prev, .part2-L .next{position:absolute;left: 10px;top:50%;margin-top:-25px;display:block;width:18px;height:32px;cursor: pointer;opacity: 0.5;} .part2-L .prev{background: url(../images/prev_yy20190601.png) no-repeat;} .part2-L .next{ left:auto; right:10px; background: url(../images/next_yy20190601.png) no-repeat; } .part2-L .prevStop{ display:none; } .part2-L .nextStop{ display:none; } .part2-L .prev:hover{opacity: 1;} .part2-L .next:hover{opacity: 1;} .part2-L .bd img { height: 430px;width: 690px; transform: scale(1); animation: slowMotion 20s infinite ease-in-out; } @keyframes slowMotion { from, to { transform: scale(1) translate(0, 0); } 50% { transform: scale(1.3); } } /*newslist*/ .bk1-list{width: 380px;height: 457px;overflow: hidden;float: right;} .bklist1{width:auto;height: 165px;} *+html .bklist1{width:auto;height: 184px;} .bklist1 h2 {font-size: 26px;font-weight: bolder;display: block;height:60px;line-height: 30px;margin-top: 18px;} .bklist1 h2 a{color: #505050;} .bklist1 h2 a:hover{color: #339dc0;} .bklist1 p {font-size: 15px;color: #999;height: 54px;overflow: hidden;text-indent:2em;margin-top: 28px;} .bklist1 p a{color: #5199c3;} /*列表*/ .list {width: 370px;height: 195px;margin-top: 15px;} .list li {font-size: 16px;height: 39px;line-height: 40px;width:370px; overflow: hidden;} *+html .list li {height: 39px;line-height:37px;} .list li a { color: #505050; } .list li a:hover { color: #339dc0; } .more{width: auto;height: 50px;text-align: center; line-height: 50px;} .more a{color: #fff;display: inline-block;width: 131px;height: 50px;margin-left: -33px; font-weight: bold;} .more a:hover{font-size:18px;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
六、🥇 如何让学习不再盲目
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习 。
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，
请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！2.
💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬
-
相关阅读:
SpringCloudAlibaba 微服务组件 Nacos 之配置中心源码深度解析
vue通过接口下载文件的封装及使用
维修派工单，为什么要使用维修派工单
反片语 set+哈希表 就C++代码而言，我很短
MyBatis注解应用之动态SQL语句
k8s免费在线集群工具
如何在控制台显示MyBatis的SQL语句
9.25 day 2
SWT／ANR问题－－当发送ANR/SWT时候如何打开binder trace(BinderTraces)
显示控件——半圆进度条
- 原文地址：https://blog.csdn.net/m0_73081085/article/details/128214924