題目：dl+ol的練習
作者：嗷嗷
上次 li 把 dl 類比了~dl不知道要幹什麼了~找了ol一起來做複合列表~
這個練習除了css外~外加用了點JS
先看下難看的示範 因為最近太懶~沒做漂亮的樣式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>學習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> </head> <body> <dl> <dt id="t1">測試菜單一</dt> <dd id="d1"> <ol> <li>測試內容(菜單一)1-24</li> <li>測試內容(菜單一)1-24</li> <li>測試內容(菜單一)1-24</li> <li>測試內容(菜單一)1-24</li> <li>測試內容(菜單一)1-24</li> <li>測試內容(菜單一)1-24</li> <li>測試內容(菜單一)1-24</li> <li>測試內容(菜單一)1-24</li> </ol> </dd> <dt id="t2" class="ing">測試菜單二</dt> <dd id="d2" class="ing"> <ol> <li>測試內容(菜單二)1-24</li> <li>測試內容(菜單二)1-24</li> <li>測試內容(菜單二)1-24</li> <li>測試內容(菜單二)1-24</li> <li>測試內容(菜單二)1-24</li> <li>測試內容(菜單二)1-24</li> <li>測試內容(菜單二)1-24</li> <li>測試內容(菜單二)1-24</li> </ol> </dd> <dt id="t3">測試菜單三</dt> <dd id="d3"> <ol> <li>測試內容(菜單三)1-24</li> <li>測試內容(菜單三)1-24</li> <li>測試內容(菜單三)1-24</li> <li>測試內容(菜單三)1-24</li> <li>測試內容(菜單三)1-24</li> <li>測試內容(菜單三)1-24</li> <li>測試內容(菜單三)1-24</li> <li>測試內容(菜單三)1-24</li> </ol> </dd> <dt id="t4">測試菜單四</dt> <dd id="d4"> <ol> <li>測試內容(菜單四)1-24</li> <li>測試內容(菜單四)1-24</li> <li>測試內容(菜單四)1-24</li> <li>測試內容(菜單四)1-24</li> <li>測試內容(菜單四)1-24</li> <li>測試內容(菜單四)1-24</li> <li>測試內容(菜單四)1-24</li> <li>測試內容(菜單四)1-24</li> </ol> </dd> </dl> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
CSS的重點
複製代碼 代碼如下:
dt.ing a
{
background:#efefef;/*移上去的背景*/
}
dd
{
position: absolute;/*把DD流出來*/
display: none;/*把DD預設隱藏起來*/
width:280px;
background-color: #fff;
}
dd.ing
{
display: block;/*移上去的顯示*/
}
dd.no
{
display:none;
}
dd#d1
{
margin-top:-32px;
margin-left:120px;/*把dd移到合適的地方 #d2#d3#d4也一樣*/
}
JS部分
複製代碼 代碼如下:
改個事件試一下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>學習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> </head> <body> <dl id="test"> <dt id="t1">測試菜單一</dt> <dd id="d1"> <ol> <li>測試內容(菜單一)1-24</li> <li>測試內容(菜單一)1-24</li> <li>測試內容(菜單一)1-24</li> <li>測試內容(菜單一)1-24</li> <li>測試內容(菜單一)1-24</li> <li>測試內容(菜單一)1-24</li> <li>測試內容(菜單一)1-24</li> <li>測試內容(菜單一)1-24</li> </ol> </dd> <dt id="t2" class="ing">測試菜單二</dt> <dd id="d2" class="ing"> <ol> <li>測試內容(菜單二)1-24</li> <li>測試內容(菜單二)1-24</li> <li>測試內容(菜單二)1-24</li> <li>測試內容(菜單二)1-24</li> <li>測試內容(菜單二)1-24</li> <li>測試內容(菜單二)1-24</li> <li>測試內容(菜單二)1-24</li> <li>測試內容(菜單二)1-24</li> </ol> </dd> <dt id="t3">測試菜單三</dt> <dd id="d3"> <ol> <li>測試內容(菜單三)1-24</li> <li>測試內容(菜單三)1-24</li> <li>測試內容(菜單三)1-24</li> <li>測試內容(菜單三)1-24</li> <li>測試內容(菜單三)1-24</li> <li>測試內容(菜單三)1-24</li> <li>測試內容(菜單三)1-24</li> <li>測試內容(菜單三)1-24</li> </ol> </dd> <dt id="t4">測試菜單四</dt> <dd id="d4"> <ol> <li>測試內容(菜單四)1-24</li> <li>測試內容(菜單四)1-24</li> <li>測試內容(菜單四)1-24</li> <li>測試內容(菜單四)1-24</li> <li>測試內容(菜單四)1-24</li> <li>測試內容(菜單四)1-24</li> <li>測試內容(菜單四)1-24</li> <li>測試內容(菜單四)1-24</li> </ol> </dd> </dl> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
