🌟 前言
欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍
🤖 洛可可白：个人主页
🔥 个人专栏：✅前端技术 ✅后端技术
🏠 个人博客：洛可可白博客
🐱 代码获取：bestwishes0203
📷 封面壁纸：洛可可白wallpaper
文章目录
- 打造精美响应式CSS日历：从基础到高级样式
- 1. 创建日历的基本结构
- 2. 添加CSS样式
- 3. 响应式设计
- 4. 完善日历功能
- 5. 全部代码
- 🎉 结语
- 🎉 往期精彩回顾
打造精美响应式CSS日历：从基础到高级样式
在这篇文章中，我们将学习如何使用HTML和CSS创建一个简洁而美观的日历样式。我们将从基础的日历结构开始，逐步添加样式，并使用CSS的媒体查询为不同屏幕尺寸进行适配。通过本教程，您将掌握如何制作一个响应式的日历，它不仅能够在桌面上展示，也能很好地适应移动设备。
效果预览：
1. 创建日历的基本结构
首先，我们需要创建日历的HTML结构。日历由三个主要部分组成：月份和年份的标题、星期的简称、以及日期列表。
<div class="month"> <ul> <li class="prev">❮</li> <li class="next">❯</li> <li style="text-align:center"> August<br> <span style="font-size:18px">2016</span> </li> </ul> </div> <ul class="weekdays"> <li>Mo</li> <li>Tu</li> <li>We</li> <li>Th</li> <li>Fr</li> <li>Sa</li> <li>Su</li> </ul> <ul class="days"> <!-- 日期列表 --> </ul>
2. 添加CSS样式
接下来，我们将使用CSS为日历添加样式。我们将设置基本的样式，如字体、背景色、文本对齐等，并使用伪类和伪元素来添加箭头图标。
/* 基础样式 */ * { box-sizing: border-box; } ul { list-style-type: none; margin: 0; padding: 0; } body { font-family: Verdana, sans-serif; } /* 月份和年份样式 */ .month { padding: 70px 25px; width: 100%; background: #1abc9c; } .month ul li { color: white; font-size: 20px; text-transform: uppercase; letter-spacing: 3px; } /* 星期样式 */ .weekdays { background-color: #ddd; } .weekdays li { display: inline-block; width: 13.6%; color: #666; text-align: center; } /* 日期样式 */ .days { background: #eee; } .days li { display: inline-block; width: 13.6%; text-align: center; margin-bottom: 5px; font-size: 12px; color: #777; } /* 当前日期样式 */ .days li .active { padding: 5px; background: #1abc9c; color: white !important; }
3. 响应式设计
为了使日历在不同设备上都能良好展示，我们将使用CSS的媒体查询来调整小屏幕设备上的布局。
@media screen and (max-width: 720px) { .weekdays li, .days li { width: 13.1%; } } @media screen and (max-width: 420px) { .weekdays li, .days li { width: 12.5%; } .days li .active { padding: 2px; } } @media screen and (max-width: 290px) { .weekdays li, .days li { width: 12.2%; } }
4. 完善日历功能
document.addEventListener('DOMContentLoaded', function () { var days = document.querySelectorAll('.days li span'); days.forEach(function (day) { day.addEventListener('click', function () { console.log('Date clicked'); // 移除其他日期的激活状态 days.forEach(function (el) { el.classList.remove('active'); }); // 为被点击的日期添加激活状态 this.classList.add('active'); }); }); }); // 1. contextmenu 可以禁用右键菜单 document.addEventListener('contextmenu', function (e) { e.preventDefault(); }) // 2. 禁止选中文字 selectstart document.addEventListener('selectstart', function (e) { e.preventDefault(); })
为了使日历更加实用，我们可以添加一些交互功能，例如点击月份和年份切换视图，以及点击日期弹出事件详情。这将需要使用JavaScript来实现，但在本教程中，我们专注于使用CSS创建样式。
5. 全部代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 日历样式</title> <style> * { box-sizing: border-box; } ul { list-style-type: none; } body { font-family: Verdana, sans-serif; } .month { padding: 70px 25px; width: 100%; background: #1abc9c; } .month ul { margin: 0; padding: 0; } .month ul li { color: white; font-size: 20px; text-transform: uppercase; letter-spacing: 3px; } .month .prev { float: left; padding-top: 10px; } .month .next { float: right; padding-top: 10px; } .weekdays { margin: 0; padding: 10px 0; background-color: #ddd; } .weekdays li { display: inline-block; width: 13.6%; color: #666; text-align: center; } .days { padding: 10px 0; background: #eee; margin: 0; } .days li { list-style-type: none; display: inline-block; width: 13.6%; text-align: center; margin-bottom: 5px; font-size: 12px; color: #777; } .days li .active { padding: 5px; background: #1abc9c; color: white !important } /* Add media queries for smaller screens */ @media screen and (max-width:720px) { .weekdays li, .days li { width: 13.1%; } } @media screen and (max-width: 420px) { .weekdays li, .days li { width: 12.5%; } .days li .active { padding: 2px; } } @media screen and (max-width: 290px) { .weekdays li, .days li { width: 12.2%; } } </style> </head> <body> <h1 style="text-align: center;">CSS 日历</h1> <div class="month"> <ul> <li class="prev">❮</li> <li class="next">❯</li> <li style="text-align:center"> March<br> <span style="font-size:18px">2024</span> </li> </ul> </div> <ul class="weekdays"> <li>Mo</li> <li>Tu</li> <li>We</li> <li>Th</li> <li>Fr</li> <li>Sa</li> <li>Su</li> </ul> <ul class="days"> <li><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> <li><span>4</span></li> <li><span>5</span></li> <li><span>6</span></li> <li><span>7</span></li> <li><span>8</span></li> <li><span>9</span></li> <li><span class="active">10</span></li> <li><span>11</span></li> <li><span>12</span></li> <li><span>13</span></li> <li><span>14</span></li> <li><span>15</span></li> <li><span>16</span></li> <li><span>17</span></li> <li><span>18</span></li> <li><span>19</span></li> <li><span>20</span></li> <li><span>21</span></li> <li><span>22</span></li> <li><span>23</span></li> <li><span>24</span></li> <li><span>25</span></li> <li><span>26</span></li> <li><span>27</span></li> <li><span>28</span></li> <li><span>29</span></li> <li><span>30</span></li> <li><span>31</span></li> </ul> <script> document.addEventListener('DOMContentLoaded', function () { var days = document.querySelectorAll('.days li span'); days.forEach(function (day) { day.addEventListener('click', function () { console.log('Date clicked'); // 只有当日期未被激活时才进行操作 // 移除其他日期的激活状态 days.forEach(function (el) { el.classList.remove('active'); }); // 为被点击的日期添加激活状态 this.classList.add('active'); }); }); }); // 1. contextmenu 可以禁用右键菜单 document.addEventListener('contextmenu', function (e) { e.preventDefault(); }) // 2. 禁止选中文字 selectstart document.addEventListener('selectstart', function (e) { e.preventDefault(); }) </script> </body> </html>
🎉 结语
通过本教程，您已经学会了如何使用HTML和CSS、JavaScript创建一个基本的日历样式，并使其响应式地适应不同屏幕尺寸。您可以在此基础上添加更多的功能和样式，以满足您的具体需求。记得在实际项目中测试日历在不同浏览器和设备上的兼容性，确保所有用户都能获得良好的体验。
如果对你有帮助，点赞、收藏、关注是我更新的动力！👋🌟🚀
🎉 往期精彩回顾
Ubuntu系统下C语言开发环境搭建与使用教程
- 748阅读 · 14点赞 · 6收藏
Vue 3响应式系统详解：ref、toRefs、reactive及更多
- 524阅读 · 16点赞 · 12收藏
爆肝两千字！掌握CSS选择器与响应式设计：从基础到高级应用
- 842阅读 · 27点赞 · 28收藏
图文并茂！在Oracle VM VirtualBox上安装Ubuntu虚拟机的详细步骤指南
- 1059阅读 · 36点赞 · 29收藏
在Vue中使用wangeditor创建富文本编辑器的完整指南
- 1106阅读 · 20点赞 · 13收藏
Vue项目中使用ECharts构建交互式中国地图的详细指南
- 759阅读 · 22点赞 · 10收藏
米哈游一面前端开发岗面试题，你会做几道?
- 1236阅读 · 22点赞 · 24收藏
程序员必备开发工具、程序员必备集成开发环境（IDE）
- 912阅读 · 36点赞 · 12收藏
Linux常用操作命令和服务器硬件基础知识
- 887阅读 · 30点赞 · 10收藏
C语言中大小写字母如何转化
- 824阅读 · 31点赞 · 29收藏
主流开发语言和开发环境、程序员如何选择职业赛道？
- 1022阅读 · 34点赞 · 16收藏
