CSS网格布局做一个时间表

最近的一个小练习。新的学期开始了，老板让我给每位老师做个时间表展示他们的office hour和课程安排，我先用AI手动做了二十多张时间表用于印刷。出于好奇和对偷懒的探索，周末我又用CSS网格布局弄了一个网页，最后弄出来长这样。

下面开始回忆制作过程。

主要原理是画出网格，计算出每个时间对应的网格进行上色。

网格是这样设计的：纵向10分钟1格，从早上8点到晚上21点就是13*6格，横向一个工作日1格，共5格，再加上横纵标识各1格，所以用sublime text的emmet插件生成79*6个div，命名为"item+序号"。

时间段对应格子的计算以周三的8:30-8:40为例，该格位于第4列，第(8-8)*6+(40-0)/10+1行，对应div"item28"。周三8:30-10:00时间段在网格中对应的就是8:30-8:40到9:50-10:00的，item序号相差6的，一系列格子。

点击带有一位老师名字的按钮触发的事项就是：1.清空内容；2.从数据中取老师的办公室、邮箱信息，修改表头；3.遍历每行事项数据，将对应事项上色显示文字。

为了方便传播，最后把csv里的数据作为常量写进js，把css和js嵌入html整合成一个文件，毕竟整体都很简单也免得挂服务器了。

标签：10,时间表,30,网格,40,对应,CSS
来源： https://www.cnblogs.com/sid233/p/15314135.html