对于overflow:hidden的功能就是说超出部分不显示,达到一个效果“让子元素只在父元素内显示”
(1、是剪掉外面的 2、撑开显示)对应下面两种情况。
有两种情况:
1、有宽度高度值(是剪掉外面的 ):这样会剪切掉父元素外的子元素,达到“让子元素只在父元素内显示”的效果。(这才是overflow:hidden的正确用法)
2、无宽度高度值(撑开显示),这样就没有固定边界让它无法识别那是为那是内,但是还是要达到“让子元素只在父元素内显示”的效果,这样寻找边界以达到这种效果,我们不难发现在最大显示子元素(也就是子元素的边上时)刚好能达到“让子元素只在父元素内显示”的效果。即使有了 ”float:left;“浮动分离了父子元素,分离是分离但是还是父子啊(就像断绝父子关系,但是血浓于水,生理上有遗传),只要是父子也能满足这句话达到“让子元素只在父元素内显示”的效果。(这个是技巧)
二、无overflow:hidden
也有两种
1、有宽度高度值,显示为溢出
2、无宽度高度值,就会被撑开(因为没有分离父子),加了”float:left;“浮动分离了父子元素,而且又没有overflow:hidden强制达到“让子元素只在父元素内显示”的效果,所以不撑开,反而父块的高度塌陷消失
不是高手初学者...望指正
hight因为固定了高度撑不开 用min-hight就没问题了
而且ie6中无法识别min-hight,且把hight当成min-hight所以说ie6的高度只能设定最小高度,所以ie6不用overflow:hidden就能撑开
<%'**************************************************************
'**************************************************************
'**版本:Toumh无限菜单树 **
'**编号:TOUMH-20051124 **
'**作者:阳光白雪 **
'**主页:http://toumh.cublog.cn **
'**邮件:chenmanyi0818@126.com**
'**声明:转载或使用时请保留程序的完整性,请保留以上信息 **
'**************************************************************
'**************************************************************
dataurl=Server.MapPath("menutree.mdb")'数据库地址
dim conn,strQuery,rs
set conn = server.CreateObject("adodb.connection")
conn.Open "PROVIDER=MICROSOFT.JET.OLEDB.4.0DATA SOURCE="&dataurl
strQuery="select * from menufun"
set rs=server.createobject("adodb.recordset")
rs.open strQuery,conn,1,1
allnum=rs.RecordCount
'取得最大的层数MaxLevel
MaxLevel=1
for i=1 to allnum
if rs("PartLevel")>MaxLevel then
MaxLevel=rs("PartLevel")
else
MaxLevel=MaxLevel
end if
rs.movenext
next
rs.close
set rs=nothing
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>Toumh无极限菜单树</title>
<style type="text/css">
<!--
td {
font-size: 12px
}
-->
</style>
<script language="javascript">
<!--
function divshow(cmy1,cmy2,cmy3)
//展开/合并菜单函数
{
if(document.all("div"+cmy1+cmy2+cmy3).style.display==""){
document.all("div"+cmy1+cmy2+cmy3).style.display="none"
}else{
document.all("div"+cmy1+cmy2+cmy3).style.display=""
}
}
//-->
</script>
</head>
<body bgcolor="#6699CC" topmargin="0">
<table border="0" cellpadding="0" cellspacing="0">
<tr onClick="javascript:divshow(1,0,1)" style="cursor:hand"><TD><img src="images/admin.gif">Toumh无极限菜单树</TD></tr>
<%
dim toumh(10) '定义用于存放菜单前显示树图片的数组,如果应用时的最大级数大于十,请扩大数组维数
call menutree(1,0,MaxLevel,1)'首次调用菜单输出函数
'第一个参数:菜单的级数
'第二个参数:父菜单的ID,一级菜单默认为零
'第三个参数:菜单的最大级数
'第四个参数:用于区分层的名称,方便实现菜单的展开合并
%>
</table>
<%
'funno 菜单的级数
'funcid 父菜单的ID,一级菜单父级ID值为0
'MaxLevel 菜单的最大级数
'divno 用于区分层的名称,方便实现菜单的展开合并
'menutree() 数形菜单输出函数
function menutree(funno,funcid,MaxLevel,divno)
dim rsfun,numfun,funcidfun
strQuery1="select * from menufun where sup_funcid='"&funcid&"'"
set rsfun=server.createobject("adodb.recordset")
rsfun.open strQuery1,conn,1,1
numfun=rsfun.RecordCount
response.Write("<tr><td>")
response.Write("<div id='div"&funno&funcid&divno&"' style='display:none'>")'输出层,并根据相关参数给层定义唯一的ID名称
response.Write("<table border='0' cellpadding='0' cellspacing='0'>")
for j=1 to numfun
funcidfun=rsfun("funcid")
if j=numfun then '判断是否是本级菜单的最后一个
toumh(funno)="space.gif" '是则输出空白图片space.gif
else
toumh(funno)="line_v.gif" '否则输出竖线图片line_v.gif
end if
'判断是否有下级菜单
strQuery2="select * from menufun where sup_funcid='"&funcidfun&"'"
set rsfun2=server.createobject("adodb.recordset")
rsfun2.open strQuery2,conn,1,1
numfun2=rsfun2.RecordCount
'如果numfun2>0则有,反之则无
if numfun2 >0 then
response.Write("<tr onClick='javascript:divshow("&funno+1&","&funcidfun&","&j&")' style='cursor:hand'>")
'用单击事件调用展开/合并菜单函数
else
response.Write("<tr style='cursor:hand'>")
end if
response.Write("<td>")
if numfun2 >0 then
treeico="open_normal.gif"
if j=numfun then
treeico="open_end.gif"
end if
else
treeico="none_normal.gif"
if j=numfun then
treeico="none_end.gif"
end if
end if
for m=1 to cint(funno)-1'根据当前菜单的级数输出菜单前的数形图片
response.Write("<img src='images/"&toumh(m)&"' align='absMiddle'>")
next
if not rsfun("enable") then'判断菜单项是否可用,不可用的菜单名用#FF0000色显示
response.Write("<img src='images/"&treeico&"' align='absMiddle'><font color='#ff0000'>"&rsfun("funcname")&"</font>")'输出不可用菜单名
else
response.Write("<img src='images/"&treeico&"' align='absMiddle'>"&rsfun("funcname"))'输出可用菜单名
end if
response.Write("</td>")
response.Write("</tr>")
if cint(funno)<cint(MaxLevel) then
call menutree(cint(funno)+1,funcidfun,MaxLevel,j) '递归调用 menutree()函数
end if
rsfun.movenext
next
'response.Write("</td></tr>")
response.Write("</table></div>")
response.Write("</td></tr>")
end function
%>
<!-- 程序中未能改变菜单展开/合并时的图片的属性,有兴趣的网友可以自己添加该功能 -->
</body>
</html>
数据库字段说明:
数据表名:menufun
字段名称数据类型字段说明
--------------------------------------------------
funcid 自动编号菜单id
funcname文本菜单名
link_url文本连接地址
PartLevel 文本分级编号(级别)
sup_funcid 数字父菜单ID(一级菜单为0)
fun_no 数字菜单排序
enable 是/否 是否可用