當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

【HTML+CSS】日历备忘录（静态）

發布時間：2023/12/15 综合教程 19 生活家

生活随笔收集整理的這篇文章主要介紹了【HTML+CSS】日历备忘录（静态）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

需求：實現日歷備忘錄（靜態）

<!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】日历备忘录（静态）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。