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

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

前言


八月十五,秋已过半,是为中秋。


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

02b49c8adaf8482c92580624fa30ef53.gif

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


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

a6e019a5fb6341529925e8a7cc86eef5.png

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


❤️ 导航条

28ab33b9a6434344bce41c022484c2bc.png

在之前的文章中介绍过简单导航条的制作,这个导航条的原理和之前的一样,只不过利用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>


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);
    }


🌟今日中秋


2d7a2bde5714434cbeb5a354c8a54d9c.png


html部分


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


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);
        }
    }


✨何为中秋

f37c32933a954b8abb8257b9741de84a.png


html部分


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


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;
          }


💫畅游中秋

942923203c12466bbe2964d6e01fda70.png


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>


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;
    }
}


🌺诗词中秋


981a60708d65450ea4b069fe077fb1d0.png


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>


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;
  }

🌕月圆中秋


0a9c71d0965f4d7b8c9c5f2d4624297e.png

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>


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;
    }


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) + "张";//注意此处前面是字符串的拼接,实现加法需要用到括号
             }
            }


总结


以上就是利用html、css和JavaScript做的一些简单的网页了,感兴趣的小伙伴可以去试试哦,可以练练手。


3a556e197f084dad8b335ea9590f6c6a.gif


初学乍道,有很多不足的地方,还请各位前辈指点,万分感谢!

最后祝大家中秋快乐,月饼炫起来吧。


相关文章
|
3天前
|
前端开发 JavaScript UED
深入理解 JavaScript 同步和异步,让网页灵动起来!
深入理解 JavaScript 同步和异步,让网页灵动起来!
|
2天前
|
Web App开发 前端开发 JavaScript
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
|
3天前
|
前端开发 JavaScript UED
CSS顶部与JS后写:网页渲染的奥秘
CSS顶部与JS后写:网页渲染的奥秘
|
4天前
|
前端开发
实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
7 1
|
4天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
19 0
HTML5/CSS3粒子效果进度条代码
|
4天前
|
前端开发 JavaScript 索引
CSS常见用法 以及JS基础语法
CSS常见用法 以及JS基础语法
14 0
|
4天前
|
JavaScript 前端开发
JS实现网页页面的框架(demo)
JS实现网页页面的框架(demo)
10 1
|
4天前
|
JavaScript 前端开发
js和css以及js制作弹窗
js和css以及js制作弹窗
12 1
|
4天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
27 1
|
4天前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段