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

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

news 文章来源：https://blog.csdn.net/weixin_59480481/article/details/129221318 2025/1/16 13:29:21

💂作者简介： 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

【2022-09-14】米哈游秋招笔试三道编程题

第一题：最短子串题目描述米小游拿到了一个字符串，她想截取一个连续子串，使得该子串中包含至少k个连续的“mihoyo”。你可以帮米小游求出最短的子串长度，以及对应的子串位置吗？ 输入描述第一行输入两个正整数n…...

编程日记 2023/3/14 14:22:52

云监控能力介绍

传统监控介绍监控系统必要性监控系统的能力清单市面上常见商业及开源监控工具集传统监控体系的不足云监控介绍云监控（CloudMonitor）是一项针对云资源和互联网应用进行监控的服务。云监控为云上用户提供开箱即用的企业级开放型一站式监控解决方…...

编程日记 2023/5/25 15:53:33

HTML 文档类型

<!DOCTYPE> 声明帮助浏览器正确地显示网页。 <!DOCTYPE> 声明 Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。 HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完…...

编程日记 2023/3/14 14:12:44

【UML】软件设计说明书 (完结)

目录一. 🦁 前言1.1 编写目的1.2 背景1.3 定义1.4 参考资料二. 🦁 总体设计2.1需求规定2.1.1 系统描述2.1.2 系统用例图2.2 运行环境2.2.1 设备2.2.2 支持软件2.2.3 接口2.2.4 控制2.3 基本设计概念2.4 系统结构三. 🦁 用例分析与设计3.1 用户…...

编程日记 2023/3/14 14:07:42

MATLAB——FFT(快速傅里叶变换)

基础知识 FFT即快速傅里叶变换，利用周期性和可约性，减少了DFT的运算量。常见的有按时间抽取的基2算法（DIT-FFT）按频率抽取的基2算法（DIF-FFT）。 1.利用自带函数fft进行快速傅里叶变换若已知序列x[4,3,2,6…...

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

力扣-进店却未进行过交易的顾客

大家好，我是空空star，本篇带大家了解一道简单的力扣sql练习题。文章目录前言一、题目：1581. 进店却未进行过交易的顾客二、解题1.正确示范①提交SQL运行结果2.正确示范②提交SQL运行结果3.正确示范③提交SQL运行结果4.正确示范④提交SQL运行…...

编程日记 2023/3/14 13:57:37

一文解决vscode中借助CMake配置使用Opencv过程中的所有问题

vscode中借助CMake配置使用opencv过程中的问题 vscode编译工程的完整过程编写好CMakeLists.txtvscode中 ctrlshiftp 选择cmake configurevscode中 ctrlshiftp 选择cmake build CMake问题 1. set OpenCV_FOUND to FALSE so package “OpenCV” is considered to be NOT FOU…...

编程日记 2023/4/25 4:56:20

Golang每日一练(leetDay0004)

10. 正则表达式匹配 Regular Expression Matching 给你一个字符串 s 和一个字符规律 p，请你来实现一个支持 . 和 * 的正则表达式匹配。 . 匹配任意单个字符* 匹配零个或多个前面的那一个元素所谓匹配，是要涵盖整个字符串 s的，而不是部分…...

编程日记 2023/3/14 13:47:33

手机忘记密码解锁的 6 大软件方法

您可能想要解锁手机的原因有很多。也许您正在海外旅行并想使用当地的 SIM 卡，或者您可能刚买了一部二手手机并且需要删除之前所有者的个人数据。您可能想知道如何获得可以免费解锁任何手机的软件。Android 用户可以使用他们的指纹、面部识别或 PIN。您也可以通过快速…...

编程日记 2023/3/14 13:42:30

MySQL数据库的基础语法总结(1)

MySql一.数据库,数据表的基本操作1.数据库的基本操作2. 数据表的基本操作2.1 数据库的数据类型2.1.1 整数类型2.1.2 浮点数类型和定点数类型2.1.3 字符串类型2.1.4 日期与时间类型2.2 数据表的基本操作2.2.1 创建一个数据表2.2.2 查看数据表2.2.3 查看表的基本信息的MySQL指令2…...

编程日记 2023/3/14 13:37:29

商城建设网站开发/软文推送

parse用于从一个字符串中解析出json对象,如 var str {"name":"huangxiaojian","age":"23"} 结果： JSON.parse(str) Objectage: "23"name: "huangxiaojian"__proto__: Object注意：单引号写…...

编程日记 2025/1/16 11:42:12

南昌比较好的网站设计/网站seo收录工具

springBoot的2.x版本与springCloud的H版本版本对应关系：版本查看地址...

编程日记 2025/1/16 7:07:42

做网站需要实名认证吗/关键词排名优化技巧

导出bcp dbname.tbname out c:\data.sql -T -c导入bcp dbname.tbname inc:\data.sql -T -c转载于:https://www.cnblogs.com/joe-yang/archive/2009/07/20/1527004.html...

编程日记 2025/1/16 6:14:37

专门做反季的网站/百度权重1

近来遇到一些网络编程方面的问题，涉及到了一些常见的概念，如：阻塞、非阻塞、异步I/O等等，百度的结果是惨不忍睹的，当然这也不能怪百度。没有办法还是得看英文，翻教材。后来发现阻塞和非阻塞的概念也并不难以…...

编程日记 2025/1/16 4:36:34

鞋帽箱包网站建设/推广优化网站排名教程

下载和安装 SDK 首先在 https://dev.windowsphone.com/en-us/downloadsdk 页面下载 WP7SKD。（如果地址无效，请到微软网站查找具体下载地址。） 你可以选择性的下载 7.1.1 版本的升级包，升级后可以选择项目的 Windows Phone 系统的版…...

编程日记 2025/1/16 4:26:27

厦门做网站多少/百度官方人工客服电话

一，利用DirectX诊断工具查看硬件配置DirectX诊断工具可以帮助我们对硬件工作情况作出测试、诊断并进行修改，当然我们也可以利用它来查看机器的硬件配置。运行“系统信息”窗口，找到 “工具--DirectX诊断工具”(或者进入安装盘符中Windows目录…...

编程日记 2025/1/16 1:35:25

目录

前言

效果演示

实现思路

背景设计

HTML代码

CSS代码

日历框设计

HTML代码

CSS代码

日历左侧日期设计

HTML代码

CSS代码

日历右侧瑞兔图片设计

HTML代码

CSS代码

完整源码

写在最后的话

相关文章：