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

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

CSS样式表: 验证并修复css错误内容的相关工具; 分享3个比较实用的CSS页面框架布局; CSS幻灯片教程:制作高效可维护组件化的CSS代码; 网页制作基础知识:html特殊符号; CSS教程:按整洁易懂的结构组织CSS样式; 查看和编辑CSS中用到的颜色:CSS Prism; 帮助你学习CSS的在线CSS工具网站; CSS网页设计参考:把HTML标记分类; CSS进阶:几个Reset CSS的八卦问题; WEB设计技巧:网页虚线制作方法剖析; WEBJX收集CSS格式化和造型网页高级教程; CSS3教程:在CSS中使用的颜色; 学习WEB标准心得:网页重构的思路; 轻易创建css导航工具:CSS Tab Designer2; 总结学习web标准的十个重要理由; CSS实例教程:CSS制作星级评价的功能; CSS实例教程:纯CSS实现圆角框; 多个css、js文件自动合并、压缩; 网页设计教程:CSS文字排版技巧大全; Photoshop制作CSS网页制作的背景图

No. « ‹ 115 116 117 118 › »

技术文章搜索

关键字

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

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

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