【CSS美化专题】图文列表的妙用

大家好！好久不见了，不知道昨天8.0发布会，大家是否抽到奖品了呢？（我反正连一本书都没抽到T_T）

为庆祝活字格8.0版本上线，我给大家带来了一张咖啡馆的菜单，想喝啥我请客
先看成品



让我们看看它是如何实现的吧！

首先，我们先搭建好页面布局，以及基础数据的录入


我们先做左边菜单部分的样式：新建一个单元格样式，我们给他命名为“菜单”
然后这一步非常重要：一定要把“当前行”和“选择行”都做一点点设置。如果全部未设置，HTML标签的类名不会出现"focus"和"selected"这两个状态，我们便无法用CSS选择器命中这两个状态对应的标签。

这里我把它的五个状态的左外边距设置为1，这样对样式影响最小。
然后右边的图文列表，我们也给他新建一个单元格样式，叫“菜品”


然后在设计器里添加一个空白的CSS文件，再点击运行





接下来的活就可以抛弃设计器了，我们直接用浏览器的开发工具，找到我们刚刚添加的空白的CSS文件，在其中添加一点点代码：

1. .ForguncyRepeaterCellType-菜单-TEMPLATE {/*整体样式设置*/
   
2.     background: #FFFFFF;
   
3.     border: #EEEEEE solid 1px;
   
4.     transition: ease-in-out .15s;
   
5. }
   
6. 
   
7. .ForguncyRepeaterCellType-菜单-TEMPLATE::after {/*前面的bar*/
   
8.     content: "";
   
9.     height: 0%; /*默认隐藏，当选择时显示*/
   
10.     width: 3px;
    
11.     background: #4B7AE9;
    
12.     position: absolute;
    
13.     top: 50%;
    
14.     left: 0%;
    
15.     transition: ease-in .15s;
    
16.     border-top-left-radius:3px;
    
17.     border-bottom-left-radius:3px;
    
18.     box-shadow: inset 2px 3px 6px -3px #ffffff, inset 4px 0 3px -4px #2f2f2f,1px 0 2px -1px #000000;
    
19. }
    
20. 
    
21. .ForguncyRepeaterCellType-菜单-TEMPLATE.ForguncyRepeaterCellType-菜单-TEMPLATE-focus {
    
22.     z-index: 99;
    
23.     box-shadow: 1px 2px 10px -3px #00000024;
    
24. }
    
25. 
    
26. .ForguncyRepeaterCellType-菜单-TEMPLATE.ForguncyRepeaterCellType-菜单-TEMPLATE-focus::after {
    
27.     top: 0%;
    
28.     height: 100%;/*将前面的bar显示出来*/
    
29. }

复制代码

让我们看看效果

还行~

在浏览器内编辑的代码，一定不要忘了，把它复制再粘贴回设计器中的CSS文件哦，不然浏览器一关，好，前功尽弃~！

现在给菜品部分，添加一点点代码。对了，在这之前，先在设计器中排版好菜品的内容格式

1. .ForguncyRepeaterCellType-菜品-TEMPLATE {
   
2.     /*整体样式设置*/
   
3.     background: #FFFFFF;
   
4.     border: #EEEEEE solid 1px;
   
5.     transition: ease-in-out .15s;
   
6.     border-radius: 10px !important;
   
7.     /*一般来讲，圆角应当直接在设计器里设置，而不是像这样用!important关键字去覆盖*/
   
8.     margin-top: 4px;
   
9. }
   
10. .ForguncyRepeaterCellType-菜品-TEMPLATE::after {
    
11.     content: "";
    
12.     position: absolute;
    
13.     background: var(--FGC_Accent1, #4B7AE9);
    
14.     height: 100%;
    
15.     width: 0px;
    
16.     opacity: 0;
    
17.     top: 0;
    
18.     left: 0;
    
19.     border-top-left-radius: 10px;
    
20.     border-bottom-left-radius: 10px;
    
21.     transition: ease-out .15s;
    
22.     box-shadow: inset -6px 0 6px -6px #00000069;
    
23. }
    
24. 
    
25. .ForguncyRepeaterCellType-菜品-TEMPLATE:hover::after {
    
26.     width: 8px;
    
27.     opacity: 1;
    
28. }
    
29. 
    
30. .ForguncyRepeaterCellType-菜品-TEMPLATE>div {
    
31.     transition: ease-out .15s;
    
32. }
    
33. 
    
34. .ForguncyRepeaterCellType-菜品-TEMPLATE:hover>div {
    
35.     margin-left: 4px;
    
36. }

复制代码

让我们看看效果

在鼠标移过的时候，有一个动态效果，用户能够准确判断鼠标位置

CSS部分完成了，接下来让我们回到设计器，既然是编辑页面，我们当然得增加一些编辑功能

但是现在看这个页面，是不是觉得，很多不必要的按钮出现在页面上，使整个页面变得杂乱了。如果能够使除用户焦点之外的按钮隐藏，那么页面能够变得很整洁
现在让我们直点今天的主题：图文列表的妙用

我们知道，在设计器中我们可以用条件格式判断一个单元格的值，并设置其禁用、不可见和只读。因此，我们只需要一个值，能够指示是否当前行即可但是图文列表的关联列只提供了 行选择状态 ，并未提供当前行呀

其实我们完全可以在表格的当前行变更命令中，模拟出一个指示当前行的列


如此两行命令即可。
之后，在图文列表模板页内添加一个隐藏列，再将按钮的条件格式设置为：
让我们来看看效果吧


然后有格友提出要求了，我想让右边菜品栏的编辑按钮，鼠标悬停在卡片上方时显示，该如何实现呢？
这时候条件格式失去作用了，我们又需要把目光回到CSS上
我们先给这个按钮赋一个CSS类名：悬停显示

.ForguncyRepeaterCellType-菜品-TEMPLATE .悬停显示
然后这个选择器，便能准确命中这个按钮了。
接下来就是我们为所欲为的时候了，简简单单几行代码，就实现了悬停显示的效果

1. .ForguncyRepeaterCellType-菜品-TEMPLATE .悬停显示{
   
2.     opacity:0;
   
3.     transition: ease-out .2s;
   
4. }
   
5. .ForguncyRepeaterCellType-菜品-TEMPLATE:hover .悬停显示{
   
6.     opacity:1;
   
7. }

复制代码

好了，大功告成！以下是这次的工程文件和源码

游客，如果您要查看本帖隐藏内容请回复

第一期：【CSS美化专题】用CSS美化表格删除按钮
第二期：【CSS美化专题】原生日历控件美化  
第三期：【CSS美化专题】单选框组件美化——在拟物化的岔路上越走越远
第四期：【CSS美化专题】更美观的下拉窗口
第五期:  【CSS美化专题】不一样的菜单用法
第六期:  【CSS美化专题】图文列表的妙用

好牛

好牛

学到了学到了牛逼

想看看源码

感谢

这个教程好详细，谢谢楼主