🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

• 🤖 洛可可白：个人主页

• 🔥 个人专栏：✅前端技术 ✅后端技术

• 🏠 个人博客：洛可可白博客

• 🐱 代码获取：bestwishes0203

• 📷 封面壁纸：洛可可白wallpaper

  

  文章目录

  • 打造精美响应式CSS日历：从基础到高级样式
  • • 1. 创建日历的基本结构
    • 2. 添加CSS样式
    • 3. 响应式设计
    • 4. 完善日历功能
    • 5. 全部代码
    • 🎉 结语
    • 🎉 往期精彩回顾

      打造精美响应式CSS日历：从基础到高级样式

      在这篇文章中，我们将学习如何使用HTML和CSS创建一个简洁而美观的日历样式。我们将从基础的日历结构开始，逐步添加样式，并使用CSS的媒体查询为不同屏幕尺寸进行适配。通过本教程，您将掌握如何制作一个响应式的日历，它不仅能够在桌面上展示，也能很好地适应移动设备。

      效果预览：

      

      1. 创建日历的基本结构

      首先，我们需要创建日历的HTML结构。日历由三个主要部分组成：月份和年份的标题、星期的简称、以及日期列表。

      
          
      ❮
              
      ❯
              
      
                  August
      2016
              
          
      

      • Mo
      • Tu
      • We
      • Th
      • Fr
      • Sa
      • Su

      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. 全部代码

      
      
          
          
          
          CSS 日历样式
          
              * {
                  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%;
                  }
              }
          
      
      
          
      CSS 日历
          
      
              
      ❮
                  
      ❯
                  
      
                      March
      2024
                  
              
          

      • Mo
      • Tu
      • We
      • Th
      • Fr
      • Sa
      • Su
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      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(); })

      🎉 结语

      通过本教程，您已经学会了如何使用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收藏