关于边框颜色问题，在线等！

zhanglongjason 2010-09-15 01:16:17
我在做一个关于下拉框的一个效果类似于163里面点击按钮出来下拉框可以查看未读邮件和以读邮件，我的问题主要就是弹出来的那个下拉框的边框最底下的那个不变颜色，也就是border-bottom:red 1px solid;只有当我把css里面的display:none去掉才可以，可是我这里不能去掉的，不然就下拉就不行了
源码：.menuss { float:left; margin-left:157px;
BORDER-RIGHT: 2px outset; PADDING-RIGHT: 15px; display:none; height:50px; border-right:red 1px outset; BORDER-TOP: red 1px outset; PADDING-LEFT: 15px; background-color:White; PADDING-BOTTOM: 6px; BORDER-LEFT:red 1px outset; WIDTH: 70px; PADDING-TOP: 15px; BORDER-BOTTOM:red 1px outset; POSITION: absolute; TOP: 260px
}



<DIV class="menuss" id="menu_1" onclick="keepMenu(this)" align="left">
<div style="float:left; margin-left:-55px;">
<ul style="list-style-type:none;line-height:200%; float:left">
<li style="width:100px;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''"><font style="float:left; font-size:12px;"><img id="imgopen" alt="<%$Resources:Strings,literal800 %>" runat="server" src="../images/r4.png" onclick="fun('open')" style="cursor:hand" /><div style="margin-top:-20px; float:left; margin-left:30px;">活动</div></font></li>
<li style="width:100px;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''"><font style="float:left; font-size:12px;"><img id="imgclose" runat="server" alt="<%$ Resources:Strings,literal801 %>" src="../images/r3.png" onclick="fun('close')" style="cursor:hand" /><div style="margin-top:-20px; float:left; margin-left:30px;">拒绝</div></font></li>
</ul> <input id="h1" type="hidden" runat="server" value="../images/r4.png" /> <input id="h2" runat="server" type="hidden" value="../images/r3.png" /></div></DIV></tr>
...全文
264 24 打赏 收藏 转发到动态 举报
写回复
用AI写文章
24 条回复
切换为时间正序
请发表友善的回复…
发表回复
zhanglongjason 2010-09-16
  • 打赏
  • 举报
 回复
早上up下
zhanglongjason 2010-09-15
  • 打赏
  • 举报
 回复
[Quote=引用 21 楼 adengliuqing 的回复:]

border-bottom可以设置写边框。但是你这里不是这个问题，是定位的问题。
[/Quote]我到底该如何改
hjszbazm 2010-09-15
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 zhouzangood 的回复:]
每天回帖即可获得10分可用分
[/Quote]
10分
米娜Rose 2010-09-15
  • 打赏
  • 举报
 回复
border-bottom可以设置写边框。但是你这里不是这个问题，是定位的问题。
zhanglongjason 2010-09-15
  • 打赏
  • 举报
 回复
[Quote=引用 19 楼 adengliuqing 的回复:]

引用 14 楼 zhanglongjason 的回复:
引用 13 楼 adengliuqing 的回复:

POSITION: absolute; 这句去掉就ok了。
我早试过了，如果去了这个的话，我的按钮点击就没反应了，只有点击其他的按钮的时候有的时候会出来


有反应额，还有你的下面的弹出层宽度要调整。
[/Quote]我知道你说的那个效果，只是去了的话，我的框架也会变了，不是我的那个层的效果了，有没有好的方法让他显示出来下面的边框啊
米娜Rose 2010-09-15
  • 打赏
  • 举报
 回复
[Quote=引用 14 楼 zhanglongjason 的回复:]
引用 13 楼 adengliuqing 的回复:

POSITION: absolute; 这句去掉就ok了。
我早试过了，如果去了这个的话，我的按钮点击就没反应了，只有点击其他的按钮的时候有的时候会出来
[/Quote]

有反应额，还有你的下面的弹出层宽度要调整。
zhanglongjason 2010-09-15
  • 打赏
  • 举报
 回复
有没有什么好的方法让他能显示出来啊，这到底什么问题啊，都不知道吗
jacklong2 2010-09-15
  • 打赏
  • 举报
 回复
学习了
zhanglongjason 2010-09-15
  • 打赏
  • 举报
 回复
纠结啊
zhouzangood 2010-09-15
  • 打赏
  • 举报
 回复
每天回帖即可获得10分可用分
zhanglongjason 2010-09-15
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 adengliuqing 的回复:]

POSITION: absolute; 这句去掉就ok了。
[/Quote]我早试过了，如果去了这个的话，我的按钮点击就没反应了，只有点击其他的按钮的时候有的时候会出来
米娜Rose 2010-09-15
  • 打赏
  • 举报
 回复
POSITION: absolute; 这句去掉就ok了。
zhanglongjason 2010-09-15
  • 打赏
  • 举报
 回复

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<style type="text/css">.menubar {
BORDER-RIGHT: 1px outset; BORDER-TOP: 1px outset; BACKGROUND: #0099cc; BORDER-LEFT: 1px outset; WIDTH: 100px; CURSOR: default; COLOR: yellow; BORDER-BOTTOM: 1px outset; POSITION: absolute; TOP: 10px; HEIGHT: 20px
}
.menu {
BORDER-RIGHT:red 2px outset; PADDING-RIGHT:15px; BORDER-TOP:red 2px outset; DISPLAY: none; PADDING-LEFT:15px; BACKGROUND: yellow; PADDING-BOTTOM:15px; BORDER-LEFT:red 2px outset; WIDTH: 140px; PADDING-TOP: 15px; BORDER-BOTTOM:red 2px outset; POSITION: absolute; TOP: 30px
}
.menu A {
COLOR: blue; TEXT-DECORATION: none
}
.menu A:hover {
COLOR: #ffffff
}
</style>
<script language="javascript">
function menuControl(show)
{
window.event.cancelBubble=true;
var objID=event.srcElement.id;
var index=objID.indexOf("_");
var mainID=objID.substring(0,index);
var numID=objID.substring(index+1,objID.length);

if(mainID=="menubar")
{
var obj=eval("menu_"+numID);
if(obj.style.display=="none")
eval("showMenu("+"menu_"+numID+")");
else
eval("hideMenu("+"menu_"+numID+")");
}
}
var nbottom=0,speed=7;
function displayMenu(obj)
{
obj.style.clip="rect(0 100% "+nbottom+"% 0)";
nbottom+=speed;
if(nbottom<=100)
{
timerID=setTimeout("displayMenu("+obj.id+"),70");
}
else clearTimeout(timerID);
}
function showMenu(obj)
{
obj.style.display="block";
obj.style.clip="rect(0 0 0 0)";
nbottom=5;
displayMenu(obj);
}
function hideMenu(obj)
{
nbottom=0;
obj.style.display="none";
}
function keepMenu(obj)
{
obj.style.display="block";
}
</script>
<table style="FONT-SIZE: 15px" cellSpacing="0" cellPadding="0" width="400" border="0">
<tbody>
<TR>
<TD width="20%">
<DIV class="menubar" id="menubar_1" onclick="menuControl(1)"
align="center" style="background-image:url('bg_btn.JPG')">教育网站 </DIV></TD>
<TD width="20%">
<DIV class="menubar" id="menubar_2" onclick="menuControl(1)"
align="center">电脑网站 </DIV></TD>
<TD width="20%">
<DIV class="menubar" id="menubar_3" onclick="menuControl(1)"
align="center">免费邮件 </DIV></TD>
<TD width="20%">
<DIV class="menubar" id="menubar_4" onclick="menuControl(1)"
align="center">其它网站 </DIV></TD></TR>
<TR>
<TD width="20%">
<DIV class="menu" id="menu_1" onclick="keepMenu(this)"
align="left"><ul><li style="background-color:red">aaaa</li><li>bbbbbb</li></ul></DIV></TD>
<TD width="20%">
<DIV class="menu" id="menu_2" onclick="keepMenu(this)"
align="left"><A
href="http://www.yesky.com/">天极网</A><BR><A
href="http://www.cfan.cn.net/">电脑爱好者</A><BR><A
href="http://www.intoweb.com.cn/">上网杂志</A> </DIV></TD>
<TD width="20%">
<DIV class="menu" id="menu_3" onclick="keepMenu(this)"
align="left"><A
href="http://www.163.com/">163电子邮件</A><BR><A
href="http://freemail.263.net/">首都在线</A><BR><A
href="http://www.21cn.com/">21CN电子邮件</A><BR><A
href="http://www.chinese.com/">炎皇在线</A> </DIV></TD>
<TD width="20%">
<DIV class="menu" id="menu_4" onclick="keepMenu(this)"
align="left"><A
href="http://www.sohu.com.cn/">搜狐</A><BR><A
href="http://www.yahoo.com/">雅虎</A><BR><A
href="http://www.cseek.com/">搜索客</A><BR><A
href="http://www.sina.com/">新浪网</A><BR><A
href="http://202.102.4.31/51windows/js/httP;//www.cqcas.edu.cn/user/sailing">远航网站</A>
</DIV></TD></TR></tbody></table>
</div>
</form>
</body>
</html>大侠们帮忙调试下
mggstrong 2010-09-15
  • 打赏
  • 举报
 回复
每天回帖即可获得10分可用分！
zhanglongjason 2010-09-15
  • 打赏
  • 举报
 回复
function showMenu(obj)
{
obj.style.display="block";
obj.style.clip="rect(0 0 0 0)";
nbottom=5;
displayMenu(obj);
}
function hideMenu(obj)
{
nbottom=0;
obj.style.display="none";
}
zhanglongjason 2010-09-15
  • 打赏
  • 举报
 回复
这个是我点击的js
function menuControl(show)
{
window.event.cancelBubble=true;
var objID=event.srcElement.id;
var index=objID.indexOf("_");
var mainID=objID.substring(0,index);
var numID=objID.substring(index+1,objID.length);

if(mainID=="menubar")
{
var obj=eval("menu_"+numID);
if(obj.style.display=="none")
eval("showMenu("+"menu_"+numID+")");
else
eval("hideMenu("+"menu_"+numID+")");
}
}
zhanglongjason 2010-09-15
  • 打赏
  • 举报
 回复
可是为什么我的底部边框的颜色为什么改不过来啊
孟子E章 2010-09-15
  • 打赏
  • 举报
 回复
不明白你啥意思，边框跟display没有关系的。
代码测试是有边框的

<style>

    .menuss { float:left; margin-left:157px;

BORDER-RIGHT: 2px outset; PADDING-RIGHT: 15px; display:none; height:50px; border-right:red 1px outset; BORDER-TOP: red 1px outset; PADDING-LEFT: 15px; background-color:White; PADDING-BOTTOM: 6px; BORDER-LEFT:red 1px outset; WIDTH: 70px; PADDING-TOP: 15px; BORDER-BOTTOM:red 1px outset; POSITION: absolute; TOP: 260px

}

</style>





<input onclick="document.getElementById('menu_1').style.display='block'" value="显示" type="button">

<DIV class="menuss" id="menu_1" onclick="keepMenu(this)" align="left">

  <div style="float:left; margin-left:-55px;">

  <ul style="list-style-type:none;line-height:200%; float:left">

  <li style="width:100px;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''"><font style="float:left; font-size:12px;"><img id="imgopen" alt="<%$Resources:Strings,literal800 %>" runat="server" src="../images/r4.png" onclick="fun('open')" style="cursor:hand" /><div style="margin-top:-20px; float:left; margin-left:30px;">活动</div></font></li>

  <li style="width:100px;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''"><font style="float:left; font-size:12px;"><img id="imgclose" runat="server" alt="<%$ Resources:Strings,literal801 %>" src="../images/r3.png" onclick="fun('close')" style="cursor:hand" /><div style="margin-top:-20px; float:left; margin-left:30px;">拒绝</div></font></li>

  </ul> <input id="h1" type="hidden" runat="server" value="../images/r4.png" /> <input id="h2" runat="server" type="hidden" value="../images/r3.png" /></div></DIV>
zhanglongjason 2010-09-15
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 msdnxgh 的回复:]

display:block
[/Quote]不可以这样的，因为我一开始要隐藏那个下拉框，点击后在出来，所有这里不能改的
MSDNXGH 2010-09-15
  • 打赏
  • 举报
 回复
display:block
前端form表单提交_html表单边框怎么加颜色？html form标签的边框颜色实例
本文介绍如何使用CSS为HTML表单添加边框及颜色，通过实例展示如何轻松实现不同颜色与宽度的表单边框。
边框覆盖问题
本文介绍了在CSS布局中解决边框覆盖问题的三种方法：使用1px图片平铺、动态改变边框颜色以及移除边框。通过这些技巧，可以有效地解决元素之间的边框重叠问题。
form标签的action之前 加密_html表单边框怎么加颜色？html form标签的边框颜色实例
本文介绍如何使用CSS为HTML表单添加边框及颜色，通过实例展示如何设置3像素红色边框。
a标签颜色怎么设置的_html表单边框怎么加颜色？html form标签的边框颜色实例
本文介绍如何使用CSS为HTML表单添加边框及颜色，通过实例展示如何轻松实现不同颜色与宽度的表单边框。
控件id属性如何ajax实例_html表单边框怎么加颜色？html form标签的边框颜色实例...
本文介绍如何使用CSS为HTML表单添加边框及颜色，通过实例展示如何设置3像素红色边框。
.NET社区

62,271

社区成员

668,978

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章