dl+ol應(yīng)用分析
更新時(shí)間：2007年03月12日 00:00:00 作者：
題目：dl+ol的練習(xí)
作者：嗷嗷
上次 li 把 dl 模擬了~dl不知道要干什么了~找了ol一起來(lái)做復(fù)合列表~
這個(gè)練習(xí)除了css外~外加用了點(diǎn)JS
先看下難看的演示 因?yàn)樽罱珣衺沒(méi)做漂亮的樣式
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(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部分
<script type="text/javascript">
var ddiShow=2;//定義一個(gè)變量來(lái)記錄選中的 因?yàn)閐l dd都要~為了省個(gè)變量所以..用數(shù)字
function show(iShow)
{
document.getElementById(['d'+ddiShow]).className="no";
document.getElementById(['t'+ddiShow]).className="no";//改掉原來(lái)的樣式~隱藏起來(lái)
var iShow;
ddiShow=iShow;//把選中的的值給ddiShow 留下次用
document.getElementById(['d'+iShow]).className="ing";
document.getElementById(['t'+iShow]).className="ing";//改樣式顯示出來(lái)~~
return false;
}
</script>
改個(gè)事件試一下
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
作者：嗷嗷
上次 li 把 dl 模擬了~dl不知道要干什么了~找了ol一起來(lái)做復(fù)合列表~
這個(gè)練習(xí)除了css外~外加用了點(diǎn)JS
先看下難看的演示 因?yàn)樽罱珣衺沒(méi)做漂亮的樣式
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
CSS的重點(diǎn)
復(fù)制代碼 代碼如下:
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部分
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var ddiShow=2;//定義一個(gè)變量來(lái)記錄選中的 因?yàn)閐l dd都要~為了省個(gè)變量所以..用數(shù)字
function show(iShow)
{
document.getElementById(['d'+ddiShow]).className="no";
document.getElementById(['t'+ddiShow]).className="no";//改掉原來(lái)的樣式~隱藏起來(lái)
var iShow;
ddiShow=iShow;//把選中的的值給ddiShow 留下次用
document.getElementById(['d'+iShow]).className="ing";
document.getElementById(['t'+iShow]).className="ing";//改樣式顯示出來(lái)~~
return false;
}
</script>
改個(gè)事件試一下
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
相關(guān)文章
今天要講的內(nèi)容是如何實(shí)現(xiàn)“首字下沉”，，第一個(gè)字是很大的紅色楷體，陷于一段文字之首。這種做法在雜志中常見(jiàn)，但是在網(wǎng)頁(yè)中不那么常見(jiàn)。那么如何實(shí)現(xiàn)呢？其實(shí)很簡(jiǎn)單，只有一句CSS就可以了。2008-07-07
css font縮寫(xiě)總結(jié)附實(shí)例
css 縮寫(xiě)2008-06-06
三個(gè)不常見(jiàn)的 HTML5 實(shí)用新特性簡(jiǎn)介
都已經(jīng)到了 2014 年了，再來(lái)說(shuō) HTML5 的新特性，實(shí)在是夠晚了，不過(guò)這幾個(gè)在介紹 HTML5 的書(shū)上很少見(jiàn)到，但又可以方便的應(yīng)用在自己的網(wǎng)站上，所以特地來(lái)介紹一下2014-03-03
Meta標(biāo)簽詳解...2007-02-02
淺談href=#與href=javascript:void(0)的區(qū)別
淺談href=#與href=javascript:void(0)的區(qū)別，需要的朋友可以參考一下2013-02-02
網(wǎng)頁(yè)布局+純CSS縱向下拉菜單 IE6/IE7兼容
網(wǎng)頁(yè)布局+純CSS縱向下拉菜單 IE6/IE7兼容...2007-11-11
下面是一份在 HTML 4 Strict 和 XHTML 1.0 Strict 下必須遵守的標(biāo)簽嵌套規(guī)則，比如你不能在 <a> 里面再嵌入一個(gè) <a> 這樣的約定。2008-06-06
用javascript來(lái)控制 鏈接的target 屬性的代碼
用javascript來(lái)控制 鏈接的target 屬性的代碼...2007-11-11
[紅色]從gb到utf-8...2006-12-12
div iframe幀顯示問(wèn)題2008-08-08