第一步：
treeX.html
<title>CSS 树形菜单</title>
<link href="treeX.css" rel="stylesheet" type="text/css" />
<body>
<div id="TreeMenu">
<h4>CSS 树形菜单</h4>
<ul>
<li class="opened"><img src="img/s.gif" width="1" height="1" onClick="javascript:ChangeStatus(this);"/ ><ahref="#" onClick="javascript:ChangeStatus(this);">根结点</a></li>
<ul>
<li class="opened"><img src="img/s.gif" width="1" height="1" onClick="javascript:ChangeStatus(this);"/><ahref="#" onClick="javascript:ChangeStatus(this);">新闻</a></li>
<ul>
<li class="child"><img src="img/s.gif" width="1" height="1" /><ahref="#">新浪</a></li>
<li class="child"><img src="img/s.gif" width="1" height="1"/><ahref="#">CSDN</a></li>
</ul>
<li class="closed"><img src="img/s.gif" width="1" height="1"/><ahref="#"onClick="javascript:ChangeStatus(this);">学习</a></li>
<li class="closed"><img src="img/s.gif" width="1" height="1"/><ahref="#"onClick="javascript:ChangeStatus(this);">体育</a></li>
</ul>
</ul>
</div>
</body>
第二步：
treeX.css
* { margin: 0px;padding: 0px;}
body {
"宋体";
font-size: 12px;
text-decoration: none;
text-align: left;
margin-top: 10px;
margin-left: 20px;
}
h4 {
text-align: center;
font-size: 18px;
}
#TreeMenu{
height: 200px;
width: 300px;
background-color: #DDDDF4;
border: 1px solid #6F6FDB;
padding: 10px;
}
#TreeMenuul {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 17px;
padding:0;
}
#TreeMenu li {
list-style-type: none;
padding:0;
cursor: hand;
}
#TreeMenu img
{
height: 18px;
width: 34px;
vertical-align: middle;
}
/* 顺序应为:.opened --->.closed ---> .child */
/* 各内容之间必须有空格:.#TreeMenu .opened img */
#TreeMenu .opened img {
background-image: url(img/opened.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#TreeMenu .closed img {
background-image: url(img/closed.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#TreeMenu .child img {
background-image: url(img/child.gif);
background-repeat: no-repeat;
background-position: 15px 2px;
}
#TreeMenu a , #TreeMenu a:visited {
text-decoration: none;
color: #000000;
}
.closed ul
{ display:none;}
分析:
1、 margin-left: 17px; /*--实现左缩进关键部分--*/
2、 list-style-type: none; /*--实现消除项目符号关键部分--*/
3、 vertical-align: middle; /*--实现图文混排时的文本垂直居中关键部分--*/
4、 background-position: 15px 2px; /*--实现背景图的定位--*/
5、 .closed ul{ display:none;} /*--实现子菜单项的隐藏--*/
第三步：
在<head></head>之间复制JAVASCRIPT代码（了解）
<script language=jscript>
function ChangeStatus(o)
{
if (o.parentNode)
{
if (o.parentNode.className == "opened")
{
o.parentNode.className = "closed";
}
else
{
o.parentNode.className = "opened";
}
}
}
</script>
效果演示如下:
分享到：
相关推荐
1996年12月17日W3C(The World Wide Web Consortium)推出了css1规范, 自CSS1的版本之后，又在1998年5月12日发布了CSS2.0版本。目前最新版本为css3。 CSS层叠样式表 教学内容 HTML与CSS的关系 HTML与XHTML DOCTYPE...
本书共分为4篇，分别是CSS基础篇、CSS中级篇、CSS高级篇、实例应用篇。各篇的主要内容如下： 第一篇：CSS基础篇（第1～3章）。本篇主要介绍了CSS的概念、CSS文件的导入方法、CSS中的注释、CSS中的单位，还介绍了CSS...
编写HTML网页，熟悉并掌握HTML常用标签的使用，掌握CSS的语法和应用。
<?xml-stylesheet type="text/css" href="cd_catalog.css"?> <TITLE>Empire Burlesque <ARTIST>Bob Dylan <COUNTRY>USA <COMPANY>Columbia <PRICE>10.90 <YEAR>1985 <TITLE>Hide your heart <ARTIST>Bonnie ...
这个是css和xml的高级运用，是针对有css基础的朋友看的
欢迎来到梦之都http://www.dreamdu.com/xhtml/tag_html/ 4.2. HTML html 标签 html 标签 -- 代表HTML文档的开始 • html标签是成对出现的,以开始, 结束 • 引用网址:http://www.dreamdu.com/xhtml/tag_html/ • ...
java零基础自学 之 JAVA相关 JS、HTML、CSS、XML java零基础自学 之 JAVA相关 JS、HTML、CSS、XML
XML技术大作业 XML基础教程 XML实用教程 XML指南
关于XML的课件文档，主要是基础，包括XML基础、XSL、SAX、数据岛、XPath、CSS修饰XML文档等等。
第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.2 使用CSS控制页面 1.3 体验CSS 第2章 CSS的基本语法 2.1 CSS选择器 2.2 选择器声明 2.3 CSS的继承 第3章 用...
web开发必备，含：ajax实战中文版.pdf，CSS中文手册.chm、Div+CSS 布局.pdf，DOM文档.chm、HTML基础.chm、xml手册.chm，正则表达式.CHM，JS宝典.chm
《XML 基础教程》系统地阐述了XML的基本概念和语法规则，介绍了如何用DTD与XML Schema来确保XML文档的有效性，讲述了使用CSS与XSL样式表来显示和转换XML文档的各个步骤，探讨了使用DSO与DOM访问XML文档的各种方法。...
第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.2 使用CSS控制页面 1.3 体验CSS 第2章 CSS的基本语法 2.1 CSS选择器 2.2 选择器声明 2.3 CSS的继承 ...
xml是w3c组织提出的一种可扩展性的标记语言，是独立于计算机平台的数据交换规范，PPT主要包括了xml概述，xml语法，文档类型定义，css,xslt,文档对象模型，xml与数据库等知识篇章，同时提供相关章节的例题源代码
第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.2 使用CSS控制页面 1.3 体验CSS 第2章 CSS的基本语法 2.1 CSS选择器 2.2 选择器声明 2.3 CSS的继承 第3章 用...
在你继续之前你应该具有下面一些基础的知识： WWW, HTML 和设计网页的基础知识 网页脚本语言，比如JavaScript 或者VBScript 你最好在学习XML之前就了解上面的内容，因为在XML的学习过程中将用到这些知识。
本书介绍ASP＋XML＋CSS的知识与应用，全书各知识点均配以实例，按照基础知识、实战实例和综合实例的顺序，循序渐进、由浅入深地进行讲解。
通过本课程的学习，使学生掌握XML应用基础知识，具备使用XML开发Web站点必备的基础知识、在XML中如何使用DTD，XML Schema知识、XML样式表、使用CSS格式格式化XML，XSL样式表，名称空间、XML DOM与XPath，以及XML的...
xml基础的实验，包括xsl ，dtd检验，css成跌样式文档 xml基础的实验，包括xsl ，dtd检验，css成跌样式文档
XML基础教案ppt，XML基础教程new源代码