zoukankan      html  css  js  c++  java
  • css实现缩进无限嵌套

    使用css实现缩进带背景无限嵌套,支持Ie6,代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    *{margin:0;padding:0;}
    li{list-style:none;}
    .box{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;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>
    

      

  • 相关阅读:
    Spring自动代理机制
    JUnit4 详解
    struts2 OGNL
    loj4j的配置跟使用
    junit浅学笔记二
    shell变量设置
    zookeeper使用
    [zz]Linux kernel map
    glog 使用中存在的问题
    shell中特殊字符(串)
  • 原文地址:https://www.cnblogs.com/ayseeing/p/4325954.html
Copyright © 2011-2022 走看看