dl+ol应用分析

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› HTML›HTML/CSS编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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

复制代码代码如下:

<script type="text/javascript">  
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>  <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>  <body>  <dl id="test">      <dt id="t1"><a href="#" onclick="return show('1');">测试菜单一</a></dt>      <dd id="d1">          <ol>              <li><a href="#">测试内容(菜单一)</a>1-24</li>              <li><a href="#">测试内容(菜单一)</a>1-24</li>              <li><a href="#">测试内容(菜单一)</a>1-24</li>              <li><a href="#">测试内容(菜单一)</a>1-24</li>              <li><a href="#">测试内容(菜单一)</a>1-24</li>              <li><a href="#">测试内容(菜单一)</a>1-24</li>              <li><a href="#">测试内容(菜单一)</a>1-24</li>              <li><a href="#">测试内容(菜单一)</a>1-24</li>        </ol>      </dd>      <dt id="t2" class="ing"><a href="#" onclick="return show('2');">测试菜单二</a></dt>      <dd id="d2" class="ing">          <ol>              <li><a href="#">测试内容(菜单二)</a>1-24</li>              <li><a href="#">测试内容(菜单二)</a>1-24</li>              <li><a href="#">测试内容(菜单二)</a>1-24</li>              <li><a href="#">测试内容(菜单二)</a>1-24</li>              <li><a href="#">测试内容(菜单二)</a>1-24</li>              <li><a href="#">测试内容(菜单二)</a>1-24</li>              <li><a href="#">测试内容(菜单二)</a>1-24</li>              <li><a href="#">测试内容(菜单二)</a>1-24</li>        </ol>      </dd>      <dt id="t3"><a href="#" onclick="return show('3');">测试菜单三</a></dt>      <dd id="d3">          <ol>              <li><a href="#">测试内容(菜单三)</a>1-24</li>              <li><a href="#">测试内容(菜单三)</a>1-24</li>              <li><a href="#">测试内容(菜单三)</a>1-24</li>              <li><a href="#">测试内容(菜单三)</a>1-24</li>              <li><a href="#">测试内容(菜单三)</a>1-24</li>              <li><a href="#">测试内容(菜单三)</a>1-24</li>              <li><a href="#">测试内容(菜单三)</a>1-24</li>              <li><a href="#">测试内容(菜单三)</a>1-24</li>        </ol>      </dd>      <dt id="t4"><a href="#" onclick="return show('4');">测试菜单四</a></dt>      <dd id="d4">          <ol>              <li><a href="#">测试内容(菜单四)</a>1-24</li>              <li><a href="#">测试内容(菜单四)</a>1-24</li>              <li><a href="#">测试内容(菜单四)</a>1-24</li>              <li><a href="#">测试内容(菜单四)</a>1-24</li>              <li><a href="#">测试内容(菜单四)</a>1-24</li>              <li><a href="#">测试内容(菜单四)</a>1-24</li>              <li><a href="#">测试内容(菜单四)</a>1-24</li>              <li><a href="#">测试内容(菜单四)</a>1-24</li>        </ol>      </dd>  </dl>  </body>  </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]