dl+ol應(yīng)用分析
更新時間：2007年03月12日 00:00:00 作者：
題目：dl+ol的練習
作者：嗷嗷
上次 li 把 dl 模擬了~dl不知道要干什么了~找了ol一起來做復合列表~
這個練習除了css外~外加用了點JS
先看下難看的演示 因為最近太懶~沒做漂亮的樣式
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
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部分
<script type="text/javascript">
var ddiShow=2;//定義一個變量來記錄選中的 因為dl dd都要~為了省個變量所以..用數(shù)字
function show(iShow)
{
document.getElementById(['d'+ddiShow]).className="no";
document.getElementById(['t'+ddiShow]).className="no";//改掉原來的樣式~隱藏起來
var iShow;
ddiShow=iShow;//把選中的的值給ddiShow 留下次用
document.getElementById(['d'+iShow]).className="ing";
document.getElementById(['t'+iShow]).className="ing";//改樣式顯示出來~~
return false;
}
</script>
改個事件試一下
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
作者：嗷嗷
上次 li 把 dl 模擬了~dl不知道要干什么了~找了ol一起來做復合列表~
這個練習除了css外~外加用了點JS
先看下難看的演示 因為最近太懶~沒做漂亮的樣式
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
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部分
復制代碼 代碼如下:
<script type="text/javascript">
var ddiShow=2;//定義一個變量來記錄選中的 因為dl dd都要~為了省個變量所以..用數(shù)字
function show(iShow)
{
document.getElementById(['d'+ddiShow]).className="no";
document.getElementById(['t'+ddiShow]).className="no";//改掉原來的樣式~隱藏起來
var iShow;
ddiShow=iShow;//把選中的的值給ddiShow 留下次用
document.getElementById(['d'+iShow]).className="ing";
document.getElementById(['t'+iShow]).className="ing";//改樣式顯示出來~~
return false;
}
</script>
改個事件試一下
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
使用text-align:justify實現(xiàn)兩端對齊一例
使用text-align:justify實現(xiàn)兩端對齊一例...2007-09-09
推薦css打造經(jīng)典鼠標觸發(fā)顯示選項...2007-04-04
純CSS的下拉菜單 支持IE6 IE7 Firefox 不用js兼容性好2008-11-11
div+CSS網(wǎng)頁布局的意義與副作用原因小結(jié)
隨著WEB2.0標準化設(shè)計理念的普及，國內(nèi)很多大型門戶網(wǎng)站已經(jīng)紛紛采用DIV+CSS制作方法，從實際應(yīng)用情況來看，此種方法絕對好于表格制作頁面的方法。2008-09-09
鼠標移動到超鏈接上的效果...2007-02-02
對設(shè)置樣式時怎么區(qū)分input是按鈕還是文本框問題的技術(shù)調(diào)查——把input里面的東西剔出來2008-09-09
用CSS floats創(chuàng)建三欄頁布局...2007-02-02
Class與ID區(qū)別 margin和padding區(qū)別 CSS學習筆記
2008-01-01
看了poorfish的這篇文章感覺不錯，先不考慮其它的，現(xiàn)在雖然流行div+css ,但仍有許多朋友還在用table,div+css主要考慮顯示速度，但多瀏覽器的兼容性，仍是個問題。2007-12-12
被人遺忘的html tags...2007-02-02