需求：实现日历备忘录（静态）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日历备忘录</title>
<style type="text/css">
table {
width: 900px;
table-layout: fixed;
border-collapse: collapse;
}
th,td {
border: 1px dotted #999;
padding: 5px;
}
.head {
height: 30px;
background-color: #DDD;
text-align: center;
}
.body {
height: 140px;
vertical-align: baseline;
}
caption {
text-align: left;
}
.special {
background-color: #AAA;
}
</style>
</head>
<body>
<table>
<caption><h3>2016年4月</h3></caption>
<tr class="head">
<th>星期日</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
</tr>
<tr class="body">
<td class="special">27</td>
<td class="special">28</td>
<td class="special">29</td>
<td class="special">30</td>
<td class="special">31</td>
<td>1</td>
<td>2</td>
</tr>
<tr class="body">
<td>3</td>
<td>4</td>
<td>5
<ul>
<li>钓鱼</li>
<li>训练</li>
</ul>
</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr class="body">
<td>10</td>
<td>11</td>
<td>12
<ul>
<li>钓鱼</li>
<li>训练</li>
</ul>
</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr class="body">
<td>17</td>
<td>18</td>
<td>19
<ul>
<li>钓鱼</li>
<li>训练</li>
</ul>
</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr class="body">
<td>24</td>
<td>25</td>
<td>26
<ul>
<li>钓鱼</li>
<li>训练</li>
</ul>
</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</table>
</body>
</html>
原文地址：https://www.cnblogs.com/neymargoal/p/9470923.html
时间： 2024-07-31 05:08:46