今天我們來學習如何用HTML和CSS編寫一個簡單的日歷代碼,它會在網(wǎng)頁上展示一個日歷,用戶可以方便地查閱日期。下面是示例代碼:
<!DOCTYPE html> <html> <head> <title>日歷</title> <style> table { border-collapse: collapse; width: 50%; margin: 20px auto; } td { border: 1px solid #ddd; padding: 10px; text-align: center; } th { background-color: #eee; border: 1px solid #ddd; padding: 10px; } </style> </head> <body> <h1>日歷</h1> <table> <tr> <th>日</th> <th>一</th> <th>二</th> <th>三</th> <th>四</th> <th>五</th> <th>六</th> </tr> <tr> <td> </td> <td> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> </tr> <tr> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> </tr> <tr> <td>20</td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> </tr> <tr> <td>27</td> <td>28</td> <td>29</td> <td>30</td> <td>31</td> <td> </td> <td> </td> </tr> </table> </body> </html>在上面的代碼里,我們用<table>來創(chuàng)建一個表格,每一行(<tr>)代表一個星期,每一個單元格(<td>)代表一天。<th>用于設置表頭,表示星期幾。這個例子里,我們將日歷表格的樣式設置在CSS的<style>標簽中,可以自行調整表格的寬度、邊框等樣式。 代碼中不是一個復雜的例子,補充一些必要的 CSS 改造和 JavaScript 的交互可以做出一個類似于日歷的框架,僅僅提供一個展示的框架。