原标题:CCS小技巧,如何使用CSS Grid制作简单的日历,简单有趣
日历是人类文明的重要工具之一。然后可以记住许多重要事件,并从事件的确切日期追溯到真相。
在本文中,我们将学习如何利用CSS Grid系统(最近在前端开发人员中流行的一种布局技术)来使用HTML和CSS设计日历。以下是日历的最终设计效果:
制作HTML
从图片中我们可以看出日历包含三个部分:月指标;工作日/周末指标;日期本身。
编写HTML的最佳方法是遵循正确的感觉。现在,我们将根据以下三个部分创建HTML:
我们还应该能够看到日历上网格的七个列的需求。
我们将重点放在上面的代码.day-of-week和.date-grid上面的代码上,因为现在我们只在谈论网格。
网格排列
有两种创建CSS Box的方法。第一种方法是在内部组合元素.day-of-week并.date-grid 成为一个选择器。如果要这样做,我们可以安排display: grid。如果执行此操作,HTML将是什么样的:
我们应该避免这种方法,因为HTML失去了它的结构意义,因为它结合起来,让我们尝试保存.day-of-week并date-grid 作为一个独立的元素,如果可能的。因为这使得我们更容易阅读/理解已经写入的代码。这是最好的HTML结构:
创建具有简单结构的CSS网格的最佳方法是使用子网格。但是,大多数浏览器尚不支持子网格。同时,最好的办法就是让两个独立的电网,一个是.day-of-week和一个.date-grid。因此,它可以解释.day-of-week并.date-grid可以使用相同的七个柱网。
实际日期调整
2019年2月从星期五开始。如果我们希望日历正确无误,则需要确保:2019年2月1日为星期五;2019年2月2日为星期六;2019年2月3日是星期日等等...
使用CSS Grid,可以简化这一部分。
CSS Grid的放置算法在某种程度上遵循以下规则(如果我们未将其设置grid-auto-flow为dense):放置具有显式grid-column或grid-row第一位的项目;根据最后放置的项目填写其余部分
这表示:如果第一项属于第6列;第二项将放置在第7列中。;第三项将放置在第一行的下一行中(因为只有七列);第四项将放置在第2列中等等...
因此,如果我们将2月1日放置在第六列(星期五),则其余日期将正确放置。像这样的简单逻辑...
以下是整个使用的代码:源代码HTML
责任编辑: