网页特效----HTML中树的实现方法

利用javascirpt我们可以很容易的在 HTML中实现树，而不需要使用ASP,JSP,PHP等等编写动态程序，当然如果要和数据库结合，下面的代码也很容易移植。 　　利用javascirpt我们可以很容易的在HTML中实现树，内容来自站长资讯网 (www.chinahtml.com)而不需要使用ASP,JSP,PHP等等编写动态程序，当然如果要和数据库结合，下面的代码也很容易移植。 　　首先，我们看一下实现这个树形结构的javascript代码。 　　common.js 以下是引用片段： 　　下面是实现树的静态HTML文件，内容来自站长资讯网(www.chinahtml.com)很简单的啊。 　　example1.html 以下是引用片段： rel="stylesheet" href="tree.css" type="text/css" media="screen" />

• Section 1
• Section 2
  • Section 2.1
  • Section 2.2
  • Section 2.3
    • Section 2.3.1
    • Section 2.3.2
  • Section 2.4
• Section 3

下面是树的样式表 tree.css body { font-family: Verdana, Arial, Sans-Serif; font-size: small; background-color: #ffffff; } ul#menu { border: solid 1px #333333; border-top-width: 15px; padding: 10px; padding-top: 6px; margin: 0px; width: 200px; } ul#menu li { margin: 0px; list-style-type: none; border: solid 1px #ffffff; } ul#menu li ul { margin: 0px 0px 0px 15px; display: none; } ul#menu li a { background-image: url(closed.gif); background-repeat: no-repeat; background-position: 0px 4px; text-indent: 15px; display: block; text-decoration: none; color: #333333; } ul#menu li a:hover { color: #000000; background-color: #eeeeee; background-image: url(open.gif); } 　　好了，到这里为止，内容来自站长资讯网 (www.chinahtml.com)我们已经实现了这个树，大家不妨亲自演示一下。