dl+ol应用分析- CSS样式表 - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > dl+ol应用分析

CSS样式表: CSS教程:表格不被撑开的解决办法; 网页制作教程:简单总结CSS的基础属性; css文件不能被正常载入的问题解决方法; css模块化的思想让后期维护变得简单; 凹陷文字推荐; CSS 实用实例(推荐); 标准化：表格; 一个导航条布局的简单写法; CSS实现阴影文字效果; 全面考察“禁用浏览器后退”; 让2个DIV居中并排显示; 从gb到utf-8; 以前写的两个CSS树形菜单; 何为“VML”、VML的基底知识; Meta标签详解; 学习标准：笔记; 多中语言实现判断客户访问用得是那个域名然后转到对应的目录; 解决IE5/IE5.5/IE6/FF的兼容性问题：CSS; CSS网页布局入门教程9：用CSS设计网站导航：横向导航; web标准知识：从p开始，循序渐进

No. « ‹ 72 73 74 75 › »

技术文章搜索

关键字

CSS样式表中的 dl+ol应用分析

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 122 ::

收藏到网摘: n/a

bc1998录制的css视频教程推荐新手看下 li的简单应用

题目：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 全选提示:你可先修改部分代码,再按运行]

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 全选提示:你可先修改部分代码,再按运行]

bc1998录制的css视频教程推荐新手看下 li的简单应用

CSS样式表 中的 dl+ol应用分析

评论 (0) All

CSS样式表中的 dl+ol应用分析