【CSS美化专题】原生日历控件美化
本帖最后由 阿凡佬 于 2022-4-10 13:24 编辑上一周的分享取得了不错的反响，为了让大家做出更美观的系统为了产品周报的那1000金币，我决定把这个系列继续做下去，尽量保持每周日更新一期内容
这期分享之前我发的贴子 纯CSS锤子风格日历 中的日历是如何制作的。
原生的日历，是这样的
第一步万年不变，写选择器。
通过F12检查元素发现，这个日历有4个组成部分，分别是
这只是其中一个状态，当你点击顶栏的放大和缩小按钮后，还能跳出一个月份选择器，它的类名为gcim-calendar__year-view，
再来分析按钮状态，众所周知，按钮有5个状态：Normal(一般态), Hover(鼠标经过时), Active(激活时), Focus(焦点停留时), Disabled(不可用时) 有些人说是4个状态, disabled不算，这里不作讨论。一般来说，这5个状态中的后四个都会用4个伪类表示，分别是 :hover, :active, :focus, :disable 。
现在让我们来看下在这个日历中，是怎么表示的
我们发现这个日历中按钮的选择状态样式并不是用伪类表示，而是直接用了类名去赋予按钮属性。这样一来，就更简单了。
一通分析下来，我们的主体部分的选择器就写出来了
.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查找，输入你写的选择器，文档里会直接标出命中的元素。
选择器都出来了，那还等什么，开始改吧~！
.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;
}一顿魔改之后，有点雏形出来了
这时候我们发现一个问题，无论怎么设置日期的宽度，它始终不能超过27.42，它也并没有被设置max-width，是哪里出问题了吗？
这时候我们就要分析它的布局方式了。我们看到它的元素标签是td，说明套着它的是一个table，而table如果未设置width，其中td的宽度将会根据内容自动，也就是说，我们无法直接通过td的width直接设置单元格宽度。
其实，我现在可以简单粗暴地，直接用一句
table.gcim-calendar__month-body{
width: 250px;
}
但如果我以后想改变内部单元格的宽度，我又要找到这个属性，并且拿出计算器算出最合适的宽度。那么有没有什么一劳永逸的办法呢，当然：
table.gcim-calendar__month-body{
width:max-content;
}将width设置为max-content后，table的宽度将跟从内部td的宽度。这样一来，我以后想调整单元格宽度，我就可以直接调整单元格的width属性了，而不用去找到它的父元素table.
第一部分的工作已完成，看着效果还不错，接下来我们要把顶栏的几个按钮和下面的选择今日按钮美化一下
还是先写选择器：
.gcim-calendar__header{/*顶栏*/}
.gcim-calendar__header .cell{/*顶栏按钮*/}
.gcim-calendar__header .gcim-calendar__header__text{/*顶栏-年份*/}
.gcim-calendar__today-button{/*选择今日按钮*/}然后开始写属性。。。
这时候大家是不是觉得，选择器好写，但是写属性就好困难，一次一次修改工程文件中的css，一次次调试，大了调小宽了调窄，黑了调白亮了调暗，实在太麻烦。这里我分享一个所见即所得的调试办法：
首先，在工程内创建一个空白的CSS文件，比如说StyleSheet.css。然后把这个文件，在浏览器调试工具里找出来，具体位置在
网站根目录->GeneratedResources->UserFile
我们就可以在这个文件里随时修改，并且修改出来的属性能够实时地反映到页面上。我在写这篇帖子的时候，就是用这个办法，实时调试，给大家做演示。是不是很方便呢？
并且写完了之后，右键，另存为保存到本地，然后替换工程内原本的文件，这样就完成了一次更新。
回到正题。。
.gcim-calendar__header{
/*顶栏*/
height:36px;
}
.gcim-calendar__header .cell{
/*顶栏按钮*/
width: 32px;
height: 32px;
background-size:28px 28px;
background-position:center center;
float: left;
}
.gcim-calendar__header .gcim-calendar__header__text{
/*顶栏-年份*/
font-size: 16px;
font-weight:600;
padding-top:4px;
text-shadow: 0.05rem 0.05rem 0.1rem #fff, 0 0 black;
color: rgba(0, 0, 0, .6) !important;
margin-left:24px;
width:120px;
height:32px;
}
.gcim-calendar__today-button{
/*选择今日按钮*/
font-size: 16px;
font-weight:600;
padding-top:6px;
text-shadow: 0.05rem 0.05rem 0.1rem #fff, 0 0 black;
color: rgba(0, 0, 0, .6) !important;
height:32px;
margin:4px;
margin-right:0px;
border:#DFDFDF solid 0.5px;
border-radius:8px;
}
经过不断地修改，调整，终于调试出一个看着最顺眼的排版（也就只是调了下字体大小和对齐方式）
不过底部那个选择今日，我样式既然做成按钮了，怎么能缺了交互动作呢？那么接下来给底部的按钮添加:hover伪类以及:active伪类，这样这个按钮在鼠标移过和按下时，能给用户一个反馈
.gcim-calendar__today-button:hover{
color:white !important;
background-image: linear-gradient(#6c9af2,#4b7ae9 90%);
border: #485b9e solid 0.5px;
text-shadow: 0.1rem 0.05rem 0 rgb(0 0 0 / 30%);
box-shadow:1px 1px 1px 0 rgba(255,255,255,0.5) inset;
}
.gcim-calendar__today-button:active{
color:white !important;
background-image: linear-gradient(#4b7ae9,#6c9af2 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;
}
挺好看，binglingbingling的，嘿嘿。
其实到这，我们可以结束今天的分享了，看下最终的成果，感觉很有成就感有木有！
。
。
。
但是气氛都烘托到这了，再不添加“亿点点”特效，感觉都对不太起这么好看的界面
以下是工程文件和源码（工程文件是8.0的）
**** Hidden Message *****
老生常谈一句：大家的回帖就是我发帖的动力
另外，我也是在不断学习的过程中，给大家分享的同时也为了巩固我自身的技术。如果有误区，欢迎大佬指正！
本帖最后由 阿凡佬 于 2022-7-9 15:23 编辑
第一期：【CSS美化专题】用CSS美化表格删除按钮
第二期：【CSS美化专题】原生日历控件美化
第三期：【CSS美化专题】单选框组件美化——在拟物化的岔路上越走越远
第四期：【CSS美化专题】更美观的下拉窗口
第五期:【CSS美化专题】不一样的菜单用法
第六期:【CSS美化专题】图文列表的妙用
厉害 膜拜大佬 顶楼主啦..希望楼主多发精品好帖啦..... 必须给大佬安排一个;P 不错，学习了 这个要好好学习的
本帖最后由 chenjamo 于 2022-4-22 17:30 编辑
看了下工程文件，里面直接将CSS文件放在工程文件中发布，也没有在CSS类名中添加，那是否活字格的CSS先调用的自定义发布的CSS 确实不错，学习了