开发者社区> 桃子红了呐> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

2017-12-31 1823

简介：
+关注继续查看

效果

代码

复制代码
<html>
<head>
<title>Calendar</title>
<style>
<!--
.month {
    border-collapse: collapse;
    table-layout:fixed;
    width:780;
}
.month caption {
    text-align: left;
    font-family: normal 120% 宋体, arial;
     font-size:12px;
    font-weight:normal;
    padding-bottom: 6px;
}

.month caption .date{
    font-size:150%;
    font-weight:bold;
}

.month th {
    border: 1px solid #999;
    border-bottom: none;
    padding: 3px 2px 2px;
    margin:0;
    background-color: #ADD;
    color: #333;
    font: 80% 宋体;
}
.month td {
    border: 1px solid #AAA;
    font: 12px 宋体;
   line-height:16px;
    padding: 2px 2px;
    margin:0;
    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:0;
}

.month li {
    color:#fff;
   background:transparent url(level-2.gif) no-repeat;
   padding:2px;
    margin-bottom: 6px;
    height:34px;
    overflow:hidden;
    width:100px;
}

.month td li.important{
   background:transparent url(level-1.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">31</td>
        <td>1</td>
        <td class="active">2
        <ul>
            <li class="important">完成书稿第2部分</li>
            <li>查Javascript相关资料相关资料</li>
        </ul>
        </td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td class="active">7
        <ul>
            <li>检查案例实施进度</li>
        </ul>
        </td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td class="active">13
        <ul>
            <li class="important">CSS禅意花园案例分析</li>
            <li>给Dave回复邮件</li>
        </ul>
        </td>
    </tr>
    <tr>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td class="active">17
        <ul>
            <li>artech.cn网站改版策划</li>
        </ul>
        </td>
        <td class="active">18
        <ul>
            <li>录制CSS视频教程</li>
            <li>其他视频教程策划</li>
        </ul>
        </td>
        <td>19</td>
        <td>20</td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
        <td class="active">26
        <ul>
            <li>中关村图书大厦调研</li>
        </ul>
        </td>
        <td class="active">27
        <ul>
            <li>西单图书大厦调研</li>
            <li>北京图书大厦调研</li>
        </ul>
        </td>
    </tr>
    <tr>
        <td>28</td>
        <td>29</td>
        <td >30
        </td>
        <td class="active">31
            <ul>
            <li class="important">准备出差资料</li>
            <li>整理硬盘文件资料</li>
            </ul>
        </td>
        
        <td class="next">1</td>
        <td class="next">2</td>
        <td class="next">3</td>
    </tr>
</table>
</body>
</html>
复制代码

说明：

巧妙的布局

巧妙的样式

 

scope定义和用法

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

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

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

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

详细解释

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

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



本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/5007825.html如需转载请自行联系原作者

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

前端开发 JavaScript
CSS table CSS li CSS ul CSS学习 CSS实现
开发者社区 > 开发与运维 > 文章
云迁移中心
作者高分内容
更多
ES搜索排序，文档相关度评分介绍——Field-length norm 2919 使用UltraISO刻录自己的音乐CD步骤 3479 真正的上锁前，为何要调用preempt_disable()来关闭抢占的case【转】 2367 linux内核中打印栈回溯信息 - dump_stack()函数分析【转】 4111 css案例学习之用thead、tbody、tfoot实现漂亮的table布局 2799
相关文章
onc-virn
【笔记】纯css实现列表水平滑动（图片或文字内容不限）
纯css实现列表水平滑动（图片或文字内容不限）
0 0
w7hwgrboggm6g
面试官：请使用 CSS 实现自适应正方形
面试官：请使用 CSS 实现自适应正方形
0 0
董员外
我已经说了5种css居中实现的方式了，面试官竟然说还不够？
这是一篇关于居中对齐方式的总结 开篇之前，先问一下大家都知道几种居中的实现方式？ 面试时答出来两三个就不错了，就怕面试官还让你继续说。今天就来总结一下这些居中的方式 使用flex布局设置居中。 使用flex 时也能通过给子项设置margin: auto实现居中。 使用绝对定位的方式实现水平垂直居中。 使用grid设置居中。 使用grid时还能通过给子项设置margin: auto实现居中。 使用tabel-cell实现垂直居中。 还有一种不常用的方法实现垂直居中。 最后还有一种奇葩的方法。容器设置position: relative。孩子设置 top、left、bottom、right都设
0 0
极客李华
HTML+CSS实现商品介绍模考（以Apple14为案例）
本文以最通俗易懂的语言为读者提供一个经典CSS小案例，商品介绍模块，并且结合时事，以Apple14为案例进行讲解。
0 0
sysdzw
js实现body背景图自动扩缩 光靠css几乎无法实现这样的效果
js实现body背景图自动扩缩 光靠css几乎无法实现这样的效果
0 0
纸飞机博客
css实现弧形边框
css实现弧形边框
0 0
亮点菌
教你用HTML+CSS实现百叶窗动画效果
我们浏览网页的时候总能看见一些炫酷的特效，比如百叶窗效果，本文我们就用HTML+CSS制作一个百叶窗小项目，适合刚学前端的小伙伴，使用代码简单易懂，很容易上手，学习完本文后，相信你也能敲出来属于自己的百叶窗效果，改变图片及相应盒子的大小，有女朋友的可以试着放几张在一起的照片，也是一件非常浪漫的事
0 0
MiyueFE
利用 SplitingJS 配合 CSS 实现文字"蠕动"效果
利用 SplitingJS 配合 CSS 实现文字"蠕动"效果
0 0
MiyueFE
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
0 0
MiyueFE
CSS进阶向--纯css实现流光边框（二）
CSS进阶向--纯css实现流光边框（二）
0 0
+关注
桃子红了呐
文章
问答
作者高分内容
更多
ES搜索排序，文档相关度评分介绍——Field-length norm 2919 使用UltraISO刻录自己的音乐CD步骤 3479 真正的上锁前，为何要调用preempt_disable()来关闭抢占的case【转】 2367 linux内核中打印栈回溯信息 - dump_stack()函数分析【转】 4111 css案例学习之用thead、tbody、tfoot实现漂亮的table布局 2799
文章排行榜
最热
最新
1 承上启下：基于全域漏斗分析的主搜深度统一粗排 91460
2 复杂链表的复制 90594
3 【Transform3D】转换详解（看完就会） 88136
4 【flexbox弹性布局学习指南】CSS热门布局方案 68821
5 如何构建标签画像工程体系及实现方案 63096
6 DCM：中间件家族迎来新成员 61163
7 系统的混乱并业务本身之复杂，我们并不擅长处理『简单』 48267
8 超越10倍开发者 48135
9 ⚡Three.js-在场景中导入3D动画模型 46102
10 Request&Response 39090
11 《JavaScript高级程序设计》__ 作用域&内存 37892
12 影响成长的关键思考 34899
13 K8S学习-当我们部署应用的时候都发生了什么？（第一篇） 30678
14 【从零开始学习深度学习】12. 什么是模型的训练误差？基于三阶多项式的欠拟合与过拟合训练过程演示 27890
15 阿里云物联网平台设备分发实战 33496
16 ChatGPT 常见错误原因及解决方案：报错、回答不完整等 21606
17 Python3，5行代码，让你拥有无限量壁纸美图，终于告别手动下载了。 16278
18 Python3，区区9行代码批量提取PDF文件的指定内容，我被震惊了.... 5176
19 Python3，9行代码，对比两个Excel数据差异，并把差异结果重新保存。 8395
20 深聊性能测试，从入门到放弃之： Windows系统性能监控(一) 性能监视器介绍及使用。 9371
1 【数据设计与实现】第5章：同步与互斥 53
2 Python库函数pandas读取excel数据 54
3 谈谈《流浪地球2》中如何正确的“重启互联网” 1711
4 2023阿里云学生服务器免费申请流程 128
5 2023 年8个ChatGPT 的替代品 88
6 java: 错误: 无效的源发行版：17 110
7 YAML与Spring Boot 208
8 AI给你送年画啦！每一张都是独一无二 102
9 关于2023年1月1日起扣税规则说明 73
10 第3期乘风伯乐奖--寻找百位乘风者伯乐，邀请新博主入驻即可获奖 61
11 使用ChatGPT帮我们写一篇论文，最后查重的重复率会是多少？ 74
12 中原银行对金融行业实时数仓的现状与发展趋势思考 269
13 系列征文3｜算法领域主题征文开始啦！ 52
14 玖章算术CEO叶正盛：程序员必须掌握的数据库原理 133
15 大火的4D Radar数据集及基线模型汇总 53
16 海思3559万能平台搭建：RTSP实时播放的支持 55
17 万字长文 | 多目标跟踪最新综述（基于Transformer/图模型/检测和关联/孪生网络）（下） 78
18 Windows和Ubuntu双系统安装（非虚拟机） 175
19 关系代数和SQL语法 55
20 2023跨年代码（烟花+自定义文字+背景音乐+雪花+倒计时） 803
相关课程
更多
前端开发CSS基础
4126
21
去学习
零基础学前端HTML+CSS
8696
57
去学习
推荐文章
2022藏经阁年度电子书榜单出炉！ 参与应用引擎 SAE评测，赢取CHERRY机械键盘等好礼 “第益课”大学生技术公益 乘风者计划邀您入驻社区，精彩权益即刻享
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师（初级）实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载