首页 > 分享 > 中秋之美——html+css+js制作中秋网页

中秋之美——html+css+js制作中秋网页

花匠小妙招
2024-11-21 00:18

前言

八月十五，秋已过半，是为中秋。
“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。

在这里插入图片描述

在这个团圆夜，每个人心中都寄托着美好的祝愿，回顾自己往日的学习，也算是给自己一些祝福，简单的做一些中秋节的网页来复习一下前面的基础知识。

先来看一下效果（点击查看)

在这里插入图片描述

导航条分为五个模块，跟着模块来看一下各自的展示效果：

❤️ 导航条

在这里插入图片描述

在之前的文章中介绍过简单导航条的制作，这个导航条的原理和之前的一样，只不过利用css增加了更多效果。

html部分：

<div><ul class="nav"><li><a href="今日中秋.html">今日中秋</a></li><li><a href="何为中秋.html">何为中秋</a></li><li><a href="畅游中秋.html">畅游中秋</a></li><li><a href="诗词中秋.html">诗词中秋</a></li><li><a href="月圆中秋.html">月圆中秋</a></li></ul></div> 123456789 css部分：

/*对无序列表样式进行更改*/.nav{list-style: none;background-color: rgba(30,50,100,0.8);width: 1000px;margin: 20px auto 15px ;/*隐藏超出部分*/overflow: hidden;border-radius: 30px;zoom: 1;}.nav li{float: left;display: inline;width: 200px;}/*对无序列表中的文字元素更改样式*/.nav a{width: 100%;/*允许在元素上设置宽度和高度。*/display: inline-block;/*文字居中显示*/text-align: center; padding: 5px 3px;text-decoration: none;color: whitesmoke;font-weight: bold;}/*设置鼠标悬停效果*/.nav a:hover{background-color: rgba(221,221,211,1);}

1234567891011121314151617181920212223242526272829303132

今日中秋

在这里插入图片描述

html部分

<div class="box2"><img src="孔明灯1.png" /></div><div class="box3"><img src="孔明灯2.png" /><img src="孔明灯3.png" ><img src="中秋.png" /></div> 12345678 css部分

/*设置一个背景*/body{background-image:url(月圆中秋2月亮.png);background-size:cover;position: fixed;top: 0px;left: 0px;}.box2{border: transparent 1px solid;height: 100px;width: 1600px;margin: 20px auto;}.box3{border: transparent 1px solid;height: 1100px;width: 1600px;}.box2 img{float: left;height: auto;width: 100px;/*制作动画效果 ease-in-out：低速开始、低速结束 infinite循环播放*/animation:t1 5.5s ease-in-out infinite;}.box3 img:nth-of-type(1){width: 500px;height:auto;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-150%);}.box3 img:nth-of-type(2){float: right;display: inline;height: auto;width: 500px; animation: t2 10s ease-in-out infinite;}.box3 img:nth-of-type(3){float: left;display: inline;height: auto;width: 400px;margin-top: 100px;animation: t1 10s ease-in-out infinite;}/*@keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。指定的变化时发生时使用％，或关键字"from"和"to"，这与0％到100％相同。 */@keyframes t1 { 50% { transform: translate(50px, 10px); }/*translate只是transform的一个属性值；translate(x,y)基于原来的位置，沿X轴平移，长度为x，沿Y轴平移，长度为y*/ 100% { transform: translate(0, 0); }}@keyframes t2 { 50% { transform: translate(-80px, -110px); } 100% { transform: translate(0, 0); }}

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071

✨何为中秋

在这里插入图片描述

html部分

<div class="box"><img src="嫦娥玉兔.png" /><img src="月饼.png" /><p>中秋节，又称祭月节、月光诞、月夕、秋节、仲秋节、拜月节、月娘节、月亮节、团圆节等，是中国民间的传统节日。中秋节源自天象崇拜，由上古时代秋夕祭月演变而来。中秋节自古便有祭月、赏月、吃月饼、看花灯、饮桂花酒等民俗，流传至今，经久不息。</p><p>中秋节起源于上古时代，普及于汉代，定型于唐朝初年，盛行于宋朝以后。中秋节以月之圆兆人之团圆，为寄托思念故乡，思念亲人之情，祈盼丰收、幸福，成为丰富多彩、弥足珍贵的文化遗产。最初“祭月节”的节期是在干支历二十四节气“秋分”这天，后来才调至夏历八月十五日。中秋节与春节、清明节、端午节并称为中国四大传统节日。</p></div> 12345678910111213 css部分

.box{height:700px;width: 1200px;margin: 20px auto;overflow: hidden;border: 5px floralwhite solid;border-radius: 80px;}.box p:nth-of-type(1){margin-top: 5%;color: red;text-align: center;line-height: 50px;}.box p:nth-of-type(2){color: gold;text-align: center;line-height: 50px;}.box img:nth-of-type(1){height: 700px;width:400px;margin-right: 5px;float: left;}.box img:nth-of-type(2){height: 700px;width: 400px;margin-left: 5px;float: right;}

123456789101112131415161718192021222324252627282930313233

畅游中秋

在这里插入图片描述

html部分

<div class="bcg"><p>点击进入奇妙游</p> <div class="demo"><a href=""> <div class="demo1">  <img src="佳人赏月.png" alt=""/> <img src="戏曲嫦娥.png" alt="" /> <img src="明月.png" alt=""/> <img src="月娥仙子.png" alt="" /> <img src="舞蹈.png" alt=""/> </div></a></div></div>

1234567891011121314151617 css部分

.bcg{height:700px;width: 1200px;margin: 20px auto;background-image: url(轮播图背景图.png);background-size: 100% 100%;overflow: hidden;border: skyblue 5px solid;border-radius: 80px; } .bcg p{margin-top: 70px;margin-left: 750px;font-size: large;color: ghostwhite;font-family: Arial,"Microsoft Yahei", "微软雅黑"; } /*用作显示轮播画面的容器*/ .demo{ width:500px; height:400px; margin-top: 50px;margin-left: 600px;border-radius: 10px; overflow: hidden;/*用于隐藏超出展示容器的内容部分*/ } /*用于存放所有的轮播图的容器*/ .demo1{ width:2500px; height:400px; animation:text 25s infinite linear; font-size:0px;/*消除图片间隔*/ } /*轮播图片*/ .demo1 img{ width:500px; height:400px; float:left; } @keyframes text { /*0%-10%是图片播放的时间，10%-20%是进行暂停*/ 0%,10%{ margin-left:0px; } 20%,30%{ margin-left:-500px; } 40%,50%{ margin-left:-1000px; } 60%,70%{ margin-left:-1500px; } 80%,90%{ margin-left:-2000px; } }

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859

诗词中秋

在这里插入图片描述

html部分

<div class="abc"><div class="box1"><img src="李白.png" /><img src="徐有贞.png" /><p>中秋唐·李朴<br />皓魄当空宝镜升，云间仙籁寂无声；<br />平分秋色一轮满，长伴云衢千里明；<br />狡兔空从弦外落，妖蟆休向眼前生；<br />灵槎拟约同携手，更待银河彻底清。</p></div><div class="box2"><p>中秋月唐·齐已<br />空碧无云露湿衣，群星光外涌清规。<br />东楼莫碍渐高势，四海待看当午时。<br />还许分明吟皓魄，肯教幽暗取丹枝。<br />可怜半夜婵娟影，正对五侯残酒池。<br /></p><img src="苏轼.png"/><p>中秋月唐·白居易<br />万里清光不可思，添愁益恨绕天涯。<br />谁人陇外久征戍？何处庭前新别离？<br />失宠故姬归院夜，没蕃老将上楼时。<br />照他几许人肠断，玉兔银蟾远不知。<br /></p></div><div class="box3"><img src="张养浩.png" /><img src="范仲淹.png" /><p>八月十五夜玩月唐·刘禹锡<br />天将今夜月，一遍洗寰瀛。<br />暑退九霄净，秋澄万景清。<br />星辰让光彩，风露发晶英。<br />能变人间世，翛然是玉京。<br /></p></div></div>

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 css部分

.abc{height:700px;width: 1200px;margin: 20px auto;overflow: hidden;border: 5px floralwhite solid;border-radius: 80px;}.abc p:nth-of-type(1){color: red;text-align: center;line-height: 50px;}.abc img:nth-of-type(1){float: left;margin-right: 0px;width: 400px;height: 200px;}.abc img:nth-of-type(2){float: right;margin-top:0px;width: 400px;height: 200px;}.abc img:nth-of-type(3){text-align: center;margin-top: 200px;width: 400px;height: 250px;}.abc img:nth-of-type(4){float: left;margin-bottom: 0px;width: 400px;height: 300px;}.abc img:nth-of-type(5){float: right;margin-bottom: 0px;width: 400px;height: 300px;}

123456789101112131415161718192021222324252627282930313233343536373839404142434445

月圆中秋

在这里插入图片描述

html部分

<div class="abc"><div id="div"> <p id="desc"></p>  <img src="picture1.png" alt="" style="width: 800px;height: 400px;"> <button id="pre">上一张</button> <button id="next">下一张</button></div></div> 123456789 css部分

* { padding: 0; }.abc{height:700px;width: 1200px;margin: 20px auto;overflow: hidden;border: 5px floralwhite solid;border-radius: 80px;}.abc p:nth-of-type(1){color: red;text-align: center;line-height: 50px;}.abc img:nth-of-type(1){float: left;margin-right: 0px;width: 400px;height: 200px;}.abc img:nth-of-type(2){float: right;margin-top:0px;width: 400px;height: 200px;}.abc img:nth-of-type(3){text-align: center;margin-top: 200px;width: 400px;height: 250px;}.abc img:nth-of-type(4){float: left;margin-bottom: 0px;width: 400px;height: 300px;}.abc img:nth-of-type(5){float: right;margin-bottom: 0px;width: 400px;height: 300px;}

12345678910111213141516171819202122232425262728293031323334353637383940414243444546 js部分

/*只要页面加载完毕，这个事件才会触发*/ window.onload = function () { /*通过元素名获取一个类数组对象*/ var num = document.getElementsByTagName("img")[0]; //定义图像地址 var shuzu = ["picture1.png", "picture2.png","picture3.png" , "picture4.png", "picture5.png","picture6.png","picture7.png","picture8.png","picture9.png","picture10.png", ]; //获取按钮 var prev = document.getElementById("pre"); var next = document.getElementById("next"); var index = 0; //图片描述 var pdesc = document.getElementById("desc"); pdesc.innerHTML = "一共" + shuzu.length + "张图片" + ",当前是第" + (index + 1) + "张"; //注意此处前面是字符串的拼接，实现加法需要用到括号,默认显示第一张图片的时候，index是0。 prev.onclick = function () { index--; if (index < 0) index = shuzu.length - 1; num.src = shuzu[index]; pdesc.innerHTML = "一共" + shuzu.length + "张图片" + ",当前是第" + (index + 1) + "张";//注意此处前面是字符串的拼接，实现加法需要用到括号 }//点击下一张，则index加一，当加到数组的总长度，也就是图片总数时，index恢复默认值 next.onclick = function () { index++; if (index > shuzu.length - 1 ) index = 0; num.src = shuzu[index]; pdesc.innerHTML = "一共" + shuzu.length + "张图片" + ",当前是第" + (index + 1) + "张";//注意此处前面是字符串的拼接，实现加法需要用到括号 } }

12345678910111213141516171819202122232425262728293031