Rumah > hujung hadapan web > html tutorial > 网页总是有上边距,且JS脚本只能用于IE_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-24 12:17:57
asal
1195 orang telah melayarinya

最近需要做一个效果,点击按钮(图片),隐藏左边菜单和上面的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>  
Salin selepas log masuk



(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>
Salin selepas log masuk



(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>
Salin selepas log masuk



(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>
Salin selepas log masuk



(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>
Salin selepas log masuk



(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>
Salin selepas log masuk


(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>  
Salin selepas log masuk



(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>
Salin selepas log masuk


回复讨论(解决方案)

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>
Salin selepas log masuk

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>
Salin selepas log masuk



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

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>
Salin selepas log masuk

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大家一起试试。。。

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan