在本文中,我们将使用 HTML 和 CSS 创建日历。首先,我们必须对 HTML 有所了解。如果有人不了解 HTML 和 CSS,他们将无法使日历变得更好。本文的主要重点是 HTML 标签以及我们将使用 CSS 的方式。
方法:首先我们将使用 table 标记,它将用于创建日历的结构。这将使我们了解如何使用 HTML 创建日历。稍后我们将应用一些 CSS 属性来使日历的设计更好。
创建结构:在本节中,我们将首先使用
Sun | Mon | Tue | Wed | Thu | Fri | sat |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 1 | 2 | 3 | 4 | 5 | 6 |
HTML
January 2021
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
输出:
CSS 设计及其属性:我们将使用 table 标签的一些 CSS 属性和属性来设计日历。我们将要使用的属性是 border 和cellpacing以及cellpadding 。这里我们使用了一个有趣的 CSS 属性,即边框折叠。 border-collapse 的目的是让所有的边框都折叠成一个边框。在这里,我们还使用了内联样式属性使二月的日期几乎不可见。
CSS代码:
table {
border-collapse: collapse;
background: white;
color: black;
}
th, td {
font-weight: bold;
}
我们将在 table 标签中使用的属性:
最终代码:这是以上所有代码的组合
HTML
January 2021
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
输出: