【每日一练】16—响应式电子日历效果的实现

只会学习的bbc lv.1

发布时间：2022-11-09 16:10:47 324

相关标签： # css# html

【每日一练】16—响应式电子日历效果的实现_5e

写在前面

今天练习的小项目是一个电子日历，这个日历我个人觉得还是非常实用的，现在，我们一起来看一下最终的效果：

【每日一练】16—响应式电子日历效果的实现_html_02

HTML代码：




    
    【每日一练】16—响应式电子日历效果的实现

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;
}

写在最后

以上就是今天的【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

【每日一练】16—响应式电子日历效果的实现_html_03

【每日一练】16—响应式电子日历效果的实现_css_04

文章来源： https://blog.51cto.com/u_15809510/5830058

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。