html+圣诞树

淩亂°似流年 2024-03-30 12:03 79阅读 0赞

### 圣诞节 ###

基督教纪念耶稣诞生的重要节日。亦称耶稣圣诞节、主降生节，天主教亦称耶稣圣诞瞻礼。耶稣诞生的日期，《圣经》并无记载。公元336年罗马教会开始在12月25日过此节。12月25日原是罗马帝国规定的太阳神诞辰。有人认为选择这天庆祝圣诞，是因为基督教徒认为耶稣就是正义、永恒的太阳。5世纪中叶以后，圣诞节作为重要节日，成了教会的传统，并在东西派教会中逐渐传开。因所用历法不同等原因，各教派会举行庆祝的具体日期和活动形式也有差别。圣诞节习俗传播到亚洲主要是在十九世纪中叶，日本、韩国等都受到了圣诞文化的影响。现在西方在圣诞节常互赠礼物，举行欢宴，并以圣诞老人、圣诞树等增添节日气氛，已成为普遍习俗。圣诞节也成为西方世界以及其他很多地区的公共假日。

圣诞过完就是元旦，马上就要过年拉，祝大家在新的一年顺风顺水，在技术的学习道路上畅通无阻。

### 圣诞树的由来 ###

据说圣诞树 \[2\]  最早出现在古罗马12月中旬的[农神节][Link 1]，德国传教士尼古斯在公元8世纪用枞树供奉圣婴。随后，[德国][Link 2]人把12月24日作为[亚当][Link 3]和[夏娃][Link 4]的节日，在家放上象征伊甸园的“乐园树”，上挂代表圣饼的小甜饼，象征赎罪；还点上蜡烛和球，象征[基督][Link 5]。到16世纪，宗教改革者马丁·路德，为求得一个满天星斗的圣诞之夜，设计出在家中布置一颗装着蜡烛和球的圣诞树。

18世纪，开始在德国[信义宗][Link 6]信徒流行，19世纪流行与德国全国，成为德国根深蒂固的传统。

19世纪初期，圣诞树传到英国；

![ddd7eac146c9426d0ee182beb4bb3f4f.jpeg][]

[圣诞树风俗(4张)][4]

19世纪中叶，[艾伯特][Link 7]***（维多利亚女王的丈夫、德国皇子）***加以推广普及。维多利亚式圣诞树饰以蜡烛、糖果和花色糕点，用 \[2\] 丝带和纸链吊挂在树枝上。

早在17世纪圣诞树即由德国移民带到北美，至19世纪广为流行。在[奥地利][Link 8]、[瑞士][Link 9]、波兰和荷兰也颇流行。

在[中国][Link 10]和日本，圣诞树于19及20世纪由美国传教士传入，多饰以彩色缤纷的[纸花][Link 11]。

### 圣诞树代码 ###

送你一颗聚满礼物的圣诞树，顶上最亮的那颗星是我的真心，下面挂的是我的痴心，制造材料的是我一颗不变有心：圣诞快乐

![00bad33189bf450c90fb933d0e74d9cb.png][]

一个HTML的圣诞树，我也来水一个圣诞勋章，直接创建一个html，将下面代码复制进去

![31b2ee89de894eb09dfb9285b525f74c.png][]

![ab280b2981ce409387fcfd96629a9c96.png][]

<!DOCTYPE  PUBLIC>
    <html>
    <head>
      <meta charset="utf-8">
      <title>
        From ZXW-NUDT
      </title>
      <style>
        body{text-align:center}
        html, body
        {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          border: 0;
        }
     
        div
        {
          margin: 0;
          padding: 0;
          border: 0;
        }
     
        .nav
        {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 27px;
          background-color: white;
          color: black;
          text-align: center;
          line-height: 25px;
        }
     
        a
        {
          color: black;
          text-decoration: none;
          border-bottom: 1px dashed black;
        }
     
        a:hover
        {
          border-bottom: 1px solid red;
        }
     
        .previous
        {
          float: left;
          margin-left: 10px;
        }
     
        .next
        {
          float: right;
          margin-right: 10px;
        }
     
        .green
        {
          color: green;
        }
     
        .red
        {
          color: red;
        }
     
        textarea
        {
          width: 100%;
          height: 100%;
          border: 0;
          padding: 0;
          margin: 0;
          padding-bottom: 20px;
        }
     
        .block-outer
        {
          float: left;
          width: 22%;
          height: 100%;
          padding: 5px;
          border-left: 1px solid black;
          margin: 30px 3px 3px 3px;
        }
     
        .block-inner
        {
          height: 68%;
        }
     
        .one
        {
          border: 0;
        }
      </style>
    </head>
     
    <body marginwidth="0" marginheight="0">
    <canvas id="c" height="356" width="446">
      <script>
        var collapsed = true;
        function toggle()
        {
          var fs = top.document.getElementsByTagName('frameset')[0];
          var f = fs.getElementsByTagName('frame');
          if (collapsed)
          {
            fs.rows = '250px,*';
            fs.noResize = false;
            f[0].noResize = false;
            f[1].noResize = false;
          }
     
          else
          {
            fs.rows = '30px,*';
            fs.noResize = true;
            f[0].noResize = true;
            f[1].noResize = true;
          }
          collapsed = !collapsed;
        }
      </script>
     
      <script>
        var b = document.body;
        var c = document.getElementsByTagName('canvas')[0];
        var a = c.getContext('2d');
        document.body.clientWidth;
      </script>
     
      <script>
        M=Math;
        Q=M.random;J=[];
        U=16;
        T=M.sin;
        E=M.sqrt;
        for(O=k=0;x=z=j=i=k<200;)
          with(M[k]=k?c.cloneNode(0):c)
          {
            width=height=k?32:W=446;
            with(getContext('2d'))
              if(k>10|!k)
     
                for(
                        font='60px Impact',
                                V='rgba(';I=i*U,fillStyle=k?k==13?V+'205,205,215,.15)':
                        V+(147+I)+','+(k%2?128+I:0)+','+I+',.5)':'#cca',i<7;)
     
                  beginPath(fill(arc(U-i/3,24-i/2,k==13?4-(i++)/2:8-i++,0,M.PI*2,1)));
     
              else for(;
                      x=T(i),
                              y=Q()*2-1,
                              D=x*x+y*y,
                              B=E(D-x/.9-1.5*y+1),
                              R=67*(B+1)*(L=k/9+.8)>>1,
                      i++<W;
              )
     
                if(D<1)
                  beginPath(strokeStyle=V+R+','+(R+B*L>>0)+',40,.1)'),
                          moveTo(U+x*8,U+y*8),
                          lineTo(U+x*U,U+y*U),
                          stroke();
     
            for(
                    y=H=k+E(k++)*25,
                            R=Q()*W;
                    P=3,j<H;)
              J[O++]=[
                x+=T(R)*P+Q()*6-3,y+=Q()*U-8,
                z+=T(R-11)*P+Q()*6-3,
                j/H*20+((j+=U)>H&Q()>.8?Q(P=9)*4:0)>>1]
          }
     
        setInterval(function G(m,l)
        {
          A=T(D-11);
          if(l)
     
            return(
                    m[2]-l[2])*A+(l[0]-m[0])*T(D);
          a.clearRect(0,0,W,W);
          J.sort(G);
     
          for(
                  i=0;
                  L=J[i++];
                  a.drawImage(M[L[3]+1],207+L[0]*A+L[2]*T(D)>>0,L[1]>>1))
          {
            if(i==2e3)
              a.fillText
              ('Happy Christmas!',U,345);
     
            if(!(i%7))
              a.drawImage(M[13],
                      ((157*(i*i)+T(D*5+i*i)*5)%W)>>0,
                      ((113*i+(D*i)/60)%(290+i/99))>>0);
          }
          D+=.02
        },1)
      </script>
    </canvas>
    </body>
    </html>

[Link 1]: https://baike.baidu.com/item/%E5%86%9C%E7%A5%9E%E8%8A%82?fromModule=lemma_inlink
[Link 2]: https://baike.baidu.com/item/%E5%BE%B7%E5%9B%BD/147953?fromModule=lemma_inlink
[Link 3]: https://baike.baidu.com/item/%E4%BA%9A%E5%BD%93?fromModule=lemma_inlink
[Link 4]: https://baike.baidu.com/item/%E5%A4%8F%E5%A8%83?fromModule=lemma_inlink
[Link 5]: https://baike.baidu.com/item/%E5%9F%BA%E7%9D%A3/1067791?fromModule=lemma_inlink
[Link 6]: https://baike.baidu.com/item/%E4%BF%A1%E4%B9%89%E5%AE%97?fromModule=lemma_inlink
[ddd7eac146c9426d0ee182beb4bb3f4f.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/8759f1a3b8854278b99a23c59ae289a8.jpeg
[4]: https://baike.baidu.com/pic/%E5%9C%A3%E8%AF%9E%E6%A0%91/253135/1490782877/b151f8198618367ad8edb4c123738bd4b31ce542?fr=lemma&fromModule=lemma_content-image&ct=cover
[Link 7]: https://baike.baidu.com/item/%E8%89%BE%E4%BC%AF%E7%89%B9/16377903?fromModule=lemma_inlink
[Link 8]: https://baike.baidu.com/item/%E5%A5%A5%E5%9C%B0%E5%88%A9?fromModule=lemma_inlink
[Link 9]: https://baike.baidu.com/item/%E7%91%9E%E5%A3%AB?fromModule=lemma_inlink
[Link 10]: https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD/1122445?fromModule=lemma_inlink
[Link 11]: https://baike.baidu.com/item/%E7%BA%B8%E8%8A%B1?fromModule=lemma_inlink
[00bad33189bf450c90fb933d0e74d9cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/76137098c00149dc87bf34651b798052.png
[31b2ee89de894eb09dfb9285b525f74c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/cc9d23a0eae44d0b8088f36bbd218d0e.png
[ab280b2981ce409387fcfd96629a9c96.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/c9dd2229056b414694eba7fe9d5dd1e9.png