dl+ol-Anwendungsanalyse_Erfahrungsaustausch

Titel: Übungen von dl+ol
Autor: Aoao

Das letzte Mal, als li simulierte, wusste dl~dl nicht, was ich tun sollte~Ich habe ol gebeten, gemeinsam eine zusammengesetzte Liste zu erstellen~

Zusätzlich zum Üben von CSS habe ich auch etwas JS verwendet
Schauen wir uns zuerst die hässliche Demo an, weil ich in letzter Zeit zu faul war und keine schönen Stile erstellt habe

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>DL lernen</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>Testmen眉 1</dt> <dd id="d1"> <ol> <li> <a href="#"></a>Inhalt testen (Men眉 1)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 1)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 1)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 1)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 1)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 1)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 1)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 1)</li>1-24</ol> </dd> <dt id="t2" class="ing"> <a href="#" onmouseover="return show('2');"></a>Testmen眉 2</dt> <dd id="d2" class="ing"> <ol> <li> <a href="#"></a>Inhalt testen (Men眉 2)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 2)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 2)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 2)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 2)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 2)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 2)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 2)</li>1-24</ol> </dd> <dt id="t3"> <a href="#" onmouseover="return show('3');"></a>Testmen眉 drei</dt> <dd id="d3"> <ol> <li> <a href="#"></a>Inhalt testen (Men眉 drei)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 drei)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 drei)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 drei)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 drei)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 drei)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 drei)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 drei)</li>1-24</ol> </dd> <dt id="t4"> <a href="#" onmouseover="return show('4');"></a>Testmen眉 vier</dt> <dd id="d4"> <ol> <li> <a href="#"></a>Inhalt testen (Men眉 4)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 4)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 4)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 4)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 4)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 4)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 4)</li>1-24<li> <a href="#"></a>Inhalt testen (Men眉 4)</li>1-24</ol> </dd> </dl>