類似windows傳統型程式的書籤頁的介面

最後更新：2018-12-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一直想要實現一個類似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 onclick=secBoard(0) width="10%">關於TBODY標記</TD>
                <TD class=sec1 onclick=secBoard(1) width="10%">關於cells集合</TD>
                <TD class=sec1 onclick=secBoard(2) width="10%">關於tBodies集合</TD>
                <TD class=sec1 onclick=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>指定行做為表體。

<BR>注釋：TBODY要素是塊要素，並且需要結束標

簽。<BR>　　　即使如果表格沒有顯式定義TBODY

要素，該要素也提供給所有表。<BR><BR>

參考：《動態HTML參考和開發應用大全》（人民郵電出

版社
Microsoft Corporation著
北京華中興業科技發展有限公司

譯）

<BR><BR></TD></TR></TB

ODY></TABLE></TD></TR></T

BODY>
<TBODY style="DISPLAY:

none">
<TR>
<TD vAlign=top

align=middle><BR><BR>
<TABLE cellSpacing=0

cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>檢索表行或者整個

表中所有儲存格的集合。<BR>應用於TR、TABLE。

<BR><BR>參考：《動態HTML參考和開發應

用大全》（人民郵電出版社
Microsoft Corporation著
北京華中興業科技發展有限公司

譯）

<BR><BR></TD></TR></TB

ODY></TABLE></TD></TR></T

BODY>
<TBODY style="DISPLAY:

none">
<TR>
<TD vAlign=top

align=middle><BR><BR>
<TABLE cellSpacing=0

cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>檢索表中所有TBODY

對象的集合。對象在該集合中按照HTML源順序排列。

<BR>應用於TABLE。<BR><BR>參考：

《動態HTML參考和開發應用大全》（人民郵電出版社
Microsoft Corporation著
北京華中興業科技發展有限公司

譯）

<BR><BR></TD></TR></TB

ODY></TABLE></TD></TR></T

BODY>
<TBODY style="DISPLAY:

none">
<TR>
<TD vAlign=top

align=middle><BR><BR>
<TABLE cellSpacing=0

cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>設定或者檢索對象

是否被提供。<BR>可能的值為block、none、

inline、list-item、table-header-group、table-

footer-group。<BR>該特性可讀寫，塊要素預設

值為block，內聯要素預設值為inline；層疊樣式表

（CSS）屬性不可繼承。<BR><BR>參考：《

動態HTML參考和開發應用大全》（人民郵電出版社
Microsoft Corporation著

北京華中興業科技發展有限公司譯）

<BR><BR><A

href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp?frame=true"

target=_blank>點擊此處
</A>可參閱微軟<A href="http://msdn.microsoft.com/" target=_blank>MSDN線上</A>上的解釋。

</TD></TR></TBODY></TABLE>

;</TD></TR></TBODY></TABLE&g

t;</body>

</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More