53-表格设置日历实例

最新推荐文章于 2021-03-21 03:23:05 发布

会编程的阿强

最新推荐文章于 2021-03-21 03:23:05 发布

阅读量758

点赞数

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/shuangrenyu1234/article/details/12849403

版权

HTML/CSS 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.month {
	border-collapse:collapse;
	table-layout:fixed;
	width:780px;
}
.month caption {
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	font-weight:normal;
	padding-bottom:6px;
	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 宋体;
	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;
	padding:2px;
	margin-bottom:6px;
	height:34px;
	overflow:hidden;
	width:100px;
	border:1px #c00 solid;
	background-color:#c66;
}
</style>
</head>
<body>
<table class="month">
  <caption>
  2007年10月
  </caption>
  <tr>
    <th>星期一</th>
    <th>星期二</th>
    <th>星期三</th>
    <th>星期四</th>
    <th>星期五</th>
    <th>星期六</th>
    <th>星期日</th>
  </tr>
  <tr>
    <td class="previous">31</td>
    <td>1</td>
    <td class="active">2
      <ul>
        <li class="important">完成书稿第3部分</li>
        <li>查JQuery相关资料</li>
      </ul></td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td class="previous">31</td>
    <td>1</td>
    <td>2 </td>
    <td  class="active">3
      <ul>
        <li class="important">完成书稿第3部分</li>
        <li>查JQuery相关资料</li>
      </ul></td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td class="previous">31</td>
    <td>1</td>
    <td class="active">2
      <ul>
        <li class="important">完成书稿第3部分</li>
        <li>查JQuery相关资料</li>
      </ul></td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td class="previous">31</td>
    <td>1</td>
    <td class="active">2
      <ul>
        <li class="important">完成书稿第3部分</li>
        <li>查JQuery相关资料</li>
      </ul></td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td class="previous">31</td>
    <td>1</td>
    <td class="active">2
      <ul>
        <li class="important">完成书稿第3部分</li>
        <li>查JQuery相关资料</li>
      </ul></td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>
</body>
</html>

会编程的阿强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
53-表格设置日历实例

无标题文档.month { border-collapse:collapse; table-layout:fixed; width:780px;}.month caption { text-align:left; font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:normal; pad
复制链接

扫一扫