网站设计与制作的基本步骤,如何设计企业网站,福州婚庆网站建设哪家好,python 网站开发 环境效果图如下#xff1a; 背景#xff1a; 如上图#xff0c;之前只是当纯的写一个参考货架平面图#xff0c;用作物料系统的在库状态可视化#xff0c;当完成页面body分成10等份时#xff0c;货架之间需要有通道#xff0c;为了实现实际的样式#xff0c;我给每个等份都…效果图如下 背景 如上图之前只是当纯的写一个参考货架平面图用作物料系统的在库状态可视化当完成页面body分成10等份时货架之间需要有通道为了实现实际的样式我给每个等份都添加了margin-right: 4%然后即将上线时用户说希望这些通道标注上‘通道’两个字因为不想大改的原因我就找文心一言给我实现在margin-right中怎么添加文字结果还真就可以给我提供了after这个关键字最终实现如下 #gudinghuojia2F .layui-col-xs10:not(:last-child)::after {content: 通道; /* 在 div 右侧添加文字 */position: absolute;top: 40%;font-size: xxx-large;left: 110%;color: #c9750582;
}#gudinghuojia2F .layui-col-xs10 {margin-right: 4%;}/*以下是我的货架 效果图 layui-row这个div分成了lay.zhong等份
而我在这若干等份中添加了margin-right: 4%实际是当作货架之间的通道但是用户希望显示通道2个字但页面都已经实现了我就想着怎么在边框中显示文字也就是margin-right中
最后发现使用after就能实现layui-col-xs10:not(:last-child)::after{ content: 通道; /* 在 div 右侧添加文字 */ position: absolute;}而因为最后一个货架之后是不需要添加通道的因此我添加了not(:last-child)也就是排除了最后一个*/div idgudinghuojia2F th:if${cc CP-2F } styleheight: 100%;div classlayui-row div stylefont-size: xx-large; font-family: fantasy; color: #031cdd; z-index: 999;!--列号--div styleheight:10%;/divdiv th:styleappendheight: calc(90% / ${lay.lie}) th:eachiii : ${#numbers.sequence(lay.lie, 1, -1)} th:text${iii}/div/divdiv classlayui-col-xs10 th:eachi : ${#numbers.sequence(lay.zhong, 1, -1)} div classinner-title th:text${lay.da - i}/divdiv classinner-div th:eachii : ${#numbers.sequence(lay.lie, 1, -1)} th:id${lay.da - i -1- ii} th:styleappendheight: calc(80% / ${lay.lie})/div/div/divdiv classwaitongdao 外通道/div
/div
