Tìm hiểu làm thế nào để tạo một lịch với CSS.
Hãy tự mình thử »
Bước 1] Thêm HTML: & nbsp; & nbsp; & nbsp; & nbsp; ❮ & nbsp; & nbsp; & nbsp; ❯ & nbsp; & nbsp; & nbsp; August2021 & nbsp;
& nbsp; Mo & nbsp; Tu & nbsp; Chúng tôi & nbsp; TH & nbsp; Fr & nbsp; SA & NBSP; SU
& nbsp; 1 & nbsp; 2 & nbsp; 3 & nbsp; 4 & nbsp; 5 & nbsp; 6 & nbsp; 7 & nbsp; 8 & nbsp; 9 & nbsp; 10 & nbsp; 11 & nbsp; ...vân vân
& nbsp; & nbsp; & nbsp; & nbsp; ❮ & nbsp; & nbsp; & nbsp; ❯ & nbsp; & nbsp; & nbsp; August2021 & nbsp;
body {font-family: Verdana,
sans-serif;}
& nbsp; Mo & nbsp; Tu & nbsp; Chúng tôi & nbsp; TH & nbsp; Fr & nbsp; SA & NBSP; SU
.month {
padding: 70px 25px;
width: 100%;
background: #1abc9c;
text-align: center;
}
& nbsp; 1 & nbsp; 2 & nbsp; 3 & nbsp; 4 & nbsp; 5 & nbsp; 6 & nbsp; 7 & nbsp; 8 & nbsp; 9 & nbsp; 10 & nbsp; 11 & nbsp; ...vân vân
.month ul {
margin: 0;
padding: 0;
}
Bước 2] Thêm CSS:
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
ul {list-style-type: none;} body {font-family: verdana, sans-serif;}
.month .prev {
float: left;
padding-top: 10px;
}
/ * Tiêu đề tháng */ .month {& nbsp; & nbsp; padding: 70px 25px; & nbsp; & nbsp; chiều rộng: 100%; & nbsp; & nbsp; nền: #1abc9c; & nbsp; & nbsp; văn bản-align: centre; }
.month .next {
float: right;
padding-top: 10px;
}
/ * Danh sách tháng */ .month ul {& nbsp; & nbsp; lề: 0; & nbsp; & nbsp; đệm: 0; }
.weekdays {
margin: 0;
padding: 10px 0;
background-color:#ddd;
}
.Month ul li {& nbsp; & nbsp; màu: trắng; & nbsp; & nbsp; kích thước phông chữ: 20px; & nbsp; Text-Transform: chữ hoa; & nbsp; & nbsp; khoảng cách thư: 3px; }
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}
/ * Nút trước đó trong tiêu đề tháng */ .month .prev {& nbsp; & nbsp; float: trái; & nbsp; & nbsp; padding-top: 10px; }
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
/ * Nút tiếp theo */ .month .next {& nbsp; & nbsp; float: phải; & nbsp; & nbsp; padding-top: 10px; }
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}
/ * Các ngày trong tuần [mon-sun] */ .weekdays {& nbsp; Biên độ: 0; & nbsp; Đệm: 10px 0; & nbsp; màu nền: #DDD; }
.days li .active {
padding: 5px;
background: #1abc9c;
color:
white!important
}
Hãy tự mình thử »
Xem thảo luận
Cải thiện bài viết
Lưu bài viết
Xem thảo luận
Cải thiện bài viết
Lưu bài viết
Đọc
Cách tiếp cận: Đầu tiên chúng ta sẽ sử dụng thẻ bảng, sẽ được sử dụng để tạo cấu trúc của lịch. Điều này sẽ cho chúng ta một ý tưởng về cách lịch được tạo bằng HTML. Sau đó, chúng tôi sẽ áp dụng một số thuộc tính CSS để làm cho thiết kế của lịch tốt hơn. First we will be using the table tag, which will be used to create the structure of the calendar. This will give us an idea of how the calendar is created using HTML. Later we will apply some CSS property to make the design of the calendar better.
Bàn luận In this section, we will create first the structure of the calendar by using the