使用CSS创建日历效果-优快云博客

本文链接：https://blog.youkuaiyun.com/tianjun2012/article/details/49967507

本文介绍了如何利用CSS技术制作出精美的日历效果。通过提供的样式代码，读者可以了解到CSS在布局和美化日历方面的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看看最后的效果
这里写图片描述
css 的样式代码如下所示

<html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
        <style type="text/css">
            table.ca1 {
                border-collapse: separate;
                border-spacing: 0;
                text-align: center;
                color: #333;
            }
            .ca1 th, .ca1 td {
                margin: 0;
                padding: 0;
            }

            .ca1 caption {
                font-size: 1.25em;
                padding-top: 0.629em;
                background-color: #d4dde6;
            }

            .ca1 caption[rel="prev"] {
                float: left;
                margin-left: 0.2em;
            }
            .ca1 caption[rel="next"] {
                float: right;
                margin-right: 0.2em;
            }
            .cal caption a:link, .cal caption a:visited {
                text-decoration: none;
                color: #333;
                padding: 0 0.2em;
            }
            .cal caption a:hover, 
            .cal caption a:active, 
            .cal caption a:focus {
                background-color: #6d8ab7;
            }

            .cal thead th{
                background-color: #D4DDE6;
                border-bottom: 1px solid #a9bacb;
                font-size: 0.875em;
            }

            .cal tbody{
                color: #a4a4a4;
                text-shadow: 1px 1px 1px white;
                background-color: #d0d9e2;
            }

            .cal tbody td{
                border-top: 1px solid #e0e0e1;
                border-right: 1px solid #9f9fa1;
                border-bottom: 1px solid #acacad;
                border-left: 1px solid #dfdfe0;
            }

            .cal tbody a{
                display: block;
                text-decoration: none;
                color: #333;
                background-color: #c0c8d2;
                font-weight: bold;
                padding: 0.385em 0.692em 0.308em 0.692em;
            }

            .cal tbody a:hover,
            .cal tbody a:focus,
            .cal tbody a:active,
            .cal tbody .selected a:link,
            .cal tbody .selected a:visited,
            .cal tbody .selected a:hover,
            .cal tbody .selected a:focus,
            .cal tbody .selected a:active{
                background-color: #6d8ab7;
                color: white;
                text-shadow: 1px 1px 2px #22456b;
            }
            .cal tbody td:hover,
            .cal tbody td.selected{
                border-top: 1px solid #2a3647;
                border-right: 1px solid #465977;
                border-bottom: 1px solid #576e92;
                border-left: 1px solid #466080;
            }
        </style>

    </head>
    <body>

        <table class="cal" summary="A calendar style date picker">
            <caption>
                <a href="#" rel="prev">&lt;</a>一月 2016<a href="#" rel="next">&gt;</a>
            </caption>
            <colgroup>
                <col id="sun" />
                <col id="Mon" />
                <col id="Tue" />
                <col id="Wed" />
                <col id="Tur" />
                <col id="Fri" />
                <col id="Sat" />
            </colgroup>

            <thead>
                <tr>
                    <th scope="col">Sun</th>
                    <th scope="col">Mon</th>
                    <th scope="col">Tue</th>
                    <th scope="col">Wed</th>
                    <th scope="col">Tur</th>
                    <th scope="col">Fri</th>
                    <th scope="col">Sat</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td class="null">30</td>
                    <td class="null">31</td>
                    <td><a href="#">1</a></td>
                    <td><a href="#">2</a></td>
                    <td><a href="#">3</a></td>
                    <td><a href="#">4</a></td>
                    <td><a href="#">5</a></td>
                </tr>
                <tr>
                    <td><a href="#">6</a></td>
                    <td><a href="#">7</a></td>
                    <td><a href="#">8</a></td>
                    <td><a href="#">9</a></td>
                    <td><a href="#">10</a></td>
                    <td><a href="#">11</a></td>
                    <td><a href="#">12</a></td>
                </tr>
                <tr>
                    <td><a href="#">13</a></td>
                    <td><a href="#">14</a></td>
                    <td><a href="#">15</a></td>
                    <td><a href="#">16</a></td>
                    <td><a href="#">17</a></td>
                    <td><a href="#">18</a></td>
                    <td><a href="#">19</a></td>
                </tr>
                <tr>
                    <td><a href="#">20</a></td>
                    <td><a href="#">21</a></td>
                    <td><a href="#">22</a></td>
                    <td><a href="#">23</a></td>
                    <td><a href="#">24</a></td>
                    <td><a href="#">25</a></td>
                    <td><a href="#">26</a></td>
                </tr>
                <tr>
                    <td><a href="#">27</a></td>
                    <td><a href="#">28</a></td>
                    <td><a href="#">29</a></td>
                    <td><a href="#">30</a></td>
                    <td><a href="#">31</a></td>
                    <td><a href="#">1</a></td>
                    <td><a href="#">2</a></td>
                </tr>

            </tbody>

        </table>

    </body>
</html>

CSS 表格制作日历