CSS 表格制作日历

原创 2015年11月21日 20:36:41

看看最后的效果
这里写图片描述
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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

而立之年——三线城市程序员的年终告白

30岁(2017-1987),曾经对我来说曾是个多么遥远的数字,但它正悄然的离我越来越近。古人云,三十而立,而立的意思是自立于世,多指学有所成。 在《于丹的〈论语心得〉》里,“立”是内心的的立,是内在...

用table画出日历。

公司需要用到日历的形式展示信息。用VS自带的日历控件上不能显示。所以就自己用table话出一个日历的形式,显示日期和当天的信息。下面是我实现画日历的代码分享下。 哈哈。自己测试过没有问题。 首先准...

JS创建当前月份的日历table型

返回的是一个字符串,并不是原生可以直接使用的。最重要的是setDate负值的使用,很有意思。然后判断了一下,输出的日期是否在当月范围内。其实用getMonth的方式也是可以的。var createCa...

Elasticsearch索引的父子关系(index parent-child)

Elasticsearch允许给文档建立父子关系,这篇博客介绍文档的父子关系是如何映射的、如何索引父子文档、如何通过子文档查询父文档 、如何通过父文档查询子文档.
  • napoay
  • napoay
  • 2016-07-26 14:17
  • 8632

HTML+CSS日历制作

日历 .month{   border-collapse:collapse;   table-layout:fixed;   width:780px; } .month caption { text...

制作1px表格边框的十种方法(html和css)

第一种: 使用1*1的图片,来填充单元格背景,并设置单元格的宽度,高度为1px 第二种: 第三种:利用二级表格 www.blueidea.com 第四种:...

CSS控制表格——制作日历

表格是网页上最常见的元素,除了用它来显示数据,还常被用来排版。这一次我们就来学习如何用CSS控制表格。 一.表格中的标记 表格(标记)在最初HTML设计时,仅仅是用来存放各种数据的。 下图是一个...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)