其他分享
首页 > 其他分享> > CSS网格布局做一个时间表

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