首页 前端知识 HTML学生中秋节日网页设计模板 DIV布局大学生中秋节网页作业制作 八月十五中秋静态网页成品代码下载 中秋节日网页设计作品

HTML学生中秋节日网页设计模板 DIV布局大学生中秋节网页作业制作 八月十五中秋静态网页成品代码下载 中秋节日网页设计作品

2024-04-12 20:04:20 前端知识 前端哥 81 174 我要收藏

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码:【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码: 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师,技术组长,教学总监;曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰,难凉热血;多年过去,历经变迁,物是人非。 然而,对于技术的探索和追求从未停歇。 💪坚持原创,热衷分享,初心未改,继往开来!



📂文章目录

  • 一、👨‍🎓网站题目
  • 二、✍️网站描述
  • 三、📚网站介绍
  • 四、🌐网站演示
  • 五、⚙️ 网站代码
    • 🧱HTML结构代码
    • 💒CSS样式代码
  • 六、🥇 如何让学习不再盲目
  • 七、🎁更多干货


一、👨‍🎓网站题目

🏮传统春节网页设计、🎅圣诞节节日发展、🥮中秋、端午传统节日习俗庆祝、🎏地区特色,网站模板 、等网站的设计与制作。


二、✍️网站描述

🏷️ 大学生传统节日网页作业成品采用DIV CSS布局制作,主要内容包括节日介绍、节日发展、习俗庆祝、地区特色等内容,作品共多个页面,学生HTML静态网页基础水平制作,页面排版干净简洁。网页技术方面应用包括网页背景颜色、字号字体设置、超链接、图文页面、菜单栏、顶部大图等网页基础知识点

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接,可到三级页面,有5-10个页面组成。
  3. 页面样式风格统一布局显示正常,不错乱,使用Div+Css技术。
  4. 菜单美观、醒目,二级菜单可正常弹出与跳转。
  5. 要有JS特效,如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。
  7. 页面清爽、美观、大方,不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面:计划采用最新的网页编程语言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>

<!--开屏banner!-->
<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>
<!--开屏banner end!--> 

<!--part1-->
<div class="bk1" id="dy">
  <div class="yybt0">
    <p>中秋节又叫仲秋、月夕,是华夏民族岁时节日中仅次于春节的第二大民俗节日。中秋节有很多习俗:观潮、吃月饼、赏桂花、饮桂花酒、赏月拜月等。中秋佳节,以月之圆兆人之团圆,以饼之圆兆人之常生,用月饼寄托思念故乡、祈盼幸福,也越来越成为人们的心愿。情怀如梦,家国在心。</p>
  </div>
  <!--1-->
  <div class="bk1-nr" pcautomorelistid="1"> 
    
    <!--轮播 start!-->
    <div class="part2 clearfix">
      <div class="part2-L left"> <span class="pageState"><span>1</span>/1</span>
        <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> 
    <!--轮播 end!--> 
    
    <!--news-list-->
    <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>
    <!--news-list end!--> 
    
  </div>
  <!--1 end!--> 
</div>
<!--part1 end!--> 

<!--part2-->
<div class="bk2" pcautomorelistid="2">
  <div class="yybt2"><a target="_blank" subject_automorlist="2" href="#"><img src="picture/yy-jwztmbbt2-20190912.png" /></a></div>
  <!--1-->
  <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>
<!--part2 end!--> 

<!--part3-->
<div class="bk3" pcautomorelistid="3">
  <div class="yybt3"><a target="_blank" subject_automorlist="3"><img src="picture/yy-jwztmbbt3-20190912.png" /></a></div>
  <!--1-->
  <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> 
  <!--1 end!--> 
</div>
<!--part3 end!--> 

<!--part4-->
<div class="bk4" pcautomorelistid="4">
  <div class="yybt4"><a target="_blank" subject_automorlist="4" href="#"><img src="picture/yy-jwztmbbt4-20190912.png" /></a></div>
  <!--nr-->
  <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-12</sub> </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-12</sub> </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-12</sub> </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-12</sub> </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&amp;width=0&amp;height=600&amp;uid=3275115274&amp;skin=1&amp;refer=1&amp;appkey=&amp;pic=0&amp;titlebar=1&amp;border=1&amp;publish=1&amp;atalk=1&amp;recomm=0&amp;at=0&amp;atopic=中秋节&amp;ptopic=中秋节&amp;dpc=1"></iframe>
    </div>
    <!--嵌入 微博话题 end!--> 
  </div>
  <!--nr end!--> 
</div>
<!--part4 end!--> 

<!--标准尾-->
</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>
<!--标准尾end--> 

<!--js--> 
<script>
jQuery(".slideTxtBox").slide({autoPlay:true});	
</script>
</html>



💒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.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4767.html
评论
发布的文章

HTML5学习笔记(二)

2024-04-21 10:04:45

HTML5 新增语义标签及属性

2024-04-21 10:04:32

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!