Title: Dl+ol's Practice
Author: whining
The last time Li to simulate the DL ~dl do not know what to do ~ Find ol together to do composite list ~
This exercise in addition to CSS ~ plus a bit JS
Look at the ugly demo, because it's too lazy to make a pretty style lately.
<! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en" "Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" > <ptml xmlns= " Http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> learning dl </title> <style type=" TEXT/CSS "> DL * {margin:0; padding:0; font-size:12px; } DL {width:405px; height:128px; border:1px #000 Solid; } DT {width:120px; height:32px; line-height:32px; Text-align:center; } DT a {display:block; Text-decoration:none; } dt.ing A {background: #efefef; } dd {Position:absolute; Display:none; width:280px; Background-color: #fff; } dd li {line-height:16px; List-style-type:none; Text-align:right; Color: #999; } dd Li a {float:left; Display:inline; padding-left:5px; } dd.ing {display:block; } dd.no {display:none; } dd#d1 {margin-top:-32px; margin-left:120px; } dd#d2 {margin-top:-64px; margin-left:120px; } dd#d3 {margin-top:-96px; margin-left:120px; } dd#d4 {margin-top:-128px; margin-left:120px; } </style> </pead> <body> <dl> <dt id= "T1" > Test menu One </dt> <dd id= "D1" &G T <ol> <li> Test Content (menu one) 1-24</li> <li> test Content (menu one) 1-24</li> &l T;li> Test content (menu one) 1-24</li> <li> test Content (menu one) 1-24</li> <li> test Content (menu one) 1-24</ li> <li> Test Content (menu one) 1-24</li> <li> test Content (menu one) 1-24</li> <li > Test Content (Menu one) 1-24</li> </ol> </dd> <dt id= "T2" class= "ing" > Test Menu two </dt> <DD id= "d2" class= "ing" > <ol> <li> Test Content (Menu II) 1-24</li> <li& gt; Test content (Menu II) 1-24</li> <li> Test Content (Menu II) 1-24</li> <li> test content (Menu II) 1-24</li> <LI&G t; Test content (Menu II) 1-24</li> <li> test content (Menu II) 1-24</li> <li> test content (Menu II) 1-24</li> <li> Test content (Menu II) 1-24</li> </ol> </dd> <dt id= "T3" > Test Menu three </DT&G T <dd id= "D3" > <ol> <li> Test Content (Menu III) 1-24</li> <li> test content (Menu III) 1-2 4</li> <li> Test Content (Menu III) 1-24</li> <li> test content (Menu III) 1-24</li> <li> Test content (Menu III) 1-24</li> <li> test content (Menu III) 1-24</li> <li> test content (Menu III) 1-24< ;/li> <li> Test Content (Menu III) 1-24</li> </ol> </dd> <dt id= "T4" > Test menu Four & Lt;/dt> <dd id= "D4" > <ol> <li> Test Content (menu IV) 1-24</li> <li > Test Content (menu four) 1-24</li> <li> Test Content (menu four) 1-24</li> <li> test Content (menu four) 1-24</li> <li> Test content (menu four) 1-24</li> <li> test Content (menu four) 1-24</li> <li> test Content (menu four) 1-24< ;/li> <li> Test content (menu IV) 1-24</li> </ol> </dd> </dl> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
The focus of CSS
Copy CodeThe code is as follows:
Dt.ing A
{
Background: #efefef; * * Move up the background */
}
Dd
{
position:absolute;/* the DD out * *
display:none;/* to hide dd by default */
width:280px;
Background-color: #fff;
}
Dd.ing
{
display:block;/* Move up the display */
}
Dd.no
{
Display:none;
}
Dd#d1
{
margin-top:-32px;
margin-left:120px;/* move DD to the right place #d2 #d3#d4.
}
js Section
Copy CodeThe code is as follows:
Let's try a little change .
<! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en" "Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" > <ptml xmlns= " Http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> learning dl </title> <style type=" TEXT/CSS "> DL * {margin:0; padding:0; font-size:12px; } DL {width:405px; height:128px; border:1px #000 Solid; } DT {width:120px; height:32px; line-height:32px; Text-align:center; } DT a {display:block; Text-decoration:none; } dt.ing A {background: #efefef; } dd {Position:absolute; Display:none; width:280px; Background-color: #fff; } dd li {line-height:16px; List-style-type:none; Text-align:right; Color: #999; } dd Li a {float:left; Display:inline; padding-left:5px; } dd.ing {display:block; } dd.no {display:none; } dd#d1 {margin-top:-32px; margin-left:120px; } dd#d2 {margin-top:-64px; margin-left:120px; } dd#d3 {margin-top:-96px; margin-left:120px; } dd#d4 {margin-top:-128px; margin-left:120px; } </style> </pead> <body> <dl id= "Test" > <dt id= "T1" > Test menu One </dt> <dd id= "D1" > <ol> <li> Test Content (menu one) 1-24</li> <li> test Content (menu one) 1-24</ li> <li> Test Content (menu one) 1-24</li> <li> test Content (menu one) 1-24</li> <li > Test Content (Menu one) 1-24</li> <li> test Content (menu one) 1-24</li> <li> test Content (menu one) 1-24</LI&G T <li> Test content (menu one) 1-24</li> </ol> </dd> <dt id= "T2" class= "ing" > Test Menu two </dt> <DD id= "d2" class= "ing" > <ol> <li> Test Content (Menu II) 1-24</li> < Li> Test content (Menu II) 1-24</li> <li> Test Content (Menu II) 1-24</li> <li> test content (Menu II) 1-24</li> & Lt;li> Test content (Menu II) 1-24</li> <li> test content (Menu II) 1-24</li> <li> test content (Menu II) 1-24< /li> <li> Test Content (Menu II) 1-24</li> </ol> </dd> <dt id= "T3" > Test Menu three &L T;/dt> <dd id= "D3" > <ol> <li> Test Content (Menu III) 1-24</li> <li& gt; Test content (Menu III) 1-24</li> <li> test content (Menu III) 1-24</li> <li> test content (Menu III) 1-24</LI> ; <li> Test content (Menu III) 1-24</li> <li> test content (Menu III) 1-24</li> <li> test content (Menu III) 1-24< ;/li> <li> Test Content (Menu III) 1-24</li> </ol> </dd> <dt id= "T4" > Test menu Four & Lt;/dt> <dd id= "D4" > <ol> <li> Test Content (menu IV) 1-24</li> <li > Test Content (Menu four) 1-24</li> <li> test Content (menu four) 1-24</li> <li> test Content (menu four) 1-24</li> <li> Test content (menu four) 1-24</li> <li> test Content (menu four) 1-24</li> <li> test Content (menu four) 1-24</li> <li> Test Content (menu four) 1-24</li> </ol> </dd> </dl> </bod Y> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
