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，会将当前列的所有单元格和表头单元格绑定起来。

css案例学习之table tr th td ul li实现日历的更多相关文章

css案例学习之用thead、tbody、tfoot实现漂亮的table布局
首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最 ...
css案例学习之ul li dl dt dd实现二级菜单
效果代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
css案例学习之盒子模型
定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...
css案例学习之继承关系
代码 <html> <head> <title>继承关系</title> <style> body{ color:blue; /* 颜色 * ...
CSS 案例学习
1.样式 display:inline-block;可改变a标签,合其可定义宽高 2.a:hover表示鼠标经过 3.background:url(110.png) bottom 表示:给链接一个图片 ...
table tr foreach td 换行
@{ ;} <table style=" class="sy_table"> <tr> @foreach (DataRow dr in (View ...
css案例学习之relative与absolute
代码 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
css案例学习之float浮动
代码: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
css案例学习之class执行的顺序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

android批量文件上传（android批量图片上传）
项目中多处用到文件批量上传功能,今天正好解决了此问题,在此写出来,以便日后借鉴. 首先,以下架构下的批量文件上传可能会失败或者不会成功: 1.android客户端+springMVC服务端:服务端 ...
Lucene.net常见功能实现知识汇总
在开发SearchEasy Site SearchEngine(搜易站内搜索引擎)的时候,经常会遇到一些搜索引擎的常见功能如何实现的问题,比如实现相关度百分比显示?如何实现在结果中搜索等等诸如此类常见 ...
bzoj3721 [PA2014 Final] Bazarek
Description 有n件商品,选出其中的k个,要求它们的总价为奇数,求最大可能的总价. Input 第一行一个整数n(1<=n<=1000000),表示商品数量.接下来一行有n个整数 ...
WIN8共享文件详细设置
原文地址:http://jingyan.baidu.com/article/75ab0bcbff4274d6864db2f5.html win8共享文件设置详细教程 | 浏览:6987 | 更新:2 ...
【poj】1001
[题目] ExponentiationTime Limit: 500MS Memory Limit: 10000KTotal Submissions: 123707 Accepted: 30202De ...
应用程序打包(ipa)
如果想让用户可以安装ipa, 必须在打包程序的时候说清楚哪一个应用程序(appid)可以安装到哪一台设备上.(UDID). 原理: 要想打包, 告诉苹果, 哪一台电脑可以进行打包步骤: 让电脑端具备 ...
python list 去重
print u'列表去重'a=[1,2,3,3,2,1,4,4,5,6,'a','a','b','c']print list(set(a))
Python3.5 queue模块详解
queue介绍 queue是python中的标准库,俗称队列,可以直接import 引用,在python2.x中,模块名为Queue 在python中,多个线程之间的数据是共享的,多个线程进行数据交换 ...
(史上最全的ios源码汇总)
按钮类按钮 Drop Down Control http://www.apkbus.com/android-106661-1-1.html 按钮-Circular M ...
cocos2dx 3.0 研究（4）渲染分析
http://blog.csdn.net/epeaktop/article/details/26730909中已经说明了程序的设计,让我们来看看在cocos2dx 3.0中代码是怎样实现的. void ...

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

scope定义和用法

详细解释

css案例学习之table tr th td ul li实现日历的更多相关文章

随机推荐

热门专题