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

🌟 前言

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

  • 🤖 洛可可白：个人主页

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

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

  • 🐱 代码获取：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收藏

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【09】进阶JavaScript事件循环Promise

【09】进阶JavaScript事件循环Promise

一、事件循环 浏览器的进程模型 何为进程？ 程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程 每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。 何为线程？ 有了进程后，就可以运行程序的代码了。 运行代码的「人」称之…
阅读更多...
Makefile的基本知识

Makefile的基本知识

文章目录 一、使用Makefile 的引入1.GCC的编译流程2.Makefile的引入 二、Makefile的语法规则三、Makefile中的变量1.全局变量2.赋值符“”&#xff0c;“&#xff1a;”&#xff0c;“&#xff1f;”区别 四、Makefile中的自动化变量四、Makefile中伪目标五、Makefile中条件判断…
阅读更多...
安防监控视频汇聚平台EasyCVR接入海康Ehome设备，设备在线但视频无法播放是什么原因？

安防监控视频汇聚平台EasyCVR接入海康Ehome设备，设备在线但视频无法播放是什么原因？

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…
阅读更多...
Elastic 线下 Meetup 将于 2024 年 3 月 30 号在武汉举办

Elastic 线下 Meetup 将于 2024 年 3 月 30 号在武汉举办

2024 Elastic Meetup 武汉站活动&#xff0c;由 Elastic、腾讯、新智锦绣联合举办&#xff0c;现诚邀广大技术爱好者及开发者参加。 活动时间 2024年3月30日 13:30-18:00 活动地点 中国武汉 武汉市江夏区腾讯大道1号腾讯武汉研发中心一楼多功能厅 13:30-14:00 入场 活动流程…
阅读更多...
微信小程序获取手机号（Java后端）

微信小程序获取手机号（Java后端）

最近在做小程序后端的时候&#xff0c;需要拿到手机号进行角色校验&#xff0c;小白也是第一次获取小程序的手机号&#xff0c;所以功能完毕后总结一下本次操作咯。 根据微信小程序官方文档&#xff1a;获取手机号 | 微信开放文档 调用的接口是getPhoneNumber 请求参数 从伤处…
阅读更多...
C语言数据结构-二叉树基础练习

C语言数据结构-二叉树基础练习

繁霜尽是心头血 洒向千峰秋叶丹 目录 二叉树最大的深度 思路 代码展示 单值二叉树 思路 代码展示 相同的树 思路 代码展示 对称二叉树 思路 代码展示 另一颗树的子树 思路 代码展示 二叉树最大的深度 题目链接&#xff1a;二叉树最大的深度 给定一个二叉树 root &#xff0…
阅读更多...
osgEarth学习笔记3-第二个Osg QT程序

osgEarth学习笔记3-第二个Osg QT程序

原文链接 打开QT Creator&#xff0c;新建一个窗口项目。 QT版本如下&#xff1a; 修改pro文件 QT core gui greaterThan(QT_MAJOR_VERSION, 4): QT widgets CONFIG c11 DEFINES QT_DEPRECATED_WARNINGS SOURCES \main.cpp \mainwindow.cpp HEADERS \mainwindow…
阅读更多...
释放创造力，Nik Collection 6 by DxO 点亮你的视觉世界

释放创造力，Nik Collection 6 by DxO 点亮你的视觉世界

在数字摄影时代&#xff0c;后期处理是提升摄影作品品质的重要环节。而Nik Collection 6 by DxO作为一套优秀的滤镜插件套装&#xff0c;不仅为摄影师提供了丰富的后期处理工具&#xff0c;更让他们能够释放无限的创造力&#xff0c;打造出惊艳的视觉作品。 Nik Collection 6 …
阅读更多...
Unity定时播放音乐

Unity定时播放音乐

一、需求 需要定时在早上8:50&#xff0c;中午12:00&#xff0c;下午13:10定时播放音乐 二、实现步骤 依次在unity创建背景图、主文字提示、时间文字提示、音量控制器及音量文字提示、退出按钮、播放按钮&#xff0c;暂停按钮 在Canvas下创建一个Script脚本&#xff1a;获取…
阅读更多...
路由器里如何设置端口映射？

路由器里如何设置端口映射？

在互联网时代&#xff0c;我们经常需要将内部网络的服务暴露到公网以便其他人访问。直接将内部网络暴露在公网上存在一定的安全风险。为了解决这个问题&#xff0c;我们可以利用路由器里设置端口映射来实现将特定端口的访问请求转发到内部网络的特定设备上。 端口映射的原理 端…
阅读更多...
SolidWorks教育版：为何它成为工程教育的优选？

SolidWorks教育版：为何它成为工程教育的优选？

你是否曾经想过&#xff0c;为什么SolidWorks教育版在工程教育中如此受欢迎&#xff1f;作为专业的数码科技博主&#xff0c;今天就来给大家揭秘。首先&#xff0c;我们要明白SolidWorks是一款功能强大的三维CAD软件&#xff0c;广泛应用于机械、汽车、航空等领域。而教育版则是…
阅读更多...
从零开始搭建游戏服务器 第四节 MongoDB引入并实现注册登录

从零开始搭建游戏服务器 第四节 MongoDB引入并实现注册登录

这里写目录标题 前言正文添加依赖安装MongoDB添加MongoDB相关配置创建MongoContext类尝试初始化DB连接实现注册功能测试注册功能实现登录逻辑测试登录流程 结语下节预告 前言 游戏服务器中, 很重要的一点就是如何保存玩家的游戏数据. 当一个服务端架构趋于稳定且功能全面, 开发…
阅读更多...
Redis部署方式（三）主从模式

Redis部署方式（三）主从模式

在前面单机版的基础上&#xff0c;41为主&#xff0c;30为从。 一、主从搭建 1、主Redis安装 41机器redis主要配置 requirepass redis#!_41 bind 0.0.0.0 port 6379 daemonize yes 2、从redis安装 30机器redis主要配置 requirepass redis#!_30 bind 0.0.0.0 port 6380 da…
阅读更多...
【SpringBoot3.x教程04】SpringBoot如何自定义starter

【SpringBoot3.x教程04】SpringBoot如何自定义starter

前言&#xff1a;什么是Starter POMs Starter POMs是预配置的依赖集合&#xff0c;旨在提供一种快速的方式来引入和管理Spring及相关技术栈的依赖。每个Starter POM都是针对特定的Spring模块或技术场景设计的。使用Starter POM&#xff0c;开发者只需要添加一个依赖项&#xff…
阅读更多...
67、自定义通信帧协议解析

67、自定义通信帧协议解析

帧格式&#xff1a;方便自定义长度多种帧标识传输 格式规定 帧标识A 类型 备注 A<0x0F 短帧 数据长度1字节 A>0x0F 长帧 数据长度2字节 短帧:帧标识 帧标识取反 帧用户数据字节数 用户数据…用户数据 长帧:帧标识 帧标识取反 帧用户数据字节数(高8位) 帧用户数据字节数…
阅读更多...
卸载应用无残留，App Cleaner Uninstaller Pro助你轻松管理Mac

卸载应用无残留，App Cleaner Uninstaller Pro助你轻松管理Mac

App Cleaner & Uninstaller Pro是一款专为Mac用户设计的强大应用程序清理和卸载工具。这款软件拥有出色的卸载功能&#xff0c;能够彻底删除不再需要的应用程序及其相关文件和数据&#xff0c;确保Mac磁盘空间得到高效释放。同时&#xff0c;其强大的搜索功能可以快速找到与…
阅读更多...
机器视觉系统选型-镜头参数

机器视觉系统选型-镜头参数

镜头参数&#xff1a; 光圈&#xff1a;光圈是一个用来控制镜头通光量的装置 &#xff0c;表示光圈大小我们是用光圈值&#xff08;F值&#xff09; &#xff0c;如F1.4&#xff0c;F2&#xff0c;F2.8 焦距&#xff08;Focus&#xff09;&#xff1a;透镜中心到其焦点的距离 景…
阅读更多...
蓝桥杯刷题（十二）

蓝桥杯刷题（十二）

1.答疑 代码 n int(input()) L [] for i in range(n):a,b,c map(int,input().split())A ab # 进入和答疑时间B abc # 个人总用时L.append([A,B]) L.sort(keylambda x:x[1]) # 个人总用时短的优先 ans tmp 0 # ans为发消息时刻&#xff0c;tmp为前一个人的总用时 for i …
阅读更多...
C++ —— 类和对象（终）

C++ —— 类和对象（终）

目录 1. 日期类的实现 1.1 前置 和 后置 重载 1.2 >> 和 << 的重载 2. const 成员 3. 取地址及const取地址操作符重载 4. 再谈构造函数 4.1 构造函数体赋值 4.2 初始化列表 4.3 隐式类型转换 4.4 explict 关键字 5. static 成员 5.1 概念 5.2 特性 …
阅读更多...
最新梨花带雨网页音乐播放器二开优化修复美化版全开源版本源码下载

最新梨花带雨网页音乐播放器二开优化修复美化版全开源版本源码下载

最新梨花带雨网页音乐播放器二开优化修复美化版全开源版本源码下载 梨花带雨播放器基于thinkphp6开发的XPlayerHTML5网页播放器前台控制面板,支持多音乐平台音乐解析。二开内容：修复播放器接口问题，把接口本地化，但是集成外链播放器接口就不本地化了，我花钱找人写的理解下…
阅读更多...
最新文章

Copyright @ 2022~2023