I always wanted to implement a page similar to the bookmarks page of a Windows desktop program. Today, when I searched for webpage image materials on the Internet, I accidentally saw a similar program, which was first recorded, in this way, we can use the DIV + CSS design idea for future reference and on this basis to rewrite it.
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> webpage special effect code | jscode. cn | --- typical and practical trigger navigation menu </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>
<! -- JavaScript part -->
<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>
<! -- HTML -->
<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 tag </TD>
<TD class = sec1 onclick = secboard (1) width = "10%"> about cells set </TD>
<TD class = sec1 onclick = secboard (2) width = "10%"> about the tbodies set </TD>
<TD class = sec1 onclick = secboard (3) width = "10%"> about display attributes </TD> </tr> </tbody> </table>
<Table class = main_tab id = maintable Height = 240 cellspacing = 0 cellpadding = 0 width = 549 border = 0> <! -- About tbody tag -->
<Tbody style = "display: Block">
<Tr>
<TD valign = Top align = middle> <br>
<Table cellspacing = 0 cellpadding = 0 width = 490 border = 0>
<Tbody>
<Tr>
<TD> specify the row as the table body.
<Br> Note: The tbody element is a block element and must be terminated.
. <Br> even if the table does not explicitly define the tbody
Element, which is also provided to all tables. <Br>
Reference: Dynamic HTML reference and development application Daquan
Community Edition
Microsoft Corporation
Beijing huachin Industrial Technology Development Co., Ltd.
Translation)
<Br> </TD> </tr> </TB
Ody> </table> </TD> </tr> </T
Body> <! -- About cells set -->
<Tbody style = "display:
None ">
<Tr>
<TD valign = Top
Align = middle> <br>
<Table cellspacing = 0
Cellpadding = 0 width = 490 border = 0>
<Tbody>
<Tr>
<TD> retrieve table rows or whole
Set of all cells in the table. <Br> applicable to TR and table.
<Br> reference: Dynamic HTML reference and development
Use Daquan (People's post and telecommunications Publishing House
Microsoft Corporation
Beijing huachin Industrial Technology Development Co., Ltd.
Translation)
<Br> </TD> </tr> </TB
Ody> </table> </TD> </tr> </T
Body> <! -- About the tbodies set -->
<Tbody style = "display:
None ">
<Tr>
<TD valign = Top
Align = middle> <br>
<Table cellspacing = 0
Cellpadding = 0 width = 490 border = 0>
<Tbody>
<Tr>
<TD> retrieve all tbodies In the table
Object set. Objects are arranged in the HTML source order in the collection.
<Br> apply to table. <Br> reference:
Dynamic HTML reference and Development and Application Daquan (People's post and telecommunications Press
Microsoft Corporation
Beijing huachin Industrial Technology Development Co., Ltd.
Translation)
<Br> </TD> </tr> </TB
Ody> </table> </TD> </tr> </T
Body> <! -- About the display attribute -->
<Tbody style = "display:
None ">
<Tr>
<TD valign = Top
Align = middle> <br>
<Table cellspacing = 0
Cellpadding = 0 width = 490 border = 0>
<Tbody>
<Tr>
<TD> set or retrieve objects
Whether the service is provided. <Br> possible values: Block, none,
Inline, list-item, table-header-group, table-
Footer-group. <Br> This feature can be read and written. The block elements are default.
The value is block, and the default value of inline elements is inline.
(CSS) attributes cannot be inherited. <Br> reference :《
Dynamic HTML reference and development application Daquan (People's post and telecommunications Press
Microsoft Corporation
Beijing huachin xingye Technology Development Co., Ltd)
<Br> <
Href = "http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp? Frame = true"
Target = _ blank> click here
</A> refer to the explanations on Microsoft <a href = "http://msdn.microsoft.com/" target = _ blank> msdn online </a>.
</TD> </tr> </tbody> </table>
; </TD> </tr> </tbody> </table & G
T; </body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
