单位网站建设的必要性,网站支付端口,wordpress 手机 登陆,企业网站制作怎么做#x1f482;作者简介#xff1a; THUNDER王#xff0c;一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读#xff0c;同时任汉硕云#xff08;广东#xff09;科技有限公司ABAP开发顾问。在学习工作中#xff0c;我通常使用偏后… 作者简介 THUNDER王一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读同时任汉硕云广东科技有限公司ABAP开发顾问。在学习工作中我通常使用偏后端的开发语言ABAPSQL进行任务的完成对SAP企业管理系统SAP ABAP开发和数据库具有较深入的研究。 文章概要 各位小伙伴们大家好呀今天给大家带来的是一款可爱兔兔的纯CSS日历希望大家喜欢让我们一起用日历记录下今天的日子 每日一言 永远年轻永远热泪盈眶 目录前言效果演示实现思路 背景设计 HTML代码 CSS代码 日历框设计 HTML代码 CSS代码 日历左侧日期设计 HTML代码 CSS代码 日历右侧瑞兔图片设计 HTML代码 CSS代码完整源码写在最后的话前言 各位小伙伴们大家好呀今天给大家带来的是一款可爱兔兔的纯CSS日历希望大家喜欢让我们一起用日历记录下今天的日子 效果演示 下面为大家展示的是瑞兔日历的预览图 实现思路 看完效果图后各位小伙伴们肯定很想知道实现的思路接下来我将分步骤逐一进行讲解如果想要获取源码的小伙伴可以跳过该部分直接前往最后的完整源码章节在分步讲解中我会将HTMLCSS两个部分全部放在同一个文件中方便各位小伙伴们获取! 我将实现思路分成了如下四个部分列举如下 背景设计 日历框设计 日历左侧日期设计 日历右侧瑞兔图片设计 背景设计 通过使用HTML和CSS可以完成整个日历背景的设置背景颜色采取了橘橙色的设计具有一种高级感和亲切感 HTML代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle/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 classcalendar
/divCSS代码 将下面代码复制粘贴至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 classcalendar/div之间 div classdateh3January/h3div classdaysdiv classdayS/divdiv classdayM/divdiv classdayT/divdiv classdayW/divdiv classdayT/divdiv classdayF/divdiv classdayS/divdiv classnumber/divdiv classnumber/divdiv classnumber/divdiv classnumber/divdiv classnumber/divdiv classnumber/divdiv classnumber1/divdiv classnumber2/divdiv classnumber3/divdiv classnumber4/divdiv classnumber5/divdiv classnumber6/divdiv classnumber7/divdiv classnumber8/divdiv classnumber9/divdiv classnumber10/divdiv classnumber11/divdiv classnumber12/divdiv classnumber13/divdiv classnumber14/divdiv classnumber15/divdiv classnumber16/divdiv classnumber17/divdiv classnumber18/divdiv classnumber19/divdiv classnumber20/divdiv classnumber21/divdiv classnumber22/divdiv classnumber23/divdiv classnumber24/divdiv classnumber active25/divdiv classnumber26/divdiv classnumber27/divdiv classnumber28/divdiv classnumber29/divdiv classnumber30/divdiv classnumber31/div/div/divCSS代码 将下面代码复制粘贴至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(7n1){ /*7个为一组每组第一个*/color: #f44336;font-weight: 600;
} 日历右侧瑞兔图片设计 HTML代码 将下面代码复制粘贴至最后一个/div之上 div classimgimg srchttps://wyz-math.cn/usr/uploads/2023/01/3088778204.jpg altError /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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylebody{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(7n1){ /*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
bodydiv classcalendardiv classdateh3January/h3div classdaysdiv classdayS/divdiv classdayM/divdiv classdayT/divdiv classdayW/divdiv classdayT/divdiv classdayF/divdiv classdayS/divdiv classnumber/divdiv classnumber/divdiv classnumber/divdiv classnumber/divdiv classnumber/divdiv classnumber/divdiv classnumber1/divdiv classnumber2/divdiv classnumber3/divdiv classnumber4/divdiv classnumber5/divdiv classnumber6/divdiv classnumber7/divdiv classnumber8/divdiv classnumber9/divdiv classnumber10/divdiv classnumber11/divdiv classnumber12/divdiv classnumber13/divdiv classnumber14/divdiv classnumber15/divdiv classnumber16/divdiv classnumber17/divdiv classnumber18/divdiv classnumber19/divdiv classnumber20/divdiv classnumber21/divdiv classnumber22/divdiv classnumber23/divdiv classnumber24/divdiv classnumber active25/divdiv classnumber26/divdiv classnumber27/divdiv classnumber28/divdiv classnumber29/divdiv classnumber30/divdiv classnumber31/div/div/divdiv classimgimg srchttps://wyz-math.cn/usr/uploads/2023/01/3088778204.jpg altError /div/div
/body
/html 写在最后的话 本文花费大量时间介绍了如何创建一个精美的瑞兔日历希望能帮助到各位小伙伴码文不易还望各位大佬们多多支持哦你们的支持是我最大的动力 ✨原创不易还希望各位大佬支持一下\textcolor{blue}{原创不易还希望各位大佬支持一下}原创不易还希望各位大佬支持一下 点赞你的认可是我创作的动力\textcolor{9c81c1}{点赞你的认可是我创作的动力}点赞你的认可是我创作的动力 ⭐️ 收藏你的青睐是我努力的方向\textcolor{ed7976}{收藏你的青睐是我努力的方向}收藏你的青睐是我努力的方向 ✏️ 评论你的意见是我进步的财富\textcolor{98c091}{评论你的意见是我进步的财富}评论你的意见是我进步的财富
