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/ ...
随机推荐
- 修改Fedora 20 启动项
在Fedora 20里面,Fedora 使用了systemd作为系统与服务的管理工具,这个守护进程是系统开机后第一个开启的进程,pid 为1.systemd扮演着初始化系统的角色,主要用于开启与维护系 ...
- POJ-2533最长上升子序列(DP+二分）（优化版）
Longest Ordered Subsequence Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 41944 Acc ...
- sae-v2ex 一个运行在SAE上的类似v2ex的轻型python论坛 - 技术讨论 - 云计算开发者社区 - Powered by Discuz!
sae-v2ex 一个运行在SAE上的类似v2ex的轻型python论坛 - 技术讨论 - 云计算开发者社区 - Powered by Discuz! sae-v2ex 一个运行在SAE上的类似v2e ...
- 【转】Linux下编译ffmpeg
1.下载ffmpeg.下载网址:http://www.ffmpeg.org/download.html 2.解压缩tar -zxvf ffmpeg-2.0.1.tar.gz 3.配置,生成Makefi ...
- RTP/RTCP/RTSP/RSVP/SDP
RTP Real-time Transport Protocol)是用于Internet上针对多媒体数据流的一种传输层协议.RTP协议详细说明了在互联网上传递音频和视频的标准数据包格式.RTP协议常用 ...
- JAVA 代理模式（Proxy）
1.代理模式 代理模式的作用是:为其他对象提供一种代理以控制对这个对象的访问.在某些情况下,一个客户不想或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. 代理模式一般涉 ...
- Java并发编程--Volatile详解
摘要 Volatile是Java提供的一种弱同步机制,当一个变量被声明成volatile类型后编译器不会将该变量的操作与其他内存操作进行重排序.在某些场景下使用volatile代替锁可以减少 ...
- ThinkPHP整合百度Ueditor图文教程
ThinkPHP整合百度Ueditor图文教程 ThinkPHP整合百度Ueditor,基于黄永成老师的视频说明的申明:最好大家都能写绝对路径的都写好绝对路径比如:window.UEDITOR_HOM ...
- html5 video播放不全屏
<video controls="controls" webkit-playsinline src="${page.videoUrl }" type=&q ...
- [HeadFirst-JSPServlet学习笔记][第三章：实战MVC]
第三章 实战MVC J2EE如何集成一切 Java2企业版(Java 2 Enterprise Editon,J2EE)是一种超级规范.规定了servlets2.4,JSP2.0,EJB2.1(Ent ...