网页总是有上边距,且JS脚本只能用于IE_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:17:57
Original
1174 Leute haben es durchsucht

最近需要做一个效果,点击按钮(图片),隐藏左边菜单和上面的Banner条
抄了一个很简单例子回来修改,基本满意,但是存在下面的问题:
1)隐藏Banner的按钮(图片)显示不全,因为这个showtop.html总是消不掉上边距;
2)控制变换图片、FrameSet大小的JS只能在IE下适用;


望大家给予指点
(有八个页面,一个正式的界面效果,代码比较简单,打了AR包,但是上传说太小啦)


(1)index.html

<html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Frame Test</title> <style>  	html,body	{			margin-left:0;			margin-top:0;	}   </style> </head>     <frameset id="mainFrame" rows="70,14,25,*,25" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0">	<frame src="top.html" name="top" id="top" title="top" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/>	<frame src="showtop.html" name="showtop" id="showtop" title="showtop" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/>	<frame src="userinfo.html" name="userinfo" id="userinfo" title="userinfo" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/>	<frameset id="main" cols="200,9,*" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0">	  <frame src="left.html" name="leftmain" id="leftmain" title="leftmain" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/>  	  <frame src="middle.html" name="middlemain" id="middlemain" title="middlemain" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/>  	  <frame src="right.html" name="rightmain" id="rightmain" title="rightmain" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/>	</frameset>	<frame src="bottom.html" name="bottom" id="bottom" title="bottom" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/></frameset> <noframes>	<body>  </body>  </noframes></html>  
Nach dem Login kopieren



(2)top.html
<html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Frame Left</title>  <style>  body{       background-color:#004600; }   </style>  </head>    <body>  </body>  </html>
Nach dem Login kopieren



(3)showtop.html
<html>  <head> <title>Frame Middle</title><style type="text/css"><!--/*body {	background-color:#000000;	margin-top:0px;	height:9px;}img {	margin-top:0px;}-->*/</style>    <script language="javascript">  	function isShowtop()	{   	    if(window.parent.mainFrame.rows == "70,9,25,*,25")	    {   	        window.parent.mainFrame.rows = "0,9,0,*,0";	        document.images['topcontrol'].src='showtop.gif';	    }	    else	    {   	        window.parent.mainFrame.rows = "70,9,25,*,25";	        document.images['topcontrol'].src='hiddetop.gif';  	    }   	}   </script>  </head>    <body> <table border="0" align="center"><tr valign="top"><td valign="bottom"><img  id="topcontrol" src="hiddetop.gif" onclick="isShowtop()" / alt="网页总是有上边距,且JS脚本只能用于IE_html/css_WEB-ITnose" ></td></tr></table>  </body>  </html>
Nach dem Login kopieren



(4)userinfo.html
<html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Frame Left</title>  <style>  body{       background-color:#00CA00;   }   </style>  </head>    <body>  </body>  </html>
Nach dem Login kopieren



(5)left.html
<html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Frame Left</title>  <style>  body{       background-color:#00FF00;   }   </style>  </head>    <body>  </body>  </html>
Nach dem Login kopieren



(6)middle.html
<html>  <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Frame Middle</title>  <style>  	html,body	{			margin-left:0;	}	img	{	    margin-top:200px;	}   </style>  <script language="javascript">  	function isShowleft()	{   	    if(window.parent.main.cols == "200,9,*")	    {   	        window.parent.main.cols = "0,9,*";	        document.images['imghiddetop'].src='showleft.gif';	    }	    else	    {   	        window.parent.main.cols = "200,9,*";	        document.images['imghiddetop'].src='hiddeleft.gif';	    }   	}   </script>  </head>    <body>  	<img  id="imghiddetop" src="hiddeleft.gif" onclick="isShowleft()"  / alt="网页总是有上边距,且JS脚本只能用于IE_html/css_WEB-ITnose" >  </body>  </html>
Nach dem Login kopieren


(7)right.html
<html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Frame Right</title>  <style>  body{       background-color:#0000FF;   }   </style>  </head>    <body>  </body>  </html>  
Nach dem Login kopieren



(8)bottom.html
<html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Frame Left</title>  <style>  body{       background-color:#AC0000;   }   </style>  </head>    <body>  </body>  </html>
Nach dem Login kopieren


回复讨论(解决方案)

showtop.html错了
是乱改之后的版本………………

原始版本CSS没有被注释,Body里没有Table\tr\td,只有网页总是有上边距,且JS脚本只能用于IE_html/css_WEB-ITnose


<html>  <head> <title>Frame Middle</title><style type="text/css">body {	background-color:#000000;	margin-top:0px;	height:9px;}img {	margin-top:0px;}</style>    <script language="javascript">  	function isShowtop()	{   	    if(window.parent.mainFrame.rows == "70,9,25,*,25")	    {   	        window.parent.mainFrame.rows = "0,9,0,*,0";	        document.images['topcontrol'].src='showtop.gif';	    }	    else	    {   	        window.parent.mainFrame.rows = "70,9,25,*,25";	        document.images['topcontrol'].src='hiddetop.gif';  	    }   	}   </script>  </head>    <body> <img  id="topcontrol" src="hiddetop.gif" onclick="isShowtop()" / alt="网页总是有上边距,且JS脚本只能用于IE_html/css_WEB-ITnose" > </body>  </html>
Nach dem Login kopieren

1.楼主指的上边距是?
2.修改两个JS即可

middle.html

    <script type="text/javascript">      function isShowleft()    {        if (window.parent.window.document.getElementById("main").cols == "200,9,*")        {            window.parent.window.document.getElementById("main").cols = "0,9,*";            document.images['imghiddetop'].src = 'http://csdnimg.cn/bbs/m/i/yellow_1.gif';        }        else        {            window.parent.window.document.getElementById("main").cols = "200,9,*";            document.images['imghiddetop'].src = 'http://csdnimg.cn/bbs/m/i/yellow_1.gif';        }       }       </script>
Nach dem Login kopieren



-------------------------------------------------------

showtop.html

70,9,25,*,25 ==>70,14,25,*,25

    <script type="text/javascript">        function isShowtop() {            if (window.parent.window.document.getElementById("mainFrame").rows == "70,14,25,*,25") {                window.parent.window.document.getElementById("mainFrame").rows = "0,9,0,*,0";                document.images['topcontrol'].src = 'http://csdnimg.cn/bbs/m/i/yellow_1.gif';            }            else {                window.parent.window.document.getElementById("mainFrame").rows = "70,14,25,*,25";                document.images['topcontrol'].src = 'http://csdnimg.cn/bbs/m/i/yellow_1.gif';            }        }       </script>
Nach dem Login kopieren

PS:
楼主的花花好多
膜拜下

………………
showtop.html在火狐下没有上边距,在IE下就有

………………
showtop.html在火狐下没有上边距,在IE下就有
IE下有默认边距的。
一般用下面的清除边距,消除差异,然后再设置所有CSS:
* {margin:0;padding:0}

引用 7 楼 ccs02287 的回复:
………………
showtop.html在火狐下没有上边距,在IE下就有

IE下有默认边距的。
一般用下面的清除边距,消除差异,然后再设置所有CSS:
* {margin:0;padding:0}

非常感谢!

其实吧,所谓多浏览器运行,无非就是在frameset做点手脚,只是语法问题而已。
变量=window.parent.document.getElementById(’你的frameset名字‘);
变量.cols="frame的宽度变化";这样写个判断就认了,很坑爹的...需要的话我可以传段JS大家一起试试。。。

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage