dl+ol應(yīng)用分析_經(jīng)驗(yàn)交流

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 18:54:52

dl+ol應(yīng)用分析_經(jīng)驗(yàn)交流

dl+ol應(yīng)用分析_經(jīng)驗(yàn)交流:題目：dl+ol的練習(xí) 作者：嗷嗷上次 li 把 dl 模擬了~dl不知道要干什么了~找了ol一起來(lái)做復(fù)合列表~ 這個(gè)練習(xí)除了css外~外加用了點(diǎn)JS 先看下難看的演示因?yàn)樽罱珣衺沒(méi)做漂亮的樣式學(xué)習(xí)dl中 dl * { margin: 0; padding: 0; f

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀dl+ol應(yīng)用分析_經(jīng)驗(yàn)交流:題目：dl+ol的練習(xí) 作者：嗷嗷上次 li 把 dl 模擬了~dl不知道要干什么了~找了ol一起來(lái)做復(fù)合列表~ 這個(gè)練習(xí)除了css外~外加用了點(diǎn)JS 先看下難看的演示因?yàn)樽罱珣衺沒(méi)做漂亮的樣式學(xué)習(xí)dl中 dl * { margin: 0; padding: 0; f

題目：dl+ol的練習(xí)
作者：嗷嗷

上次 li 把 dl 模擬了~dl不知道要干什么了~找了ol一起來(lái)做復(fù)合列表~

這個(gè)練習(xí)除了css外~外加用了點(diǎn)JS
先看下難看的演示因?yàn)樽罱珣衺沒(méi)做漂亮的樣式

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>學(xué)習(xí)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> 
<script type="text/javascript"> 
var ddiShow=2; 
function show(iShow) 
{ 
 document.getElementById(['d'+ddiShow]).className="no"; 
 document.getElementById(['t'+ddiShow]).className="no"; 
 var iShow; 
 ddiShow=iShow; 
 document.getElementById(['d'+iShow]).className="ing"; 
 document.getElementById(['t'+iShow]).className="ing"; 
 return false; 
} 
</ script> 
</head>

測(cè)試菜單二 
  
 <ol> 
  <li>測(cè)試內(nèi)容(菜單二)1-24</li> 
  <li>測(cè)試內(nèi)容(菜單二)1-24</li> 
  <li>測(cè)試內(nèi)容(菜單二)1-24</li> 
  <li>測(cè)試內(nèi)容(菜單二)1-24</li> 
  <li>測(cè)試內(nèi)容(菜單二)1-24</li> 
  <li>測(cè)試內(nèi)容(菜單二)1-24</li> 
  <li>測(cè)試內(nèi)容(菜單二)1-24</li> 
  <li>測(cè)試內(nèi)容(菜單二)1-24</li> </ol> 
  
 測(cè)試菜單三 
  
 <ol> 
  <li>測(cè)試內(nèi)容(菜單三)1-24</li> 
  <li>測(cè)試內(nèi)容(菜單三)1-24</li> 
  <li>測(cè)試內(nèi)容(菜單三)1-24</li> 
  <li>測(cè)試內(nèi)容(菜單三)1-24</li> 
  <li>測(cè)試內(nèi)容(菜單三)1-24</li> 
  <li>測(cè)試內(nèi)容(菜單三)1-24</li> 
  <li>測(cè)試內(nèi)容(菜單三)1-24</li> 
  <li>測(cè)試內(nèi)容(菜單三)1-24</li> </ol> 
  
 測(cè)試菜單四 
  
 <ol> 
  <li>測(cè)試內(nèi)容(菜單四)1-24</li> 
  <li>測(cè)試內(nèi)容(菜單四)1-24</li> 
  <li>測(cè)試內(nèi)容(菜單四)1-24</li> 
  <li>測(cè)試內(nèi)容(菜單四)1-24</li> 
  <li>測(cè)試內(nèi)容(菜單四)1-24</li> 
  <li>測(cè)試內(nèi)容(菜單四)1-24</li> 
  <li>測(cè)試內(nèi)容(菜單四)1-24</li> 
  <li>測(cè)試內(nèi)容(菜單四)1-24</li> </ol>

</body>

</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]
CSS的重點(diǎn)
代碼如下:
dt.ing a
{
background:#efefef;/*移上去的背景*/
}
dd
{
position: absolute;/*把DD流出來(lái)*/
display: none;/*把DD默認(rèn)隱藏起來(lái)*/
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部分
代碼如下:

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

dl+ol應(yīng)用分析_經(jīng)驗(yàn)交流

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：應(yīng)用經(jīng)驗(yàn) ol

熱門(mén)焦點(diǎn)

dl+ol應(yīng)用分析_經(jīng)驗(yàn)交流

dl+ol應(yīng)用分析_經(jīng)驗(yàn)交流

dl+ol應(yīng)用分析_經(jīng)驗(yàn)交流

最新推薦

猜你喜歡

熱門(mén)推薦