DAY24 搞样式--用CSS Gird来搞个万年历吧(上)

前言

今天开始实作的部分,尝试用完全没碰过的CSS Grid要搞出一个万年历,不停的研究不停地开发新事物就是工程师有趣的地方吧!所以为此还是努力的试试看~

今天就先来厘清我的想法,怎样排出我想要的面板

我的需求应该是:

  • 一个7(天)*5(周)的表格
     外加一个首行,可以放星期一~星期日这个标题(所以是7*6)

  • 首行不用太高,其余5行(周)要高一点,而且要等高

  • 5行(周)要可以每天都塞排班人员进去
    因为排班人员不确定有几个,所以高度要弹性
    但是为了版面的和谐,应该超过三个就会变点选"点我看更多"的弹跳视窗来显示
    预计每一格最多显示2人,剩下的就弹跳视窗

  • 非本月日期要disabled样式
    因为不可能刚好1号是星期一,所以月历上通常会有上个月几天、跟下个月几天,要换样式

以上大概就是本次实做月历的需求,以这样为出发点开始设计


<<:  Day10:今天来谈一下如何使用Parrot Security的nmap扫描NFS资讯

>>:  Day 9 - 条件,重复,回圈与互动 - 加入互动,随机性与状态

每日挑战,从Javascript面试题目了解一些你可能忽略的概念 - Day7

tags: ItIron2021 Javascript 作者碎碎念 没注意到昨天发错文章了..把Da...

[JS] You Don't Know JavaScript [this & Object Prototypes] - Prototypes [下]

前言 我们在Prototypes [上]中介绍了什麽是Prototype也介绍了JavaScript...

追求JS小姊姊系列 Day20 -- 工具力,原来如此:继承。

前情提要: 在上一集解释了工具力的来源 方函式:还记得之前提到的建构式模式吗? 只要提供一个原型,就...

[30天 Vue学好学满 DAY26] axios & axios-mock-adapter

前一篇提完透过axios 进行HTTP请求,但前後端分离且分工的状态下,前端工程师为了验证成果需要透...

Material UI in React [ Day 27 ] Styles API (part 2)

StylesProvider 他和 Theme Provider 很像,其实就是用 context ...