css案例学习之table tr th td ul li实现日历

时间：2021-08-21 11:37:56

效果

css案例学习之table tr th td ul li实现日历

代码

<html>

<head>

<title>Calendar</title>

<style>

<!--

.month {

    border-collapse: collapse;

    table-layout:fixed;

    width:;

}

.month caption {

    text-align: left;

    font-family: normal % 宋体, arial;

     font-size:12px;

    font-weight:normal;

    padding-bottom: 6px;

}

.month caption .date{

    font-size:%;

    font-weight:bold;

}

.month th {

    border: 1px solid #;

    border-bottom: none;

    padding: 3px 2px 2px;

    margin:;

    background-color: #ADD;

    color: #;

    font: % 宋体;

}

.month td {

    border: 1px solid #AAA;

    font: 12px 宋体;

   line-height:16px;

    padding: 2px 2px;

    margin:;

    vertical-align: top;

    }

.month td.previous, .month td.next {

    background-color: #eee;

    color: #A6A6A6;

}

.month td.active {

    background-color: #B1CBE1;

    border: 2px solid #4682B4;

}

.month ul {

    list-style-type: none;

    margin: 3px;

    padding:;

}

.month li {

    color:#fff;

   background:transparent url(level-.gif) no-repeat;

   padding:2px;

    margin-bottom: 6px;

    height:34px;

    overflow:hidden;

    width:100px;

}

.month td li.important{

   background:transparent url(level-.gif) no-repeat;

}

-->

</style>

</head>

<body>

<table class="month" summary="Calendar for 2007.10">

    <caption><span class="date">2007年10月 </span></caption>

    <tr>

        <th scope="col"><span>星期</span>一</th>

        <th scope="col"><span>星期</span>二</th>

        <th scope="col"><span>星期</span>三</th>

        <th scope="col"><span>星期</span>四</th>

        <th scope="col"><span>星期</span>五</th>

        <th scope="col"><span>星期</span>六</th>

        <th scope="col"><span>星期</span>日</th>

    </tr>

    <tr>

        <td class="previous"></td>

        <td></td>

        <td class="active">

        <ul>

            <li class="important">完成书稿第2部分</li>

            <li>查Javascript相关资料相关资料</li>

        </ul>

        </td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

    </tr>

    <tr>

        <td class="active">

        <ul>

            <li>检查案例实施进度</li>

        </ul>

        </td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td class="active">

        <ul>

            <li class="important">CSS禅意花园案例分析</li>

            <li>给Dave回复邮件</li>

        </ul>

        </td>

    </tr>

    <tr>

        <td></td>

        <td></td>

        <td></td>

        <td class="active">

        <ul>

            <li>artech.cn网站改版策划</li>

        </ul>

        </td>

        <td class="active">

        <ul>

            <li>录制CSS视频教程</li>

            <li>其他视频教程策划</li>

        </ul>

        </td>

        <td></td>

        <td></td>

    </tr>

    <tr>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td class="active">

        <ul>

            <li>中关村图书大厦调研</li>

        </ul>

        </td>

        <td class="active">

        <ul>

            <li>西单图书大厦调研</li>

            <li>北京图书大厦调研</li>

        </ul>

        </td>

    </tr>

    <tr>

        <td></td>

        <td></td>

        <td >

        </td>

        <td class="active">

            <ul>

            <li class="important">准备出差资料</li>

            <li>整理硬盘文件资料</li>

            </ul>

        </td>

        <td class="next"></td>

        <td class="next"></td>

        <td class="next"></td>

    </tr>

</table>

</body>

</html>

说明：

巧妙的布局

巧妙的样式

scope定义和用法

scope 属性定义将表头单元与数据单元相关联的方法。

scope 属性标识某个单元是否是列、行、列组或行组的表头。

scope 属性不会在普通浏览器中产生任何视觉变化。

屏幕阅读器可以利用该属性。

详细解释

使用 scope 属性，可以将数据单元格与表头单元格联系起来。

通过属性值 row，表头行包括的所有表格都将和表头单元格联系起来。指定 col，会将当前列的所有单元格和表头单元格绑定起来。

相关文章