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

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

CSS样式表: 网页布局教程:掌握CSS网页布局属性; WEB标准的CSS网页布局技巧5则; 你怎么书写CSS代码？; CSS教程：表单元素不继承body的字体属性; 调整CSS的方式给滚动条换色; CSS网页布局中表格制作实例; 网页设计学习教程:CSS盒模型; 网页制作学习教程:CSS Position; 网页九宫格布局:应用透明的外圆角; CSS网页布局学习的参考诀窍; 把网页按钮伪装成超链接; CSS教程:检验CSS书写是否标准合理; 你的网页最好通过HTML校验和CSS校验; 网页制作教程:CSS的好处; 网页制作心得:分离之后怎么做？; CSS教程:数字和字母将容器撑大问题解决; CSS Sprites优化网页代码的方法; CSS实例:精简代码的兼容各浏览器的滑动门; CSS网页制作技巧:提高CSS可阅读性; 英文教程:CSS的Float

No. « ‹ 60 61 62 63 › »

技术文章搜索

关键字

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

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

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