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

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

简介:
+关注继续查看

效果

代码

复制代码
<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如需转载请自行联系原作者

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

相关文章
【笔记】纯css实现列表水平滑动(图片或文字内容不限)
纯css实现列表水平滑动(图片或文字内容不限)
0 0
面试官:请使用 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
js实现body背景图自动扩缩 光靠css几乎无法实现这样的效果
js实现body背景图自动扩缩 光靠css几乎无法实现这样的效果
0 0
css实现弧形边框
css实现弧形边框
0 0
教你用HTML+CSS实现百叶窗动画效果
我们浏览网页的时候总能看见一些炫酷的特效,比如百叶窗效果,本文我们就用HTML+CSS制作一个百叶窗小项目,适合刚学前端的小伙伴,使用代码简单易懂,很容易上手,学习完本文后,相信你也能敲出来属于自己的百叶窗效果,改变图片及相应盒子的大小,有女朋友的可以试着放几张在一起的照片,也是一件非常浪漫的事
0 0
利用 SplitingJS 配合 CSS 实现文字"蠕动"效果
利用 SplitingJS 配合 CSS 实现文字"蠕动"效果
0 0
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
0 0
CSS进阶向--纯css实现流光边框(二)
CSS进阶向--纯css实现流光边框(二)
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载