其他
【每日一练】16—响应式电子日历效果的实现
写在前面
今天练习的小项目是一个电子日历，这个日历我个人觉得还是非常实用的，现在，我们一起来看一下最终的效果：
<!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>*{ 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;}写在最后
以上就是今天的【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号