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

news2024/12/24 2:10:28

image.png

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

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

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

目录

  • 前言
  • 效果演示
  • 实现思路
    •   背景设计
      •    HTML代码
      •    CSS代码
    •   日历框设计
      •    HTML代码
      •    CSS代码
    •   日历左侧日期设计
      •    HTML代码
      •    CSS代码
    •   日历右侧瑞兔图片设计
      •    HTML代码
      •    CSS代码
  • 完整源码
  • 写在最后的话

前言

在这里插入图片描述

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

效果演示

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

image.png

实现思路

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

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

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

  背景设计

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

image.png

   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对象选择器

image.png

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

  日历左侧日期设计

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

image.png

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

  日历右侧瑞兔图片设计

image.png

   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}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/372063.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Hive中数据库和表的操作(HSQL)

Hive中数据库和表的操作(HSQL)

数仓管理工具Hive可以将HDFS文件中的结构化数据映射成表&#xff0c; 利用HSQL对表进行分析&#xff0c;HSQL的底层运行机制&#xff0c;默认是MapReduce计算&#xff0c;也可以替换成Spark、Tez、Flink 计算结果存储在HDFS&#xff0c;像Hive中的库、表、字段、表所属库、表的…
阅读更多...
Zebec社区上线ZIP-2（地平线升级行动）提案

Zebec社区上线ZIP-2（地平线升级行动）提案

此前&#xff0c;Zebec社区在上线了投票治理系统Zebec Node后&#xff0c;曾上线了首个提案ZIP-1&#xff0c;对Nautilus Chain的推出进行了投票&#xff0c;作为Zebec Chain上线前的“先行链”&#xff0c;该链得到了社区用户的欢迎&#xff0c;投通过票的比例高达98.3%。而Na…
阅读更多...
[Java代码审计]—命令执行失效问题

[Java代码审计]—命令执行失效问题

前言 关于Java的命令执行其实一直都没有单独学习过&#xff0c;正好昨天师傅问了一个问题&#xff1a;命令执行时字符串和字符串数组用哪个更好一些。当时被问得有点懵难道不都一样么&#xff1f;其实不然&#xff0c;借此重新了解下RCE以及失效问题。 单例模式 常规命令执行…
阅读更多...
基于STM32 电机库（5.4.4）的单电阻采样调试总结

基于STM32 电机库（5.4.4）的单电阻采样调试总结

目录 硬件调整 软件调整 下载运行 参数优化 总结 硬件调整 实验用的开发板和电机如下&#xff0c;在调单一电阻之前已经在三电阻的环境下把启动运行的参数已经调好了&#xff0c;这里不多说。调好后需要把硬件改成单电阻采样。 如下原理图&#xff1a; 只需要把R75,76两…
阅读更多...
每个人都应该知道的5个NLP代码库

每个人都应该知道的5个NLP代码库

在本文中&#xff0c;将详细介绍目前常用的Python NLP库。内容译自网络。这些软件包可处理多种NLP任务&#xff0c;例如词性&#xff08;POS&#xff09;标注&#xff0c;依存分析&#xff0c;文档分类&#xff0c;主题建模等等。NLP库的基本目标是简化文本预处理。目前有许多工…
阅读更多...
【6】linux命令每日分享——rm删除目录和文件

【6】linux命令每日分享——rm删除目录和文件

大家好&#xff0c;这里是sdust-vrlab&#xff0c;Linux是一种免费使用和自由传播的类UNIX操作系统&#xff0c;Linux的基本思想有两点&#xff1a;一切都是文件&#xff1b;每个文件都有确定的用途&#xff1b;linux涉及到IT行业的方方面面&#xff0c;在我们日常的学习中&…
阅读更多...
loki 日志管理的安装部署使用

loki 日志管理的安装部署使用

loki介绍 Loki是 Grafana Labs 团队最新的开源项目&#xff0c;是一个水平可扩展&#xff0c;高可用性&#xff0c;多租户的日志聚合系统。它的设计非常经济高效且易于操作&#xff0c;因为它不会为日志内容编制索引&#xff0c;而是为每个日志流编制一组标签。 不对日志进行…
阅读更多...
python学习之手把手教你将图片变成黑白或彩色字符画（骚操作）

python学习之手把手教你将图片变成黑白或彩色字符画（骚操作）

文章目录前言一、字符画的实现原理二、黑白字符画实现代码三、彩色字符画生成代码实现&#xff1a;总结前言 字符画这个话题&#xff0c;似乎早在贴吧时代就已经被玩烂了。在百度图片随便一搜索&#xff0c;就能够看到非常多。然后在这个时代&#xff0c;会编程的人越来越多&a…
阅读更多...
Transformer输出张量的值全部相同？！

Transformer输出张量的值全部相同？！

【bug】Transformer输出张量的值全部相同&#xff1f;&#xff01;现象原因解决现象 输入经过TransformerEncoderLayer之后&#xff0c;基本所有输出都相同了。 核心代码如下&#xff0c; from torch.nn import TransformerEncoderLayer self.trans TransformerEncoderLayer…
阅读更多...
日记本-课后程序(JAVA基础案例教程-黑马程序员编著-第七章-课后作业)

日记本-课后程序(JAVA基础案例教程-黑马程序员编著-第七章-课后作业)

【实验7-3】 日记本 【任务介绍】 1.任务描述 编写一个日记本功能的程序&#xff0c;使用字节流经日记的具体信息记录在本地的txt文件中。当用户输入日记的特定内容后&#xff0c;会将输入的内容保存至本地的txt文件中。需要输入的内容包括“姓名”&#xff0c;“天气”、“…
阅读更多...
OpenFeign详解

OpenFeign详解

OpenFeign是什么&#xff1f; OpenFeign&#xff1a; OpenFeign是Spring Cloud 在Feign的基础上支持了SpringMVC的注解&#xff0c;如RequesMapping等等。OpenFeign的FeignClient可以解析SpringMVC的RequestMapping注解下的接口&#xff0c;并通过动态代理的方式产生实现类&am…
阅读更多...
基于YOLOv5的细胞检测实战

基于YOLOv5的细胞检测实战

数据及代码链接见文末 1.任务与数据集介绍 如下图所示，我们有一个医学细胞数据集，需要从数据集中检测出三种不同的细胞。标签中已经标注了细胞的类别和位置。 我们也可以看到，三种细胞有着不同的形态和颜色，同时数据集的标签也存在没有标注到的细胞 2.数据与标签配置方…
阅读更多...
【打卡-Coggle竞赛学习2023年2月】图节点嵌入

【打卡-Coggle竞赛学习2023年2月】图节点嵌入

文章目录## Part4 图节点嵌入### 背景介绍### 环境配置### 学习打卡- 任务1&#xff1a;图属性与图构造- 任务2&#xff1a;图查询与遍历- 任务3&#xff1a;节点中心性与应用- 任务4&#xff1a;图节点嵌入算法&#xff1a;- 任务5&#xff1a;图节点嵌入算法&#xff1a;- 任…
阅读更多...
PowerAutomation获取邮件附件并删除这个邮件方法

PowerAutomation获取邮件附件并删除这个邮件方法

这个文章是怎么来的呢&#xff1f;现在不是低代码开发平台启蒙阶段嘛&#xff1f;笔者也有幸在工作中进行了尝试&#xff0c;目前也已经在实际工作中结合Python进行了使用&#xff0c;当然&#xff0c;是可以提高IT的工作效率的。需求是这样的&#xff0c;想从公司的EBS平台报表…
阅读更多...
3.5 实战：Spring Boot 实现系统多环境配置

3.5 实战：Spring Boot 实现系统多环境配置

第3章 Spring Boot 的系统配置 3.1 Spring Boot 系统配置文件 3.2 Spring Boot 自定义配置项 3.3 Spring Boot 其他配置 3.4 Spring Boot 日志配置 3.5 实战&#xff1a;Spring Boot 实现系统多环境配置 3.5 实战&#xff1a;Spring Boot 实现系统多环境配置 在实际项目开发的…
阅读更多...
python的所有知识点（含讲解），不看就亏死了

python的所有知识点（含讲解），不看就亏死了

目录 简介 特点 搭建开发环境 版本 hello world 注释 文件类型 变量 常量 数据类型 运算符和表达式 控制语句 数组相关 函数相关 字符串相关 文件处理 对象和类&#xff0c;注&#xff1a;不是那个对象&#xff01;&#xff01;&#xff01;&#xff01;&…
阅读更多...
2023年安徽省职业院校技能大赛“网络空间安全” 比赛任务书

2023年安徽省职业院校技能大赛“网络空间安全” 比赛任务书

2023年安徽省职业院校技能大赛“网络空间安全” 比赛任务书 一、竞赛时间 总计：360分钟 二、竞赛阶段 竞赛阶段 任务阶段 竞赛任务 竞赛时间 分值 A模块 A-1 登录安全加固 180分钟 200分 A-2 Nginx安全策略 A-3 日志监控 A-4 中间件服务加固 A-5 本地安全策略 A-6 防火墙策…
阅读更多...
基本程序设计技术

基本程序设计技术

一.统计&#xff08;计数&#xff09;问题&#xff1a;方法&#xff1a;计数变量c的初值为0&#xff0c;每输入一个数据&#xff0c;进行必要判断后&#xff0c;若输入的数据满足统计条件&#xff0c;则计数变量c自加1&#xff0c;这样当对所有输入进行判断后&#xff0c;计数变…
阅读更多...
多线程案例(一)【单例模式+阻塞队列】

多线程案例(一)【单例模式+阻塞队列】

一、单例模式 单例模式属于最容易被问到的一种设计模式。 啥是设计模式&#xff1f; 类似于棋谱&#xff0c;按摩模式写代码&#xff0c;可以更加规范。 单例模式的含义&#xff1a; 单例&#xff1a;单个实例对象 某个类有且只有一个对象。 这一点在很多场景上都需要. 比如…
阅读更多...
如何轻松录制 CS 游戏玩法？4 种免费录制 CS 游戏视频的方法

如何轻松录制 CS 游戏玩法？4 种免费录制 CS 游戏视频的方法

CS:GO&#xff0c;又名反恐精英&#xff1a;全球攻势&#xff0c;是一款多人第一人称射击游戏&#xff0c;由 Valve 和 Hidden Path Entertainment 于 2012 年设计推出。作为反恐精英系列的第四代&#xff0c;它广受欢迎与全球游戏玩家。随着近年来电子竞技的兴起&#xff0c;用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023