打造精美响应式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收藏