web网页设计——J04HTML5+CSS大作业——传统节日--中秋节(5页)
HTML5+CSS大作业——传统节日–中秋节(5页)
常见网页设计作业题材有
个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
获取更多源码
PC电脑端关注我们
作者主页-更多源码
HTML期末大作业文章专栏
文章目录
- HTML5+CSS大作业——传统节日--中秋节(5页)
- 获取更多源码
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、获取更多源码
- 五、学习资料
- 六、更多源码
一、作品展示
二、文件目录
三、代码实现
<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>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
五、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、更多源码
PC电脑端关注我们
HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
