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