类似windows桌面程序的书签页的界面

最新推荐文章于 2024-06-24 15:04:56 发布

iteye_17312

最新推荐文章于 2024-06-24 15:04:56 发布

阅读量107

点赞数

一直想要实现一个类似windows桌面程序的书签页的界面，今天在网上搜索网页图片素材时，无意中看到了一个类似的程序，先收录下来，以便以后借鉴和在此基础上采用div+css的设计思想进行改写。

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效代码|JsCode.CN|---经典实用的触发型导航菜单</title>

</head>

<body>

<STYLE type=text/css>.sec1 {
BORDER-RIGHT: gray 1px solid; BORDER-TOP:

#ffffff 1px solid; BORDER-LEFT: #ffffff 1px

solid; CURSOR: hand; COLOR: #000000; BORDER-

BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR:

#eeeeee
}
.sec2 {
BORDER-RIGHT: gray 1px solid; BORDER-TOP:

#ffffff 1px solid; FONT-WEIGHT: bold; BORDER-

LEFT: #ffffff 1px solid; CURSOR: hand; COLOR:

#000000; BACKGROUND-COLOR: #d4d0c8
}
.main_tab {
BORDER-RIGHT: gray 1px solid; BORDER-

LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-

BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8
}
</STYLE>

<SCRIPT language=javascript>
function secBoard(n)
{
for(i=0;i<secTable.cells.length;i++)
secTable.cells

[i].className="sec1";
secTable.cells[n].className="sec2";
for(i=0;i<mainTable.tBodies.length;i++)
mainTable.tBodies

[i].style.display="none";
mainTable.tBodies

[n].style.display="block";
}
</SCRIPT>

<TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0>
<TBODY>
<TR align=middle height=20>
<TD class=sec2 οnclick=secBoard(0) width="10%">关于TBODY标记</TD>
<TD class=sec1 οnclick=secBoard(1) width="10%">关于cells集合</TD>
<TD class=sec1 οnclick=secBoard(2) width="10%">关于tBodies集合</TD>
<TD class=sec1 οnclick=secBoard(3) width="10%">关于display属性</TD></TR></TBODY></TABLE>
<TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 width=549 border=0>
<TBODY style="DISPLAY: block">
<TR>
<TD vAlign=top align=middle><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
<TBODY>
<TR>
<TD>指定行做为表体。