短信预约-IT技能 免费直播动态提醒

2024-12-03 15:53

关注

"calendar-wrapper"> 
   
  "calendar"> 
    "weekday">一
 
    "weekday">二
 
    "weekday">三
 
    "weekday">四
 
    "weekday">五
 
    "weekday">六
 
    "weekday">日
 
 
    "first-day">1
 
    
2
 
    
3
 
    -- ... --> 
    
29
 
    
30
 
    
31
 
   

为简单起见，这里把一周七天和日期全都放进一个列表里了。CSS 代码更简单了：

.calendar { 
  display: grid; // 1 
  grid-template-columns: repeat(7, 1fr);  // 2 
} 
.first-day { 
  grid-column-start: 2; // 3 
} 

稍微解释下，第一行就是将列表声明为grid容器。第二行的属性 grid-template-columns用来设置每列的宽度。一周有 7 天，因此需要 7 列。也可以这样写：

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 

或者

grid-template-columns: 40px 40px 40px 40px 40px 40px 40px; 

是不是显得重复啰嗦?所以有了 repeat()简写方法，用于定义多个等宽的列就方便多了。这里的1fr 是新的 CSS 弹性长度单位，具体用法可以参考 [https://www.w3.org/TR/css3-grid-layout/#fr-unit]。

最后，由于大部分月份的 1 号并不是周一，所以要用grid-column-start属性设置1号这个单元格的位置。

Bingo!一个极简日历就完成了!

极简日历

当然了，头部的背景色还是需要额外代码的，但这不是关键所在。想要了解更多关于强大的 CSS Grid 布局的知识，推荐参考 MDN 文档 [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout]

 本文转载自微信公众号「1024译站」，可以通过以下二维码关注。转载本文请联系1024译站公众号。