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

「兔了个兔」玉兔踏青，纯CSS实现瑞兔日历（附源码）

news 2026/2/8 11:42:36

💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后端的开发语言ABAP，SQL进行任务的完成，对SAP企业管理系统，SAP ABAP开发和数据库具有较深入的研究。

💅文章概要： 各位小伙伴们大家好呀！今天给大家带来的是一款可爱兔兔的纯CSS日历，希望大家喜欢！让我们一起用日历记录下今天的日子！

🤟每日一言： 永远年轻，永远热泪盈眶！

前言

在这里插入图片描述

各位小伙伴们大家好呀！今天给大家带来的是一款可爱兔兔的纯CSS日历，希望大家喜欢！让我们一起用日历记录下今天的日子！

效果演示

下面为大家展示的是瑞兔日历的预览图：

实现思路

看完效果图后，各位小伙伴们肯定很想知道实现的思路，接下来我将分步骤逐一进行讲解，如果想要获取源码的小伙伴可以跳过该部分，直接前往最后的完整源码章节！在分步讲解中我会将HTML，CSS两个部分全部放在同一个文件中，方便各位小伙伴们获取!

我将实现思路分成了如下四个部分，列举如下：

背景设计
日历框设计
日历左侧日期设计
日历右侧瑞兔图片设计

背景设计

通过使用HTML和CSS可以完成整个日历背景的设置，背景颜色采取了橘橙色的设计，具有一种高级感和亲切感！

HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style></style>
</head>
<body></body>
</html>

CSS代码

将下面代码复制粘贴至<style></style>之间

body{margin: 0; /*外边距*/padding: 0; /*内边距*/display: flex; /*盒模型*/justify-content: center; /*主轴居中*/align-items: center; /*项目居中*/height: 100vh; /*高度*/background-color: #ff8c6b; /*背景颜色*/font-family: sans-serif; /*字体*/
}

日历框设计

日历框设计对四个角落采取了圆角化处理，并且设计了底部阴影模糊处理，使得整个日历框呈现一种三维立体的感觉！

圆角化处理使用CSS中的border-radius对象选择器
底部阴影模糊处理使用CSS中的border-radius对象选择器

HTML代码

将下面代码复制粘贴至<body></body>之间

<div class="calendar">
</div>

CSS代码

将下面代码复制粘贴至<style></style>之间

.calendar{position: relative;background-color: #fff;width: 800px;height: 450px;display: flex;justify-content: space-between;align-items: center;border: 15px solid #fff; /*边框*/box-shadow: 0 15px 35px rgba(0,0,0,0.5);border-radius: 2rem;
}

日历左侧日期设计

左侧黑色高亮的日期可以自己进行修改，代表当天的日期。根据月份的不同，需要对当月的日期进行重新设计！

HTML代码

将下面代码复制粘贴至<div class="calendar"></div>之间

       <div class="date"><h3>January</h3><div class="days"><div class="day">S</div><div class="day">M</div><div class="day">T</div><div class="day">W</div><div class="day">T</div><div class="day">F</div><div class="day">S</div><div class="number"></div><div class="number"></div><div class="number"></div><div class="number"></div><div class="number"></div><div class="number"></div><div class="number">1</div><div class="number">2</div><div class="number">3</div><div class="number">4</div><div class="number">5</div><div class="number">6</div><div class="number">7</div><div class="number">8</div><div class="number">9</div><div class="number">10</div><div class="number">11</div><div class="number">12</div><div class="number">13</div><div class="number">14</div><div class="number">15</div><div class="number">16</div><div class="number">17</div><div class="number">18</div><div class="number">19</div><div class="number">20</div><div class="number">21</div><div class="number">22</div><div class="number">23</div><div class="number">24</div><div class="number active">25</div><div class="number">26</div><div class="number">27</div><div class="number">28</div><div class="number">29</div><div class="number">30</div><div class="number">31</div></div></div>

CSS代码

将下面代码复制粘贴至<style></style>之间

.calendar .date{width: 400px;padding: 30px;box-sizing: border-box; /*盒子大小规则*/
}
.calendar .date h3{margin: 0 0 20px; padding: 0;font-size: 24px; /*字体大小*/font-weight: 500; /*字体维度*/text-align: center; /*字体居中*/user-select: none; /*不可选中*/text-transform: capitalize; /*首字母大写*/
}
.calendar .date .days{display: flex;flex-wrap: wrap; /*可换行*/
}
.calendar .date .days .number.active{background-color: #362b48;color: #fff;cursor: pointer; /*鼠标样式*/border-radius: 50%; /*边框圆角*/
}
.calendar .date .days .day,
.calendar .date .days .number{width: 48px;height: 48px;display: flex;justify-content: center;align-items: center;user-select: none;
}
.calendar .date .days .day:first-child,
.calendar .date .days .number:nth-child(7n+1){ /*7个为一组，每组第一个*/color: #f44336;font-weight: 600;
}

日历右侧瑞兔图片设计

HTML代码

将下面代码复制粘贴至最后一个</div>之上

 <div class="img"><img src="https://wyz-math.cn/usr/uploads/2023/01/3088778204.jpg" alt="Error" ></div>

CSS代码

将下面代码复制粘贴至<style></style>之间

.calendar .img{position: relative; /*定位*/top:0;right: 0;width: 400px;height: 100%;background-color: #000;user-select: none;border-radius: 3.3rem;
}
.calendar .img img{position: relative;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover; /*元素内容如何适应屏幕*/border-radius: 3.3rem;
}

完整源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body{margin: 0; /*外边距*/padding: 0; /*内边距*/display: flex; /*盒模型*/justify-content: center; /*主轴居中*/align-items: center; /*项目居中*/height: 100vh; /*高度*/background-color: #ff8c6b; /*背景颜色*/font-family: sans-serif; /*字体*/
}
.calendar{position: relative;background-color: #fff;width: 800px;height: 450px;display: flex;justify-content: space-between;align-items: center;border: 15px solid #fff; /*边框*/box-shadow: 0 15px 35px rgba(0,0,0,0.5);border-radius: 2rem;
}
.calendar .date{width: 400px;padding: 30px;box-sizing: border-box; /*盒子大小规则*/
}
.calendar .date h3{margin: 0 0 20px; padding: 0;font-size: 24px; /*字体大小*/font-weight: 500; /*字体维度*/text-align: center; /*字体居中*/user-select: none; /*不可选中*/text-transform: capitalize; /*首字母大写*/
}
.calendar .date .days{display: flex;flex-wrap: wrap; /*可换行*/
}
.calendar .date .days .number.active{background-color: #362b48;color: #fff;cursor: pointer; /*鼠标样式*/border-radius: 50%; /*边框圆角*/
}
.calendar .date .days .day,
.calendar .date .days .number{width: 48px;height: 48px;display: flex;justify-content: center;align-items: center;user-select: none;
}
.calendar .date .days .day:first-child,
.calendar .date .days .number:nth-child(7n+1){ /*7个为一组，每组第一个*/color: #f44336;font-weight: 600;
}
.calendar .img{position: relative; /*定位*/top:0;right: 0;width: 400px;height: 100%;background-color: #000;user-select: none;border-radius: 3.3rem;
}
.calendar .img img{position: relative;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover; /*元素内容如何适应屏幕*/border-radius: 3.3rem;
}</style>
</head>
<body><div class="calendar"><div class="date"><h3>January</h3><div class="days"><div class="day">S</div><div class="day">M</div><div class="day">T</div><div class="day">W</div><div class="day">T</div><div class="day">F</div><div class="day">S</div><div class="number"></div><div class="number"></div><div class="number"></div><div class="number"></div><div class="number"></div><div class="number"></div><div class="number">1</div><div class="number">2</div><div class="number">3</div><div class="number">4</div><div class="number">5</div><div class="number">6</div><div class="number">7</div><div class="number">8</div><div class="number">9</div><div class="number">10</div><div class="number">11</div><div class="number">12</div><div class="number">13</div><div class="number">14</div><div class="number">15</div><div class="number">16</div><div class="number">17</div><div class="number">18</div><div class="number">19</div><div class="number">20</div><div class="number">21</div><div class="number">22</div><div class="number">23</div><div class="number">24</div><div class="number active">25</div><div class="number">26</div><div class="number">27</div><div class="number">28</div><div class="number">29</div><div class="number">30</div><div class="number">31</div></div></div><div class="img"><img src="https://wyz-math.cn/usr/uploads/2023/01/3088778204.jpg" alt="Error" ></div></div>
</body>
</html>

写在最后的话

本文花费大量时间介绍了如何创建一个精美的瑞兔日历，希望能帮助到各位小伙伴，码文不易，还望各位大佬们多多支持哦，你们的支持是我最大的动力！

在这里插入图片描述

✨ $原创不易，还希望各位大佬支持一下\textcolor{blue}{原创不易，还希望各位大佬支持一下}$

👍 $点赞，你的认可是我创作的动力！\textcolor{9c81c1}{点赞，你的认可是我创作的动力！}$

⭐️ $收藏，你的青睐是我努力的方向！\textcolor{ed7976}{收藏，你的青睐是我努力的方向！}$

✏️ $评论，你的意见是我进步的财富！\textcolor{98c091}{评论，你的意见是我进步的财富！}$

「兔了个兔」玉兔踏青，纯CSS实现瑞兔日历（附源码）

💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后…...

编程日记 2023/3/14 16:03:41

第17章关于局部波动率的一些总结

这学期会时不时更新一下伊曼纽尔德曼（Emanuel Derman） 教授与迈克尔B.米勒（Michael B. Miller）的《The Volatility Smile》这本书，本意是协助导师课程需要，发在这里有意的朋友们可以学习一下，思…...

编程日记 2023/3/14 15:58:39

反转链表来源：杭哥206. 反转链表 - 力扣（LeetCode）typedef struct ListNode ListNode; struct ListNode* reverseList(struct ListNode* head) {if (headNULL){return NULL;}ListNode* prevhead;ListNode* curhead->next;ListNode* furNUL…...

编程日记 2023/3/14 15:53:36

联想触摸板只能单击，二指三指失效

问题背景这问题是我笔记本两三年前重装win10系统后出现的，当时有鼠标懒得弄。今天发现没鼠标后，触摸板连二指滑动都没有太麻烦了，所以决定弄一下。联想笔记本，win10系统重装后出现的问题。 1.鲁大师，联想电脑管家 …...

编程日记 2023/3/14 15:48:34

mysql 删除表卡死，或是截断（truncate）卡死解决办法

利用工具进行truncate表的时候，一直运行，运行了十几分钟也没有成功。中止之后再运行也是一样。但是删除表的数据以及查询表数据都是可以的。猜测是锁死了。使用 show processlist; 发现Waiting for table metadata lock 问题； mysql> s…...

编程日记 2023/3/14 15:43:31

ORACLE P6 EPPM 架构及套件介绍(源自Oracle Help)

引言借助官方帮助的内容， 我水一篇文章，翻译了下文 P6EPPM架构 P6各套件 P6：大多数用户几乎完全依赖在标准网络浏览器中运行的 P6 网络应用程序。简称为 P6，它是管理项目的主要界面。P6 移动版：允许团队成员提供任…...

编程日记 2023/5/12 14:40:21

Android开发面试：数据结构与算法知识答案精解

目录数据结构与算法线性表数组链表栈队列树二叉树红黑树哈夫曼树排序算法冒泡排序选择排序插入排序希尔排序堆排序快速排序归并排序查找算法线性查找二分查找插值查找斐波拉契查找树表查找分块查找哈希查找动态规划算法…...

编程日记 2023/4/15 22:34:46

京东前端手写面试题集锦

实现call方法 call做了什么: 将函数设为对象的属性执行和删除这个函数指定this到函数并传入给定参数执行函数如果不传入参数，默认指向为 window // 模拟 call bar.mycall(null); //实现一个call方法： // 原理：利用 context.xxx self obj.…...

编程日记 2023/3/14 15:28:23

【JDK动态代理】及【CGLib动态代理】：Java的两种动态代理方式

Java的两种动态代理方式动态代理是什么？JDK动态代理CGLib动态代理CGLib 底层原理CGLib 实现步骤两者区别Spring AOP原理--动态代理动态代理是什么？ 动态代理就是，在程序运行期，创建目标对象的代理对象，并对目标对象中的…...

编程日记 2023/3/14 15:23:21

《程序员面试金典（第6版）》面试题 04.05. 合法二叉搜索树

题目描述实现一个函数，检查一棵二叉树是否为二叉搜索树。示例 1: 输入: 2/ \1 3输出: true 示例 2: 输入: 5/ \1 4/ \3 6输出: false 解释: 输入为: [5,1,4,null,null,3,6]。根节点的值为 5 ，但是其右子节点值为 4 。解题思路与代码使用…...

编程日记 2023/3/14 15:18:19

Nginx 反向代理技术梳理

Nginx 反向代理技术梳理使用反向代理脑图域名 A 可以解析找到 CDN 缓存用户点击 APP 即通过 URL 发送 HTTPS 请求域名会进入阿里云的 DNS 服务器，解析域名会做第一级负载均衡通过 CDN 解析出域名，通过阿里云配置转发到 CDN 缓存服务器 CDN 有数据则直…...

编程日记 2023/3/14 15:13:16

华为OD机试 - 整数编码（Java） | 机试题+算法思路+考点+代码解析【2023】

整数编码题目实现一种整数编码方法，使得待编码的数字越小，编码后所占用的字节数越小。编码规则如下： 1、编码时7位一组，每个字节的低7位用于存储待编码数字的补码。 2、字节的最高位表示后续是否还有字节，置1表示后面还有更多的字节，置0表示当前字节为最后一个字…...

编程日记 2023/5/28 16:52:29

蓝桥杯冲击01 - 质数篇

目录前言一、质数是什么二、易错点三、试除法判断是否为质数四、质数常考三大模型五、真题练手前言距离蓝桥杯还有一个月，高效复习蓝桥杯知识， 质数相关的题目在蓝桥杯中经常出现。例如，2016年蓝桥杯省赛初赛第四题就是要求判…...

编程日记 2023/3/14 15:03:08

【WEB前端进阶之路】 HTML 全路线学习知识点梳理（下）

前言本文是HTML零基础小白学习系列的第三篇文章，点此阅读上一篇文章文章目录前言十五.HTML布局1.使用div元素添加网页布局2.使用table元素添加网页布局十六.HTML表单和输入1.文本域2.密码字段3.单选按钮4.复选框5.提交按钮十七.HTML框架1.iframe语法2.iframe设置…...

编程日记 2023/3/14 14:58:04

MySQL索引分类

1 MySQL索引都有哪些分类按数据结构分类可分为：Btree索引、Hash索引、Full-text索引;按物理存储分类可分为：聚簇索引、二级索引（辅助索引）;按字段特性分类可分为：主键索引、普通索引、前缀索引;按字段个数分类可分为&a…...

编程日记 2023/4/25 7:29:29

会声会影2023最新版图文安装详细教程

会声会影2023操作简单，使用便捷，创意十足，新增的分屏功能，轨道透明度，镜头平移等功能，让用户的剪辑过程更加流畅，轻松就能制作出令人惊艳的视频作品。它不仅符合家庭或个人所需的影片剪辑功能&a…...

编程日记 2023/3/14 14:48:02

Java中的反射

类加载器（1）类的加载当我们的程序在运行后，第一次使用某个类的时候，会将此类的class文件读取到内存，并将此类的所有信息存储到一个Class对象中。说明：a.图中的Class对象是指：java.lang.Class类的…...

编程日记 2023/3/14 14:43:00

STM32入门笔记(03)：STM32F103C8T6定时器的输入捕获模式和编码器模式（SPL库函数版)

目录1.定时器的输入捕获模式定时器输入捕获实验代码实现程序说明实现思路实现效果知识要点2.定时器的编码器模式定时器编码器实验代码实现实验思路知识要点参考资料先导知识 [1] STM32入门笔记(02)：定时器之定时器中断、输入捕获和PWM输出（SPL库函数版)…...

编程日记 2023/3/14 14:37:58

《网络安全》零基础教程-适合小白科普

《网络安全》零基础教程目录目录《网络安全》零基础教程第1章网络安全基础什么是网络安全常见的网络安全威胁网络安全的三个基本要素网络安全的保障措施第2章网络攻击类型病毒、蠕虫、木马、后门 DoS、DDoS攻击 SQL注入、XSS攻击 …...

编程日记 2023/4/11 23:17:51

微信小程序语言与web开发语言的区别

WXML与HTML的区别def：WXML是小程序框架设计的一套标签语言，用来构建小程序页面的结构，作用类似于web开发中的HTML区别：标签名称的不同如HTML中的div，span，img，a分别对应wxml中的view&#xff0c…...

编程日记 2023/5/26 13:34:25

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章传送阵>> 点我查看说明：假设每台服务器已…...

编程新知 2026/2/8 1:53:29

XCTF-web-easyupload

试了试php，php7，pht，phtml等，都没有用尝试.user.ini 抓包修改将.user.ini修改为jpg图片在上传一个123.jpg 用蚁剑连接，得到flag...

编程新知 2026/2/8 3:54:15

【算法训练营Day07】字符串part1

文章目录反转字符串反转字符串II替换数字反转字符串题目链接：344. 反转字符串双指针法，两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

c#开发AI模型对话

AI模型前面已经介绍了一般AI模型本地部署，直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。微软提供了ML.NET来开发和使用AI模型，但是目前国内可能使用不多，至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2026/2/1 8:59:45

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...

编程新知 2025/11/3 0:44:41

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/2/8 1:58:01

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...

编程新知 2026/1/27 13:20:11

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架，用于…...

编程新知 2026/1/26 5:44:16

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用引言随着无人机（无人驾驶飞行器，UAV）技术的快速发展，其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统，无人机的“黑飞”&…...

编程新知 2026/1/26 6:01:03

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

编程新知 2026/2/1 17:50:36

目录

前言

效果演示

实现思路

背景设计

HTML代码

CSS代码

日历框设计

HTML代码

CSS代码

日历左侧日期设计

HTML代码

CSS代码

日历右侧瑞兔图片设计

HTML代码

CSS代码

完整源码

写在最后的话

相关文章：