「兔了个兔」玉兔踏青,纯CSS实现瑞兔日历(附源码)

这篇具有很好参考价值的文章主要介绍了「兔了个兔」玉兔踏青,纯CSS实现瑞兔日历(附源码)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

css 画兔子,「兔了个兔」,《前端风景线》,css,html,前端,瑞兔日历,兔了个兔

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


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


🤟每日一言: 永远年轻,永远热泪盈眶!


前言

css 画兔子,「兔了个兔」,《前端风景线》,css,html,前端,瑞兔日历,兔了个兔

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


效果演示

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

css 画兔子,「兔了个兔」,《前端风景线》,css,html,前端,瑞兔日历,兔了个兔


实现思路

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

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

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

  背景设计

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

css 画兔子,「兔了个兔」,《前端风景线》,css,html,前端,瑞兔日历,兔了个兔

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

css 画兔子,「兔了个兔」,《前端风景线》,css,html,前端,瑞兔日历,兔了个兔

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

  日历左侧日期设计

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

css 画兔子,「兔了个兔」,《前端风景线》,css,html,前端,瑞兔日历,兔了个兔

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


  日历右侧瑞兔图片设计

css 画兔子,「兔了个兔」,《前端风景线》,css,html,前端,瑞兔日历,兔了个兔

   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>


写在最后的话

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

css 画兔子,「兔了个兔」,《前端风景线》,css,html,前端,瑞兔日历,兔了个兔

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

👍 点 赞 , 你 的 认 可 是 我 创 作 的 动 力 ! \textcolor{9c81c1}{点赞,你的认可是我创作的动力!}

⭐️ 收 藏 , 你 的 青 睐 是 我 努 力 的 方 向 ! \textcolor{ed7976}{收藏,你的青睐是我努力的方向!}

✏️ 评 论 , 你 的 意 见 是 我 进 步 的 财 富 ! \textcolor{98c091}{评论,你的意见是我进步的财富!}
文章来源地址https://www.toymoban.com/news/detail-782519.html

到了这里,关于「兔了个兔」玉兔踏青,纯CSS实现瑞兔日历(附源码)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于React实现无限滚动的日历详细教程,附源码【手写日历教程第二篇】

    最常见的日历大部分都是滚动去加载更多的月份,而不是让用户手动点击按钮切换日历月份。滚动加载的交互方式对于用户而言是更加丝滑和舒适的,没有明显的操作割裂感。 那么现在需要做一个这样的无限滚动的日历,前端开发者应该如何去思考和代码实现呢?下面我会详

    2024年02月11日
    浏览(30)
  • Python:实现日历功能

            日常生活中,每天都要用到日历,日历成为我们生活中的必需品,那么如何制作日历呢,其实方法有很多,可以直接在excel中制作,也可以手画等等。         学习过编程的朋友,能否想到用Python编写一个日历呢??Python可谓是功能强大,只有你想不到,没有py

    2024年02月02日
    浏览(29)
  • js实现日历效果

    使用js实现日历效果,主要用到了元素的创建以及添加 对应的方法是 document.createElement() 和 document.appendChild() 主要实现思路: 用div布局把日历的页面框架搭建出来 依次遍历上月,本月,下月的天数 切换月份的时候首先清空所有日历元素,再将新的日期添加进去 剩下的就是一

    2024年02月10日
    浏览(25)
  • 微信小程序开发——日历实现

      1.new Date().toLocaleDateString(), //获取当前的时间(年月日) 2. new Date().getFullYear()  //获取年     new Date().getMonth() + 1, //获取月份     new Date().getDate(), //获取日期 3.this.getThisMonthDays(year, month)  //获取当月天数 4.this.getLastMonthDays(year, month)   //绘制上个月天数  this.ge

    2024年02月17日
    浏览(42)
  • 小程序自定义日历实现签到功能

    使用uniapp自带的uni-calendar可以实现简单的数据展示以及打卡 但是项目要求的日历日期由后端返回每个月的返回而不是整年的返回, 签到的方式也是点击按钮签到而不是点击日历表 这样uniapp的组件就不能实现我们的项目要求了 效果图:   实现方法如下: html css js

    2024年02月11日
    浏览(42)
  • 记录-Vue移动端日历设计与实现

    选择月份和选择年份与日期做了条件渲染,切换方式是点击顶部时间切换选项 日数据的显示一共42条数据,先获取当前月的总天数,将每个月的天数保存在一个数组里,然后根据传入的参数返回相应的天数, 因为有闰年的存在,2月会是29天,所以做了闰年的判断.然后获取每周的第一天

    2023年04月26日
    浏览(32)
  • 微信小程序签到页面的日历实现

    业务需求:签到页面用日历展示签到情况,只显示当月的。 过期未签的显示灰色字,已签的显示橙色字,当天显示白色字加一个背景图。  1、新建日历组件(取名:calendar)  2、calendar.wxml代码 3、calendar.wxss 4、calendar.js(组件只需要传入当前月签到的日期列表  2023-3-1格式,格

    2024年02月10日
    浏览(44)
  • 接了个变态需求:生成 Excel + PDF 导出,用 Java 怎么实现?

    Excel、PDF的导出、导入是我们工作中经常遇到的一个问题,刚好今天公司业务遇到了这个问题,顺便记个笔记以防下次遇到相同的问题而束手无策。 公司有这么两个需求: 需求一 、给了一个表单,让把查出来的数据组装到表单中并且提供以PDF格式的下载功能。 需求二、  将

    2024年02月20日
    浏览(42)
  • 微信小程序向系统日历添加事件(提醒)实现

    直接上代码 使用 wx.addPhoneCalendar 需要满足以下前置条件: 微信版本支持:wx.addPhoneCalendar 是微信小程序的 API,只有在微信版本号大于等于 6.6.6 的环境下才能使用。 用户授权:在用户手机的日历中添加日程需要获取用户授权,用户需要在小程序中点击授权按钮才能进行操作。

    2024年02月12日
    浏览(58)
  • 如何使用Webman框架实现日历和事件提醒功能?

    如何使用Webman框架实现日历和事件提醒功能? 引言: 在现代社会中,时间管理变得越来越重要。作为开发者,我们可以利用Webman框架来构建一个功能强大的日历应用程序,帮助人们更好地管理自己的时间。本文将介绍如何使用Webman框架实现日历和事件提醒功能,并附上代码

    2024年02月15日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包