dl+ol analyse d'application_échange d'expériences

Titre : Exercices de dl+ol
Auteur : Aoao

La dernière fois que Li a simulé dl~dl ne savait pas quoi faire~J'ai demandé à ol de faire une liste composée ensemble~

Ceci En plus de pratiquer le CSS, j'ai aussi utilisé du JS
Jetons d'abord un coup d'œil à la démo moche car je suis trop paresseux ces derniers temps et je n'ai pas fait de beaux styles

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Apprentissage du 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> <dl> <dt id="t1"> <a href="#" onmouseover="return show('1');"></a>Test Menu 1</dt> <dd id="d1"> <ol> <li> <a href="#"></a>Tester le contenu (Menu 1)</li>1-24<li> <a href="#"></a>Tester le contenu (Menu 1)</li>1-24<li> <a href="#"></a>Tester le contenu (Menu 1)</li>1-24<li> <a href="#"></a>Tester le contenu (Menu 1)</li>1-24<li> <a href="#"></a>Tester le contenu (Menu 1)</li>1-24<li> <a href="#"></a>Tester le contenu (Menu 1)</li>1-24<li> <a href="#"></a>Tester le contenu (Menu 1)</li>1-24<li> <a href="#"></a>Tester le contenu (Menu 1)</li>1-24</ol> </dd> <dt id="t2" class="ing"> <a href="#" onmouseover="return show('2');"></a>Test Menu 2</dt> <dd id="d2" class="ing"> <ol> <li> <a href="#"></a>Tester le contenu (menu 2)</li>1-24<li> <a href="#"></a>Tester le contenu (menu 2)</li>1-24<li> <a href="#"></a>Tester le contenu (menu 2)</li>1-24<li> <a href="#"></a>Tester le contenu (menu 2)</li>1-24<li> <a href="#"></a>Tester le contenu (menu 2)</li>1-24<li> <a href="#"></a>Tester le contenu (menu 2)</li>1-24<li> <a href="#"></a>Tester le contenu (menu 2)</li>1-24<li> <a href="#"></a>Tester le contenu (menu 2)</li>1-24</ol> </dd> <dt id="t3"> <a href="#" onmouseover="return show('3');"></a>Test du menu trois</dt> <dd id="d3"> <ol> <li> <a href="#"></a>Contenu du test (menu trois)</li>1-24<li> <a href="#"></a>Contenu du test (menu trois)</li>1-24<li> <a href="#"></a>Contenu du test (menu trois)</li>1-24<li> <a href="#"></a>Contenu du test (menu trois)</li>1-24<li> <a href="#"></a>Contenu du test (menu trois)</li>1-24<li> <a href="#"></a>Contenu du test (menu trois)</li>1-24<li> <a href="#"></a>Contenu du test (menu trois)</li>1-24<li> <a href="#"></a>Contenu du test (menu trois)</li>1-24</ol> </dd> <dt id="t4"> <a href="#" onmouseover="return show('4');"></a>Test du menu quatre</dt> <dd id="d4"> <ol> <li> <a href="#"></a>Tester le contenu (Menu 4)</li>1-24<li> <a href="#"></a>Tester le contenu (Menu 4)</li>1-24<li> <a href="#"></a>Tester le contenu (Menu 4)</li>1-24<li> <a href="#"></a>Tester le contenu (Menu 4)</li>1-24<li> <a href="#"></a>Tester le contenu (Menu 4)</li>1-24<li> <a href="#"></a>Tester le contenu (Menu 4)</li>1-24<li> <a href="#"></a>Tester le contenu (Menu 4)</li>1-24<li> <a href="#"></a>Tester le contenu (Menu 4)</li>1-24</ol> </dd> </dl>