<html>
<head>
<title>Calendar</title>
<style>
<!--
.month {
border-collapse: collapse;
table-layout:fixed;
width:780;
}
.month caption {
text-align: left;
font-family: normal normal bold 120% normal 宋体, arial;
font-size:12px;
font-weight:normal;
padding-bottom: 6px;
}
.month caption .date{
font-size:150%;
font-weight:bold;
}
.month th {
border: 1px solid #999999;
border-bottom: none;
padding: 3px 2px 2px;
margin:0;
background-color: #ADD;
color: #2F2F2F;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.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: #BdE;
border: 2px solid #48B;
}
.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;
}
/************************************/
.month{
width:245px;
}
.month th span ,
.month ul {
display:none;
}
.month td.active:hover,
.month td.hover {
background:aqua;
}
.month td.active:hover ul ,
.month td.hover ul{
margin:10px 0 0;
border:3px #FFF solid;
padding:7px 2px 0 5px;
background:#bde;
display:block;
position:absolute;
}
-->
</style>
</head>
<body>
<table class="month" summary="Calendar for January 2007">
<caption><span class="date">2007年10月</span> <a >小模式</a> | <a href="calendar-normal.html">中模式</a> | <a href="calendar-large.html">大模式</a></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>
<script language="javascript">
var days = document.getElementsByTagName('td');
for (var i=0;i<days.length;i++)
if(days[i].className == 'active')
{days[i].onmouseover = function(){ //鼠标在行上面的时候
this.className = 'active hover';
}
days[i].onmouseout = function(){ //鼠标离开时
this.className = 'active';
}
}
</script>
</body>
</html>
《CSS设计彻底研究》实例
需积分: 3 118 浏览量
2008-12-18
17:22:41
上传
评论
收藏 951KB RAR 举报
《CSS设计彻底研究》实例 （351个子文件） 
SpryTabbedPanels.css 8KB 191.css 5KB 158.css 4KB SpryAccordion.css 4KB SpryCollapsiblePanel.css 4KB 9998.css 2KB 9999.css 2KB 9998.css 2KB tab.css 2KB mystyle.css 49B Thumbs.db 41KB Thumbs.db 25KB Thumbs.db 25KB Thumbs.db 25KB Thumbs.db 23KB Thumbs.db 22KB Thumbs.db 19KB Thumbs.db 19KB Thumbs.db 14KB Thumbs.db 14KB Thumbs.db 13KB Thumbs.db 12KB Thumbs.db 12KB Thumbs.db 12KB Thumbs.db 12KB Thumbs.db 12KB Thumbs.db 12KB Thumbs.db 12KB Thumbs.db 11KB Thumbs.db 7KB Thumbs.db 6KB Thumbs.db 6KB Thumbs.db 5KB Thumbs.db 5KB Thumbs.db 5KB Thumbs.db 5KB Thumbs.db 4KB
left-top.gif 8KB left-top.gif 8KB left-top.gif 8KB left-top.gif 8KB left-top.gif 8KB left-top.gif 7KB cup.gif 7KB cup.gif 7KB cup.gif 7KB cup.gif 7KB cup.gif 7KB cup.gif 7KB cup.gif 7KB cup.gif 7KB cup.gif 7KB prebg.gif 5KB bg-h1-bak.gif 5KB bg-h1.gif 4KB left-top.gif 4KB background.gif 3KB left-top.gif 3KB left-top.gif 3KB hover.gif 2KB left-bg.gif 2KB h3road.gif 2KB bottom-right.gif 1KB mainbg.gif 1KB h3allabout.gif 1KB top-left.gif 1KB bg-2.gif 1KB right.gif 1KB bg.gif 1KB h3part.gif 1KB left-bottom.gif 1012B left-bottom.gif 1012B h3require.gif 989B bg-grad.gif 974B right-bg.gif 916B left-bottom.gif 909B left-bottom.gif 887B h3benefits.gif 869B left-bottom.gif 854B left-bottom.gif 854B left-bottom.gif 854B left-bottom.gif 854B left-bottom.gif 854B lselectspan.gif 836B lresourcesspan.gif 784B larchivesspan.gif 697B ac-open-back-bak.gif 663B background-liquid.gif 581B contbg.gif 580B col-open-back.gif 570B col-close-back.gif 569B col-open-hover.gif 568B col-close-hover.gif 567B right-top.gif 565B right-top.gif 565B right-top.gif 565B right-top.gif 565B right-top.gif 565B right-top.gif 558B tab-back.gif 558B共 351 条
- 1
- 2
- 3
- 4
资源评论
