css实现缩进无限嵌套
使用css实现缩进带背景无限嵌套,支持Ie6,代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >Document</ title > < style > *{margin:0;padding:0;} li{list-style:none;} .box{width:300px;height:400px;border:2px solid #ccc;margin:10px;position:relative;} .box li{padding-left:15px;line-height:20px;} .box a{display:block;} .box .bg{position:absolute;z-index:-1;left:0;width:300px;height:20px;background:#ccc;opacity:0;filter:alpha(opacity=0);} .box a:hover .bg{opacity:1;filter:alpha(opacity=100);} </ style > </ head > < body > < div class="box"> < ul > < li > < a href="#">< span class="bg"></ span >12</ a > < ul > < li > < a href="#">< span class="bg"></ span >12</ a > < ul > < li > < a href="#">< span class="bg"></ span >12</ a > < ul > < li >< a href="#">< span class="bg"></ span >12</ a ></ li > < li >< a href="#">< span class="bg"></ span >12</ a ></ li > </ ul > </ li > < li >< a href="#">< span class="bg"></ span >12</ a ></ li > </ ul > </ li > </ ul > </ li > </ ul > </ div > </ body > </ html > |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?