当前位置: 首页 > news >正文

花好月圆时,邀你一起来读诗!

中秋佳节,代码如诗!

在这里插入图片描述

一年一度中秋节,一年一度团圆夜;
年年月圆人不圆,岁岁形只影孤单。
只愿大家能够团团圆圆,合家美满。
中秋节,团圆节,月圆,人更圆!

中国人对月亮特别执着,觉得月圆很美,月缺也很美。比起西方人因为热度、伟大,而对太阳的痴迷,我们更加懂得欣赏月亮的阴柔,我们用月亮的阴晴圆缺暗示着人世间的悲欢离合。

从小看着猴子水中捞月,听着二泉映月,吃着白莲蓉双黄月饼。关于月亮,似乎有及说不清道不明的感情。中秋圆月,一家团聚,在当今年代更加显得珍贵难得。

今年的中秋节又快要到啦,我们一起看一下不同人的视角下的中秋夜的圆月之美!

  • 打工人说:“瞧,那是老板画的大饼!”
  • 老板说:“错了,那分明是一块银元!”

只有程序员,似乎听不到他们之间的争论,继续吃着老板画的大饼,拿着老板给的银元,默默的一行一行的耕耘。
于是~~~~~~~~~~~~
第一行诗:<div class="header"> </div>
第二行诗:<div class="header-wrapper"> </div>
第三行诗:<p> 举杯邀明月,对影成三人。</p>
第四行诗(屎):<div> </div>
第五行屎:……
……
……
第n行屎(诗):background-color: ginger;
……
……
……

直到深夜,终于写完了!!!

👇👇👇👇👇
页面自取:https://gitcode.net/jingchao/mid-autumn-festival.git

在这里插入图片描述

打工人和老板看了之后,都惊叹了!

注:以上内容切勿当真,仅供娱乐!

  • 在薅完头发后写出来上面的文案,下面来看一下这诗一般的代码吧!
  • html实现部分源码
<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>中秋节</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Ma+Shan+Zheng&family=Raleway:wght@300&display=swap" rel="stylesheet">
</head>
    <body>
    <div class="header">
        <div class="header-wrapper">
            <input type="radio" name="nande-toggle" id="nande-overview" checked>

            <div class="nande-crescent-container">
                <div class="nande-crescent">
                    <div class="nande-crescent-1">
                        <div class="hg-text">
                            <label title="home" for="nande-overview"></label>
                            <label title="events"></label>
                            <label title="staff team" ></label>
                            <label title="site updates"></label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="nande-bg-top">
                <div class="nande-title">
                    <!-- 中国结 -->
                    <svg>...</svg>
                    <div class="nande-title-container">
                        <div class="nande-notice-plot">
                            <div class="notice-header"><span>Mid-Autumn Festival</span>
                                <i class="cp cp-maple-leaf"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="hg-things">
                    <label for="nande-overview" class="nande-info">
                        <div class="news-header">
                            <i class="cp cp-flower"></i>
                            中秋快乐
                            <i class="cp cp-flower"></i>
                        </div>
                        <div class="overview-layout">
                            <div class="home-text">
                                <h2 class="poetry-title">《月下独酌》</h2>
                                <h3>——李白</h3>
                                <p>花间一壶酒,独酌无相亲。</p>
                                <p>举杯邀明月,对影成三人。</p>
                                <p>月既不解饮,影徒随我身。</p>
                                <p>暂伴月将影,行乐须及春。</p>
                                <p>我歌月徘徊,我舞影零乱。</p>
                                <p>醒时相交欢,醉后各分散。</p>
                                <p>永结无情游,相期邈云汉。</p>
                            </div>
                            <div class="home-notice">
                                提一壶美酒摆在花丛间,自斟自酌无友无亲。举杯邀请明月,对着身影成为三人。明月当然不会喝酒,身影也只是随着我身。我只好和他们暂时结成酒伴,要行乐就必须把美好的春光抓紧。我唱歌明月徘徊,我起舞身影零乱。醒时一起欢乐,醉后各自分散。我愿与他们永远结下忘掉伤情的友谊,相约在缥缈的银河边。
                            </div>
                        </div>
                    </label>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
  • css实现代码
    此处省略

此页面的代码在gitcode开源,里面包含了项目的全部代码和素材,需要此页面的的友友可以去自取 京茶吉鹿 / mid-autumn-festival

花好月圆夜,幸福团聚时,月饼不能少

在这里插入图片描述
最后,提前祝大家中秋节快乐!如果喜欢这个小项目,希望可以动动小手给个一键三连,你的鼓励,就是我最大的动力!

上一篇文章:魔法诗——基于Vue开发的实用、高端、炫酷的响应式网页!

相关文章:

  • 在Slicer中添加点、直线和曲线
  • Win7下安装Docker(虚拟机win7)
  • JavaWeb对于JSP内置对象及其作用域的深入理解与运用
  • HarmonyOS(鸿蒙系统)物联网开发教程——环境搭建
  • 《MySQL》增删查改(进阶)
  • 【Django】REST_Framework框架——APIView类源码解析
  • 多线程之Thread
  • Selenium自动化测试框架
  • 四年时间,从一个浑浑噩噩的程序员到csdn博客专家的成长之路
  • Spring Boot 9 :详细描述Spring Boot + Vue项目部署过程:Centos为例(重点)
  • 医疗项目业务介绍
  • 猿创征文 | Git的良心教程
  • 【线性代数基础进阶】特征值和特征向量-补充+练习
  • dc_shell的report_xx和查找pin或cell的input/output [all_fanin/out]
  • (LeetCode C++)盛最多水的容器
  • [微信小程序] 使用ES6特性Class后出现编译异常
  • 【Linux系统编程】快速查找errno错误码信息
  • 30天自制操作系统-2
  • 5、React组件事件详解
  • Bytom交易说明(账户管理模式)
  • Idea+maven+scala构建包并在spark on yarn 运行
  • LintCode 31. partitionArray 数组划分
  • MQ框架的比较
  • MySQL用户中的%到底包不包括localhost?
  • October CMS - 快速入门 9 Images And Galleries
  • PHP 程序员也能做的 Java 开发 30分钟使用 netty 轻松打造一个高性能 websocket 服务...
  • Ruby 2.x 源代码分析:扩展 概述
  • RxJS: 简单入门
  • UMLCHINA 首席专家潘加宇鼎力推荐
  • Vue 2.3、2.4 知识点小结
  • Vue--数据传输
  • vue--为什么data属性必须是一个函数
  • 得到一个数组中任意X个元素的所有组合 即C(n,m)
  • 二维平面内的碰撞检测【一】
  • 分享几个不错的工具
  • 罗辑思维在全链路压测方面的实践和工作笔记
  • 让你的分享飞起来——极光推出社会化分享组件
  • 微信支付JSAPI,实测!终极方案
  • 一份游戏开发学习路线
  • 译米田引理
  • 在Docker Swarm上部署Apache Storm:第1部分
  • 【运维趟坑回忆录】vpc迁移 - 吃螃蟹之路
  • ​LeetCode解法汇总2304. 网格中的最小路径代价
  • #Linux(权限管理)
  • #使用清华镜像源 安装/更新 指定版本tensorflow
  • (11)MATLAB PCA+SVM 人脸识别
  • (11)工业界推荐系统-小红书推荐场景及内部实践【粗排三塔模型】
  • (4)事件处理——(2)在页面加载的时候执行任务(Performing tasks on page load)...
  • (C语言)strcpy与strcpy详解,与模拟实现
  • (读书笔记)Javascript高级程序设计---ECMAScript基础
  • (二)构建dubbo分布式平台-平台功能导图
  • (九十四)函数和二维数组
  • (论文阅读32/100)Flowing convnets for human pose estimation in videos
  • (三)Honghu Cloud云架构一定时调度平台
  • (已解决)报错:Could not load the Qt platform plugin “xcb“