dl+ol应用分析

　　题目：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>  
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%20%0D%0Avar%20ddiShow%3D2%3B%20%20%0D%0Afunction%20show(iShow)%20%20%0D%0A%7B%20%20%20%20%0D%0A%20%20%20%20document.getElementById(%5B'd'%2BddiShow%5D).className%3D%22no%22%3B%20%20%0D%0A%20%20%20%20document.getElementById(%5B't'%2BddiShow%5D).className%3D%22no%22%3B%20%20%0D%0A%20%20%20%20var%20iShow%3B%20%20%0D%0A%20%20%20%20ddiShow%3DiShow%3B%20%20%0D%0A%20%20%20%20document.getElementById(%5B'd'%2BiShow%5D).className%3D%22ing%22%3B%20%20%0D%0A%20%20%20%20document.getElementById(%5B't'%2BiShow%5D).className%3D%22ing%22%3B%20%20%0D%0A%20%20%20%20return%20false%3B%20%20%0D%0A%7D%20%20%0D%0A%3C%2Fscript%3E">  
</head>

<body>  
<dl>  
    <dt id="t1"><a href="#" _ewebeditor_ta_href="%23" onmouseover="return show('1');">测试菜单一</a></dt>  
    <dd id="d1">  
        <ol>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单一)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单一)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单一)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单一)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单一)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单一)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单一)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单一)</a>1-24</li>  
        </ol>

</dd>  
    <dt id="t2"  class="ing"><a href="#" _ewebeditor_ta_href="%23"  onmouseover="return show('2');">测试菜单二</a></dt>  
    <dd id="d2" class="ing">  
        <ol>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单二)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单二)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单二)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单二)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单二)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单二)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单二)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单二)</a>1-24</li>        </ol>  
    </dd>  
    <dt id="t3"><a href="#" _ewebeditor_ta_href="%23"  onmouseover="return show('3');">测试菜单三</a></dt>  
    <dd id="d3">  
        <ol>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单三)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单三)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单三)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单三)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单三)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单三)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单三)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单三)</a>1-24</li>        </ol>  
    </dd>  
    <dt id="t4"><a href="#" _ewebeditor_ta_href="%23"  onmouseover="return show('4');">测试菜单四</a></dt>  
    <dd id="d4">  
        <ol>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单四)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单四)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单四)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单四)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单四)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单四)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单四)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单四)</a>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部分

复制代码代码如下:

　　var ddiShow=2;//定义一个变量来记录选中的因为dl dd都要~为了省个变量所以..用数字

　　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>

　　改个事件试一下

<!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>  
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%20%0D%0Avar%20ddiShow%3D2%3B%20%20%0D%0Afunction%20show(iShow)%20%20%0D%0A%7B%20%20%20%20%0D%0A%20%20%20%20document.getElementById(%5B'd'%2BddiShow%5D).className%3D%22no%22%3B%20%20%0D%0A%20%20%20%20document.getElementById(%5B't'%2BddiShow%5D).className%3D%22no%22%3B%20%20%0D%0A%20%20%20%20var%20iShow%3B%20%20%0D%0A%20%20%20%20ddiShow%3DiShow%3B%20%20%0D%0A%20%20%20%20document.getElementById(%5B'd'%2BiShow%5D).className%3D%22ing%22%3B%20%20%0D%0A%20%20%20%20document.getElementById(%5B't'%2BiShow%5D).className%3D%22ing%22%3B%20%20%0D%0A%20%20%20%20return%20false%3B%20%20%0D%0A%7D%20%20%0D%0A%3C%2Fscript%3E">  
</head>

<body>  
<dl id="test">  
    <dt id="t1"><a href="#" _ewebeditor_ta_href="%23" onclick="return show('1');">测试菜单一</a></dt>  
    <dd id="d1">  
        <ol>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单一)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单一)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单一)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单一)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单一)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单一)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单一)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单一)</a>1-24</li>        </ol>

</dd>  
    <dt id="t2" class="ing"><a href="#" _ewebeditor_ta_href="%23" onclick="return show('2');">测试菜单二</a></dt>  
    <dd id="d2" class="ing">  
        <ol>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单二)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单二)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单二)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单二)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单二)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单二)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单二)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单二)</a>1-24</li>        </ol>

</dd>  
    <dt id="t3"><a href="#" _ewebeditor_ta_href="%23" onclick="return show('3');">测试菜单三</a></dt>  
    <dd id="d3">  
        <ol>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单三)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单三)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单三)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单三)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单三)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单三)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单三)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单三)</a>1-24</li>        </ol>

</dd>  
    <dt id="t4"><a href="#" _ewebeditor_ta_href="%23" onclick="return show('4');">测试菜单四</a></dt>  
    <dd id="d4">  
        <ol>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单四)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单四)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单四)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单四)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单四)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单四)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单四)</a>1-24</li>  
            <li><a href="#" _ewebeditor_ta_href="%23">测试内容(菜单四)</a>1-24</li>        </ol>

</dd>  
</dl>

</body>

</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程