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

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

CSS样式表: css对边框的属性控制和链接的伪类选择器; css对于颜色和文本属性的控制; HTML和CSS的关键:盒子模型(Box model); CSS网页布局全精通; css教程:css指令,兼容,注释,selector; DIV+CSS网页布局的基础知识整理; 门户网站构建CSS框架的规则; 8个优秀的CSS实现数据图表的应用实例; CSS3 有关的问题; css实用技巧及必须得注意的事项; CSS在网页放置注意的两个问题; 学习CSS值得去的几个英文网站; IE与FF不兼容网页布局CSS问题; CSS教程:完美的绝对底部; CSS样式表渐进增强的应用; CSS3五个技巧给你的网站带来出色的效果; CSS实例:CSS的10个方法和技巧; 相对完美的CSS绝对底部; CSS3中的5个有趣的新技术; Webjx收集的30个CSS导航及菜单教程

No. « ‹ 92 93 94 95 › »

技术文章搜索

关键字

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

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

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