【CSS美化专题】原生日历控件美化

Chelsey.Wang

本帖最后由阿凡佬于 2022-4-10 13:24 编辑

上一周的分享取得了不错的反响，为了让大家做出更美观的系统为了产品周报的那1000金币，我决定把这个系列继续做下去，尽量保持每周日更新一期内容

这期分享之前我发的贴子纯CSS锤子风格日历中的日历是如何制作的。
原生的日历，是这样的
image.png945164489.png

第一步万年不变，写选择器。
通过F12检查元素发现，这个日历有4个组成部分，分别是
image.png875434265.png

这只是其中一个状态，当你点击顶栏的放大和缩小按钮后，还能跳出一个月份选择器，它的类名为gcim-calendar__year-view，
image.png850297546.png

再来分析按钮状态，~~众所周知~~，按钮有5个状态：Normal(一般态), Hover(鼠标经过时), Active(激活时), Focus(焦点停留时), Disabled(不可用时) 有些人说是4个状态, disabled不算，这里不作讨论。一般来说，这5个状态中的后四个都会用4个伪类表示，分别是 :hover, :active, :focus, :disable 。
现在让我们来看下在这个日历中，是怎么表示的
image.png149430235.png

我们发现这个日历中按钮的选择状态样式并不是用伪类表示，而是直接用了类名去赋予按钮属性。这样一来，就更简单了。
一通分析下来，我们的主体部分的选择器就写出来了

.gcim-calendar__month-body__week-title{/*星期几的那个几*/}
.gcim-calendar__month-body__normal-day{/*日期*/}
.gcim-calendar__month-body__normal-day.gcim-calendar__month-body__common-day{/*本月日*/}
.gcim-calendar__month-body__normal-day.gcim-calendar__month-body__trailing-day{/*非本月日*/}
.gcim-calendar__month-body__normal-day.gcim-calendar__month-body__today{/*今日*/}
.gcim-calendar__month-body__normal-day.gcim-calendar__month-body__selected-day{/*选择日*/}
.gcim-calendar__month-body__normal-day.gcim-calendar__month-body__common-day.gcim-calendar__month-body__focusd-day{/*焦点日*/}
.gcim-calendar__month-body__normal-day.gcim-calendar__month-body__common-day.gcim-calendar__month-body__focusd-day.gcim-calendar__month-body__today{/*即是焦点日又是今日*/}

复制代码

这里分享一个验证你写的选择器正确与否的方法：在调试工具Ctrl-F查找，输入你写的选择器，文档里会直接标出命中的元素。
image.png91301573.png

选择器都出来了，那还等什么，开始改吧~！

.gcim-calendar__month-body__week-title{
/*星期*/
background:white;
border-top: #dfdfdf solid 0.5px;
font-size:13px;
COLOR:#666666
}
.gcim-calendar__month-body__normal-day{
/*日*/
width:36px;
height: 36px;
font-weight:600;
font-size:16px;
color:#5e5e5e;
border: #dfdfdf solid 0.5px;
transition: all .2s;
}
.gcim-calendar__month-body__normal-day:hover{
box-shadow: 1px 1px 2px 0 #dcdcdc inset;
background: #f3f3f3;
}
.gcim-calendar__month-body__normal-day.gcim-calendar__month-body__common-day{
/*本月日*/
}
.gcim-calendar__month-body__normal-day.gcim-calendar__month-body__trailing-day{
/*非本月日*/
background:#FAFAFA;
color:#C4C4C4;
}
.gcim-calendar__month-body__normal-day.gcim-calendar__month-body__today{
/*今日*/
font-weight:800;
color: #1750d7b3;
text-shadow: 0.025rem 0.05rem 0.1rem #fff, 0 0 black;
}
.gcim-calendar__month-body__normal-day.gcim-calendar__month-body__selected-day{
/*选择日*/
color:white;
background-image: linear-gradient(#6c9af2,#4b7ae9 90%);
border: #485b9e solid 0.5px;
text-shadow: -0.05rem -0.1rem 0 rgb(0 0 0 / 30%);
box-shadow:1px 1px 1px 0 rgba(0,0,0,0.5) inset;
}
.gcim-calendar__month-body__normal-day.gcim-calendar__month-body__common-day.gcim-calendar__month-body__focusd-day{
/*焦点日*/
background:white;
font-weight:800;
color: #1750d7b3;
text-shadow: 0.025rem 0.05rem 0.1rem #fff, 0 0 black;
box-shadow: 0px 0px 2px 1px #4b7ae9 inset;
}
.gcim-calendar__month-body__normal-day.gcim-calendar__month-body__common-day.gcim-calendar__month-body__focusd-day.gcim-calendar__month-body__today{
/*即是焦点日又是今日*/
color:white;
background-image: linear-gradient(#6c9af2,#4b7ae9 90%);
border: #485b9e solid 0.5px;
text-shadow: -0.05rem -0.1rem 0 rgb(0 0 0 / 30%);
box-shadow:1px 1px 1px 0 rgba(0,0,0,0.5) inset;
}

复制代码

一顿魔改之后，有点雏形出来了
image.png325205992.png

这时候我们发现一个问题，无论怎么设置日期的宽度，它始终不能超过27.42，它也并没有被设置max-width，是哪里出问题了吗？
这时候我们就要分析它的布局方式了。我们看到它的元素标签是td，说明套着它的是一个table，而table如果未设置width，其中td的宽度将会根据内容自动，也就是说，我们无法直接通过td的width直接设置单元格宽度。
image.png935194396.png

其实，我现在可以简单粗暴地，直接用一句

table.gcim-calendar__month-body{
width: 250px;
}

复制代码

但如果我以后想改变内部单元格的宽度，我又要找到这个属性，并且拿出计算器算出最合适的宽度。那么有没有什么一劳永逸的办法呢，当然：

table.gcim-calendar__month-body{
width:max-content;
}

复制代码

将width设置为max-content后，table的宽度将跟从内部td的宽度。这样一来，我以后想调整单元格宽度，我就可以直接调整单元格的width属性了，而不用去找到它的父元素table.
image.png33293761.png

第一部分的工作已完成，看着效果还不错，接下来我们要把顶栏的几个按钮和下面的选择今日按钮美化一下
还是先写选择器：

.gcim-calendar__header{/*顶栏*/}
.gcim-calendar__header .cell{/*顶栏按钮*/}
.gcim-calendar__header .gcim-calendar__header__text{/*顶栏-年份*/}
.gcim-calendar__today-button{/*选择今日按钮*/}

复制代码

然后开始写属性。。。
这时候大家是不是觉得，选择器好写，但是写属性就好困难，一次一次修改工程文件中的css，一次次调试，大了调小宽了调窄，黑了调白亮了调暗，实在太麻烦。这里我分享一个所见即所得的调试办法：
首先，在工程内创建一个空白的CSS文件，比如说StyleSheet.css。然后把这个文件，在浏览器调试工具里找出来，具体位置在
网站根目录->GeneratedResources->UserFile
image.png892806396.png