資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 HTML 和 CSS 設計日曆
要使用 HTML 和 CSS 設計日曆，我們將使用 HTML 表格。我們在日常生活中使用日曆來檢視日期、安排任何事件等等。
在這篇文章中，我們將瞭解如何僅使用 HTML 和 CSS 設計日曆。我們將使用 HTML 表格建立結構，並使用 CSS 屬性設計日曆的 UI。
使用 HTML 和 CSS 設計日曆的步驟
我們將遵循以下步驟使用 HTML 和 CSS 設計日曆。
使用 HTML 構建日曆結構
- 我們使用了 table 標籤及其元素來建立日曆的結構，其中 thead 定義包含日期名稱的標題部分，tbody 定義包含所有日期的表格主體。
- 每一行都使用 tr 定義，th 用於指定日期，td 用於顯示日期。當前月份使用 h2 標籤顯示在中心，前一個和下一個按鈕使用 HTML 字元實體 在 span 標籤中建立。
<div class="container">
<div class="calendar">
<h2>
<span>❮</span>
OCTOBER , 2024
<span>❯</span>
</h2>
<table cellpadding="20">
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr></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 class="current">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>
</tbody>
</table>
</div>
</div>
使用 HTML 設計日曆
- 我們使用 h2 作為元素 選擇器 來設計當前月份、前一個和下一個按鈕。我們使用 CSS text-align 屬性將標題居中，並使用 justify-content 屬性在標題和兩個按鈕之間新增均勻的間距。
- 我們使用 container 類和 CSS flexbox 屬性將日曆居中。CSS display 屬性用於建立一個彈性容器，並使用 justify-content 和 align-items 將日曆水平和垂直居中。
- calendar 類用於設定整個表格的 背景顏色 和文字 顏色，並使用 max-width 屬性設定 div 的寬度。
- 我們使用 table 作為元素選擇器來居中日曆的日期和日期，使用 td 作為元素選擇器來增加日期的 字型大小，並使用 cursor 屬性將游標更改為指標。
- 我們使用 current 類來顯示當前日期，我們更改了它的背景和文字顏色，並使用了 border-radius 屬性來建立圓形邊框。
h2 {
text-align: center;
color: white;
display: flex;
justify-content: space-around;
}
span {
cursor: pointer;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calendar {
color: white;
background-color: #031928;
max-width: fit-content;
}
table {
text-align: center;
}
td {
cursor: pointer;
font-size: large;
}
.current {
background-color: beige;
color: #031928;
border-radius: 60%;
}
完整示例程式碼
以下是實現上述步驟以使用 HTML 和 CSS 設計日曆的完整示例程式碼。
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-align: center;
color: white;
display: flex;
justify-content: space-around;
}
span {
cursor: pointer;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calendar {
color: white;
background-color: #031928;
max-width: fit-content;
}
table {
text-align: center;
}
td {
cursor: pointer;
font-size: large;
}
.current {
background-color: beige;
color: #031928;
border-radius: 60%;
}
</style>
</head>
<body>
<div class="container">
<div class="calendar">
<h2>
<span>❮</span>
OCTOBER , 2024
<span>❯</span>
</h2>
<table cellpadding="20">
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr></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 class="current">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>
</tbody>
</table>
</div>
</div>
</body>
</html>
結論
在這篇文章中，我們學習並瞭解瞭如何使用 HTML 和 CSS 設計日曆。我們使用了 HTML 表格及其元素來建立日曆的結構，然後應用 CSS 來設計日曆。
更新於： 2024 年 10 月 23 日
2K+ 次檢視
廣告