3行CSS代码实现日历界面

为了简单起见，这里把所有的7天把星期和日期放到一个列表里面。CSS代码更简单：.calendar{display:grid;//1grid-template-columns:repeat(7,1fr);//2}.first-day{grid-column-start:2;//3}略解释一下，第一行是将列表声明为网格容器。第二行的属性grid-template-columns用于设置每列的宽度。一周有7天，所以需要7列。也可以这样写：grid-template-columns:1fr1fr1fr1fr1fr1fr1fr1fr;或网格模板列：40px40px40px40px40px40px40px；看起来是不是重复了？所以有了repeat()简写方法，定义多个等宽列就方便多了。这里的1fr是新的CSS灵活长度单位，具体用法请参考[https://www.w3.org/TR/css3-grid-layout/#fr-unit]。最后，由于大多数月份的第一天不是星期一，因此使用grid-column-start属性设置第一个单元格的位置。答对了！一个极简日历就完成了！极简日历当然，标题的背景颜色仍然需要额外的代码，但这不是重点。想了解更多强大的CSSGrid布局，推荐参考MDN文档【https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout】本文转载自微信公众号「1024翻译站」，可通过以下二维码关注，转载请联系1024翻译站公众号。