【CSS美化专题】图文列表的妙用
本帖最后由 阿凡佬 于 2022-7-14 09:07 编辑大家好！好久不见了，不知道昨天8.0发布会，大家是否抽到奖品了呢？（我反正连一本书都没抽到T_T）
为庆祝活字格8.0版本上线，我给大家带来了一张咖啡馆的菜单，想喝啥我请客
先看成品
让我们看看它是如何实现的吧！
首先，我们先搭建好页面布局，以及基础数据的录入
我们先做左边菜单部分的样式：新建一个单元格样式，我们给他命名为“菜单”
然后这一步非常重要：一定要把“当前行”和“选择行”都做一点点设置。如果全部未设置，HTML标签的类名不会出现"focus"和"selected"这两个状态，我们便无法用CSS选择器命中这两个状态对应的标签。
这里我把它的五个状态的左外边距设置为1，这样对样式影响最小。
然后右边的图文列表，我们也给他新建一个单元格样式，叫“菜品”
然后在设计器里添加一个空白的CSS文件，再点击运行
接下来的活就可以抛弃设计器了，我们直接用浏览器的开发工具，找到我们刚刚添加的空白的CSS文件，在其中添加一点点代码：
.ForguncyRepeaterCellType-菜单-TEMPLATE {/*整体样式设置*/
background: #FFFFFF;
border: #EEEEEE solid 1px;
transition: ease-in-out .15s;
}
.ForguncyRepeaterCellType-菜单-TEMPLATE::after {/*前面的bar*/
content: "";
height: 0%; /*默认隐藏，当选择时显示*/
width: 3px;
background: #4B7AE9;
position: absolute;
top: 50%;
left: 0%;
transition: ease-in .15s;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
box-shadow: inset 2px 3px 6px -3px #ffffff, inset 4px 0 3px -4px #2f2f2f,1px 0 2px -1px #000000;
}
.ForguncyRepeaterCellType-菜单-TEMPLATE.ForguncyRepeaterCellType-菜单-TEMPLATE-focus {
z-index: 99;
box-shadow: 1px 2px 10px -3px #00000024;
}
.ForguncyRepeaterCellType-菜单-TEMPLATE.ForguncyRepeaterCellType-菜单-TEMPLATE-focus::after {
top: 0%;
height: 100%;/*将前面的bar显示出来*/
}让我们看看效果
还行~
在浏览器内编辑的代码，一定不要忘了，把它复制再粘贴回设计器中的CSS文件哦，不然浏览器一关，好，前功尽弃~！
现在给菜品部分，添加一点点代码。对了，在这之前，先在设计器中排版好菜品的内容格式
.ForguncyRepeaterCellType-菜品-TEMPLATE {
/*整体样式设置*/
background: #FFFFFF;
border: #EEEEEE solid 1px;
transition: ease-in-out .15s;
border-radius: 10px !important;
/*一般来讲，圆角应当直接在设计器里设置，而不是像这样用!important关键字去覆盖*/
margin-top: 4px;
}
.ForguncyRepeaterCellType-菜品-TEMPLATE::after {
content: "";
position: absolute;
background: var(--FGC_Accent1, #4B7AE9);
height: 100%;
width: 0px;
opacity: 0;
top: 0;
left: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
transition: ease-out .15s;
box-shadow: inset -6px 0 6px -6px #00000069;
}
.ForguncyRepeaterCellType-菜品-TEMPLATE:hover::after {
width: 8px;
opacity: 1;
}
.ForguncyRepeaterCellType-菜品-TEMPLATE>div {
transition: ease-out .15s;
}
.ForguncyRepeaterCellType-菜品-TEMPLATE:hover>div {
margin-left: 4px;
}让我们看看效果
在鼠标移过的时候，有一个动态效果，用户能够准确判断鼠标位置
CSS部分完成了，接下来让我们回到设计器，既然是编辑页面，我们当然得增加一些编辑功能
但是现在看这个页面，是不是觉得，很多不必要的按钮出现在页面上，使整个页面变得杂乱了。如果能够使除用户焦点之外的按钮隐藏，那么页面能够变得很整洁
现在让我们直点今天的主题：图文列表的妙用
我们知道，在设计器中我们可以用条件格式判断一个单元格的值，并设置其禁用、不可见和只读。因此，我们只需要一个值，能够指示是否当前行即可但是图文列表的关联列只提供了 行选择状态 ，并未提供当前行呀
其实我们完全可以在表格的当前行变更命令中，模拟出一个指示当前行的列
如此两行命令即可。
之后，在图文列表模板页内添加一个隐藏列，再将按钮的条件格式设置为：
让我们来看看效果吧
然后有格友提出要求了，我想让右边菜品栏的编辑按钮，鼠标悬停在卡片上方时显示，该如何实现呢？
这时候条件格式失去作用了，我们又需要把目光回到CSS上
我们先给这个按钮赋一个CSS类名：悬停显示
.ForguncyRepeaterCellType-菜品-TEMPLATE .悬停显示
然后这个选择器，便能准确命中这个按钮了。
接下来就是我们为所欲为的时候了，简简单单几行代码，就实现了悬停显示的效果
.ForguncyRepeaterCellType-菜品-TEMPLATE .悬停显示{
opacity:0;
transition: ease-out .2s;
}
.ForguncyRepeaterCellType-菜品-TEMPLATE:hover .悬停显示{
opacity:1;
}
好了，大功告成！以下是这次的工程文件和源码
**** Hidden Message *****
本帖最后由 阿凡佬 于 2022-7-9 15:22 编辑
第一期：【CSS美化专题】用CSS美化表格删除按钮
第二期：【CSS美化专题】原生日历控件美化
第三期：【CSS美化专题】单选框组件美化——在拟物化的岔路上越走越远
第四期：【CSS美化专题】更美观的下拉窗口
第五期:【CSS美化专题】不一样的菜单用法
第六期:【CSS美化专题】图文列表的妙用
本帖最后由 阿凡佬 于 2022-7-9 15:21 编辑
（搞错了，请版主删掉此楼，谢谢） 玉心菩提 发表于 2022-7-16 15:32
大神，这是8.0才能用吗？
7.0应该也能用的 小白学习了 学习 我乖，越来越精致了，特别好，感谢作者的用心:) :hjyzw: :lol:lol:lol:lol:lol:lol:lol:lol:lol:lol 学习了，留言纪念
页:
[1]