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{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>

  

时间: 2024-10-31 18:38:56

css实现缩进无限嵌套的相关文章

css换行缩进

1.换行缩进 <div id="alertiframe"> <span id="closeiframe">×</span> <p style="font-size:16px;font-weight:bold;text-align:center;text-indent:-35px;margin-left:40px">提现政策</p> <p style="text-inden

css盒模型div嵌套制作网页块状部分案例

html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/margingpadding.css"/> </head> <body>

HTML与CSS入门——第五章 使用文本块和列表

知识点: 1.在页面上对齐文本的方法 2.三种HTML列表的使用方法 3.在列表中放置列表的方法 5.1 在页面上对齐文本: 父元素内子元素文本的居中:在控制父元素的text-align:center 子元素相对于父元素的居中:在控制子元素的margin:0 auto; PS:div指的是division(分组). 5.2 三种HTML列表: <ol>...<li>:有序列表,整列表有缩进,每个列表项前有数字或者字母 <ul>...<li>:无序列表,与有序

div标签嵌套原则详解(转载)

这个也许平时人们不注意,但是非常有用,尤其是当你实在找不到原因为什么网页显示错误的时候. XHTML 的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span. strong--我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套也需要有一定规则,不能任由自己的个人习惯胡乱嵌套--XHTML 必竟不是 XML. 在 XHTML 的语言里,我们都知道:ul 标签包含着 li.dl 标签包含着 dt 和 dd--这些固定标签的嵌套规则十分

HTML/CSS/JS编码规范

最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签要写alt属性,如果没有就写一个空的.但是一般要写一个有内容的,根据图片想要表达的意思,因为alt是在图片无法加载时显示的文字.如下不太好的写法: <img src="company-logo.svg" alt="ABC Company Logo"> 更好的

CSS预处理器SASS学习总结

写在前面的话:如果你css写了很多了,不妨换一种方式来写写css,也许会提高效率,SASS是我比较喜欢的一种.css本来就不是太难,所以也仅仅介绍SASS常用的用法,避免复杂化,后续用到新的东西,可以再进行拓展. ======正文开始====== 我们可以通过一种类似css的编程语言编写代码,保存为.scss后缀名的文件,然后使用SASS进行处理为css文件,而这种.scss文件中可以有变量.嵌套等功能,有些编程的味道:同时.scss文件也能够通过SASS处理为压缩的.缩进的等不同风格的css代

XHTML嵌套规则

XHTML的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span. strong--我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套也需要有一定规则,不能任由自己的个人习惯胡乱嵌套-- XHTML 必竟不是 XML.在 XHTML 的语言里,我们都知道:ul 标签包含着 li.dl 标签包含着 dt 和 dd--这些固定标签的嵌套规则十分明确.但是,还有许多标签是独立的,它们没有被捆绑在一起,比如 h1.div.p--那么这些标

【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4588 一.开篇之言 要说web上实现两栏自适应布局的方法,一双手都数不过来.不知大家有没有细想过,为什么这些方法可以实现自适应布局呢? 本文就将深入探讨下流体特性和BFC特性下的两栏自适应布局,还是

很有必要了解的HTML嵌套规则

最近在重新学习HTML的知识,算是对HTML的一个重新认识吧!别小看了这东西,一切的网页可都是以它为基础的!下面就详细归纳一下HTML标签的嵌套规则吧,希望对大家有所帮助. XHTML的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span. strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套也需要有一定规则,不能任由自己的个人习惯胡乱嵌套—— XHTML 必竟不是 XML. 在 XHTML 的语言里,我们都知道:u