【第22期】观点:IT 行业加班,到底有没有价值?

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>
版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

AJAX框架 jMaki (三) – 用日历(Calendar)和表格(Table)实现的Blog首页

2007年09月13日 15:58:00 下面使用jMaki中的Yahoo Calendar和Yahoo DataTable 来建立一个迷你Blog首页。这个小程序可以在选择日历的某个日期后,Da...

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

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

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

css3实现web app翻页过度效果

最近在开发web app页面,要实现滑动翻页,一开始实现的效果是无任何过渡效果的,可是这样子的话页面会闪跳一下,用户体验非常不好。于是我们主管叫我用jquery mobile,可是用了这个库之后,问题...

15款HTML5/CSS3案例展示,导航,日历,钟表。

对于前端开发者来说,分享一些优秀的HTML5应用可以直接拿来用,更重要的是可以激发创作的灵感。今天我们要分享9款精挑细选的HTML5应用,个个都是干货。 1、HTML5/CSS3滑块动画菜单 图...

css3翻牌效果

css3 翻牌 *{ margin:0; padding:0;} ul,li{ list-style:none; margin:0; padding:0;} .brandsShow{ width...

如何用CSS实现翻页效果?

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/1999/xhtml" xml:lang="zh" lang=...

如何用CSS实现翻页效果?

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/1999/xhtml" xml:lang="zh" lang=...

移动端垂直翻页+css3动画经验总结

1、学会分析问题,用专业的眼光看问题不能浮于表面。例如,翻页 首先要弄清楚鼠标事件(touchstart/touchmove/touchend); 其次,分析事件触发过程以及在这个过程...

纯CSS实现点击滚动翻页的效果

dl { position:absolute; width:389px; height:154px; border:10px solid #eee; } dd { margin:0; w...

C#制作简易日历

while (true)             {                 #region 输入年月                 int year, month;        ...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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