ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS网格布局做一个时间表

2021-09-20 13:35:46  阅读:140  来源: 互联网

标签:10 时间表 30 网格 40 对应 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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有