html目录树

html-css022

html目录树,第1张

我把第一列目录变成了三级结构，代码如下：

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>无标题文档</title>

<script language="JavaScript" type="text/JavaScript">

<!--

function menus(str,picId){

var obj, pic

// 返回 str 对象和 picId 对象是否存在

if (document.getElementById(str) &&document.getElementById(picId)){

obj=document.getElementById(str)//obj 为 DIV 对象

pic=document.getElementById(picId)//pic 为 图片对象

if (obj.style.display == "none"){ //如果DIV对象的 display 样式值为 none 的话

obj.style.display = ""//就将 display 的样式清空

pic.src = "0001.jpg"//更改图片对象的路径

}else{

obj.style.display = "none"

pic.src = "0000.jpg"

}

}

}

//-->

</script>

<style type="text/css">

<!--

.div1 {

cursor: hand

width: 100px

}

.div1_1{

cursor: hand

width: 100px

color: #666666

font-size: 14px

}

.div2 {

color: #666666

font-size: 12px

}

-->

</style>

</head>

<body>

<!--第一列的树-->

<div onClick="menus('menu1', 'pic1')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic1">语文</div>

<div id="menu1" style="display:none" class="div2">

<div onClick="menus('menu1_1', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1">文言文</div><br/>

<div id="menu1_1" style="display:none" class="div2">

文言文1

</div>

<div onClick="menus('menu1_2', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1">作文</div>

<div id="menu1_2" style="display:none" class="div2">

作文1

</div>

<div onClick="menus('menu1_3', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1">语法</div>

<div id="menu1_3" style="display:none" class="div2">

语法1

</div>

</div>

<!--第二列的树-->

<div onClick="menus('menu2', 'pic2')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic2">数学</div>

<div id="menu2" style="display:none" class="div2">

代数<br/>

几何<br/>

</div>

<!--第三列的树-->

<div onClick="menus('menu3', 'pic3')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic3">副科</div>

<div id="menu3" style="display:none" class="div2">

地理<br/>

生物<br/>

历史<br/>

</div>

<div onClick="menus('menu4', 'pic4')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic4">副科</div>

<div id="menu4" style="display:none" class="div2">

地理<br/>

生物<br/>

历史<br/>

</div>

</body>

</html>

学习HTML5是需要先去学习html的，这里我给一个目录树，

html >>css >>js >>html5 css3

学js的时候建议和书配套，主入门，书主细节、深入。

至于html和css可以看看学习，初期学习不一定要求那么高，要精通，有大概的映像就行，在后面学习用的机会很多，在使用中自然就熟悉了，当然代码是一定要多写的。

为了安全性，现在的浏览器厂商已经禁用了对本地磁盘文件操作的API。

最多可以写点cookie到客户端，而且限制还很多

所以只要是浏览器里面的类似js这样的脚本语言都是不能对客户端的本地文件进行操控的