488.中国风中秋节专题网页大学生期末大作业 Web前端网页制作 html+css+js

标签：function Web 网页 top height width js margin left

一、网页概述

二、网页文件

三、网页效果

欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html+css+js：导航菜单、图片轮翻、鼠标悬停图片特效等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含1个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.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>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>



<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-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&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;}
/*-----------------底部结束！------------*/

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd, ol, ul, li, form, table { margin:0; padding:0; border:0; list-style:none;}
span, h1, h2, h3, h4, h5, h6, p, img, dl, dt, dd, ol, ul, li, form { overflow:hidden;}
input { margin:0; padding:0; }
h1,h2,h3,h4,h5,h6 { font-weight:normal;}
a { text-decoration:none; color:#000000;}
html, body { font-family:"微软雅黑", "宋体";font-size:14px;}
img{boder:none; vertical-align: top;}
a:hover {text-decoration:none; color: #bc2c2c;}
body{min-width: 1660px;}
.bk{width:1170px;height: auto;overflow: hidden;margin: 0 auto;}
.trans{ display:block;transition: all .5s ease;-webkit-transition: all .5s ease; -moz-transition: all .5s ease;-ms-transition: all .5s ease;-o-transition: all .5s ease;-webkit-backface-visibility: hidden;}
.trans:hover { display:block; -webkit-backface-visibility: hidden;transform: scale(1.04,1.04);-ms-transform: scale(1.04,1.04);-webkit-transform: scale(1.04,1.04);}
.mt50{margin-top:50px;}
.smy_ctrl {position:relative;min-height:50px;cursor:move;}
/***********************************************************************************/

/*banner*/
.banner-img{position: relative;top: 0;left: 0;width:100%; height: 100vh;overflow: hidden;background: #403e3e; background: url(../images/yy-jwzqbanner-20190911.jpg) no-repeat center; background-size:100% 100%; }

.ScrollDown{width: 200px;height: 100px;position: absolute;bottom: 35px;left: 50%;margin-left: -80px;text-align: center;color: #fff;z-index: 9;cursor: pointer;}
.ScrollDownicon {margin: 0 auto;margin-bottom: 13px;display: block;width: 30px;height: 42px;overflow: hidden;text-align: left;text-indent: -9999px;animation: a 1.5s 3.2s ease both infinite;background: url(../images/yy-scrolldown-20190904.png) 100% no-repeat;cursor: pointer;}

@keyframes a{0%,to{transform:translateY(0);opacity:0}60%{transform:translateY(14px);opacity:1}}
.C_Conblank{padding:20px 0;text-align:center;background-color:rgba(2,9,19,.03);border:1px solid rgba(2,9,19,.08)}
.ScrollDown p{font-size: 28px;text-shadow: 2px 3px 10px #333333;height: 40px;letter-spacing: 1px;}
.ScrollDown a{color:#fff;}

.banner-deng{width:auto;height: 480px;overflow: hidden;margin: 0 auto;position: relative;}
.banner-deng .deng1{position: absolute;top: 95px;left: 11%;}
.banner-deng .deng2{position: absolute;top: 145px;right: 23%;}

.banner-bt{width:auto;height: 480px;overflow: hidden;margin: 0 auto;position: relative;}
.banner-bt .ybanner-bt1{position: absolute;top: -1px;left: 25%;}
.banner-bt .ybanner-bt2{position: absolute;top: 155px;right: 25%;}

/*bk1*/
.bk1{width:100%; height: 1080px; overflow: hidden; background: url(../images/yy-jwztbg1-20190912.jpg) no-repeat center; background-size: auto;}
.yybt0{width:1000px;height: 258px;margin-left: auto;margin-right: auto;margin-top: 147px;position: relative;}
.yybt0 p{display:block;width:900px;margin-left: 50px;color: #fff;font-size: 20px;line-height: 36px;position: absolute;top: 33px;}

.bk1-nr{/* margin-top: -25px; */width: 1110px;margin-left: auto;margin-right: auto;height: auto;overflow: hidden;}

/****************图片轮播****************/
.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);
}
}

...

3.JS

代码如下（节选示例）：

/*!
* SuperSlide v2.1.1
* 轻松解决网站大部分特效展示问题
* 详尽信息请看官网：http://www.SuperSlide2.com/
*
* Copyright 2011-2013, 大话主席
*
* 请尊重原创，保留头部版权
* 在保留版权的前提下可应用于个人或商业用途

* v2.1.1：修复当调用多个SuperSlide，并设置returnDefault:true 时返回defaultIndex索引错误

...

五、总结

设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性；

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

六、更多推荐

【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!

您的支持是我创作的动力！看到这里就【点赞收藏博文】，Thanks！

更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。

标签：function,Web,网页,top,height,width,js,margin,left
From： https://blog.csdn.net/A240307/article/details/142316719

488.中国风中秋节专题网页大学生期末大作业 Web前端网页制作 html+css+js

一、网页概述

二、网页文件

三、网页效果

四、代码展示

1.html

2.CSS

3.JS

五、总结

1.简洁实用

2.使用方便

3.整体性好

4.形象突出

5.交互式强

六、更多推荐

相关文章

赞助商

阅读排行

488.中国风中秋节专题网页 大学生期末大作业 Web前端网页制作 html+css+js

一、网页概述

二、网页文件

三、网页效果

四、代码展示

1.html

2.CSS

3.JS

五、总结

1.简洁实用

2.使用方便

3.整体性好

4.形象突出

5.交互式强

六、更多推荐

相关文章

赞助商

阅读排行

488.中国风中秋节专题网页大学生期末大作业 Web前端网页制作 html+css+js