【HTML+CSS】日歷備忘錄（靜態）
阿新 • • 發佈：2018-08-13
caption ica -s round width 實現 height html+css enter
需求：實現日歷備忘錄（靜態）
<!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>
【HTML+CSS】日歷備忘錄（靜態）