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

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

CSS样式表: 脚本控制三行三列自适应高度DIV布局; 通过CSS Hack 区分 FF/IE7/IE6/IE5.5/IE5 代码推荐; HTML/XHTML模板; 用DIV+CSS写小三角; SPAN元素和DIV元素有的区别; 关于Firefox中的Flash不可以显示透明效果的问题; 当ie7不认!important之后 [布局的解决办法]; 绝对定位的DIV宽度自动适应的一个方法; 被人遗忘的html tags; 一个css 的小问题; IE 5.x/Win 和模型bug; [转]目前找到的最好的Iframe自适应高度代码; Web Safe Color Pallette; 网站制作之网页技巧; http状态码一览表; 从Table向Css过渡的优缺点比较; 不用float实现div模块居中布局; 解决列高度自适应(相同)的五种方法; 用CSS floats创建三栏页布局; 如何正确使用标题元素、段落和强制换行

No. « ‹ 34 35 36 37 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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应用分析