寫在前面
今天練習的小項目是一個電子月曆，這個月曆我個人覺得還是非常實用的，現在，我們一起來看一下最終的效果：
HTML代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>【每日一練】16—響應式電子月曆效果的實作</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.css" />
</head>
<body>
<div class="calendar"></div>
<script src="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.js"></script>
<script>
new Calendar(document.querySelector('.calendar'));
</script>
</body>
</html> CSS代碼：
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Quicksand', sans-serif;
}
body
{
background: #f1fbff;
}
.calendar
{
padding: 20px 40px;
}
.months-container
{
justify-content: center;
gap: 40px;
}
.calendar .months-container .month-container
{
background: #ffffff;
padding: 20px 0;
min-width: 280px;
box-shadow: 15px 15px 40px rgba(0,0,0,0.15);
}
.calendar table.month th.month-title
{
color: #5a8990;
font-size: 1.9em;
font-family: 'Dancing Script', cursive;
font-weight: 200;
}
.month tr td:first-child,
.month tr td:last-child,
.month thead tr:nth-child(2) th:first-child,
.month thead tr:nth-child(2) th:last-child
{
color: #f75c90;
}
.calendar table.month td.day .day-content
{
padding: 6px 8px;
}
.calendar table.month th.day-header
{
color: #777;
font-weight: 700;
font-size: 0.9em;
}
.month tr td
{
color: #777;
font-weight: 500;
font-size: 0.9em;
}
table.month td.day .day-content:hover
{
background: #f75c90;
color: #fff;
font-weight: 500;
}
.calendar .calendar-header
{
border: none;
}
.calendar .calendar-header table th:hover
{
background: transparent;
}
.calendar .calendar-header .year-title
{
font-family: 'Dancing Script', cursive;
font-size: 4em;
color: #f75c90;
}
.calendar .calendar-header .year-neighbor
{
font-size: 2.25em;
}
.calendar .calendar-header .year-neighbor2
{
font-size: 1em;
} 寫在最後
以上就是今天的【每日一練】的全部内容，希望今天的小練習對你有用，如果你覺得有幫助的話，請點贊我，關注我，并将它分享給你身邊做開發的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。