日历组件大家应该很熟悉了,但你想过如何实现日历的界面布局吗?最容易想到的方法是用 table布局,毕竟它在视觉上跟表格类似。但是从现代 CSS 的角度来说,table多用来展示列表数据,而不是用作布局方案。因为它需要很多额外的 DOM 元素,而且样式控制上也不够灵活。另一种方法是用 flex布局,这也算是 CSS3 给我们带来的福利,让界面布局工作简化了许多。
本文打算介绍一种更简单的方法,只需要 3 行核心 CSS 代码即可实现日历界面!你可能猜到了,它就是 Grid布局。
先看 HTML 部分:
- <div class="calendar-wrapper">
- <h1>Decemeber</h1>
- <ul class="calendar">
- <li class="weekday">一</li>
- <li class="weekday">二</li>
- <li class="weekday">三</li>
- <li class="weekday">四</li>
- <li class="weekday">五</li>
- <li class="weekday">六</li>
- <li class="weekday">日</li>
- <li class="first-day">1</li>
- <li>2</li>
- <li>3</li>
- <!-- ... -->
- <li>29</li>
- <li>30</li>
- <li>31</li>
- </ul>
- </div>
为简单起见,这里把一周七天和日期全都放进一个列表里了。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译站公众号。
在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: 【Web动...
前言 之前,一直想开发一款属于自己的Markdown编辑器,主要是自己平常写文章可以...
互联网的飞速发展,推动IDC行业进步。IDC互联网数据中心将电信网络、计算机网络...
集群是如何调度系统的?数据一致性是如何保证的等等,这些都是比较复杂的技术问题...
本文已经过原作者 Shadeed 授权翻译。 React 提供了两种方法来访问input字段的值...
前言 关于链表,常见的算法问题有以下几种: 单链表反转 两个有序的链表合并 删...
TOP云 (west.cn)5月25日消息,近日全球规模最大的金融服务集团摩根大通JP Morg...
Media Options作为海外一家 域名 经纪公司,其业务十分广泛,不仅有域名经纪交易...
在刚刚过去的双十一中,超1207亿元的交易额再次刷新电商单日成交记录。双十一不...
1、功能及使用场景1.1、功能介绍 canal是阿里巴巴开源的mysql数据传输组件 基于m...