div+css隐藏内容方法
一般情况下,css隐藏的用途
1、对文本的隐藏
2、隐藏超链接(另类黑链)
3、对统计代码隐藏
4、隐藏超出图片
5、css隐藏滚动条
6、css来隐藏div层
使用css隐藏方法
1、使用display:none来隐藏所有信息(无空白位占据)推荐,CSS display手册查看
2、使用overflow:hidden来隐藏溢出的文字或图片 适用推荐,css overflow手册查看
3、使用overflow-y:hidden和overflow-x:hidden控制滚动条的隐藏与否,css overflow-y手册查看,css手册查看overflow-x
常见div css隐藏案例
1、对display:none文本图片的隐藏如
<div style="display:none">你是看不见我的</div>
使用div 中css样式display:none将使得div内的内容隐藏通过浏览器什么也看不见,并且隐藏的内容也不会占用空间。通过此方法可以隐藏超链接文本(黑链)和图片等内容同时也会隐藏div层样式。推荐使用隐藏内容。
2、overflow: hidden 隐藏内容或图片
实例如:
我是可以看见的<br/><br/>
<div style="overflow: hidden width:30px height:20px">你是看不见我的。</div>
<br/>
同样我也是可以看见的
使用css样式通过对“你是看不见我的”div css层设置固定的高和宽,然后通过overflow: hidden样式即可使得超出固定的高宽内容隐藏同时也不占用被隐藏地方位置。
3、使用overflow-y:hidden和overflow-x:hidden来隐藏或显示对应横或竖方向的滚动条。此案例可以进入css手册的overflow-y和css在线手册的overflow-x有详细的讲解对滚动条的设置隐藏或显示方法。
CSS隐藏代码<div style="overflow: hiddenwidth:30pxheight:20px">你是看不见我的。</div><script language="JavaScript">
function myrefresh(){
window.location.reload()
}
setTimeout('myrefresh()',1000)//指定1秒刷新一次
</script>页面自动刷新代码大全
1)自动刷新页面在 <body>与 </body>之间加入:<META http-equiv=refresh content=”10url=../index.htm”>
10表示间隔10秒刷新一次
2)
<script>
window.location.reload(true)
</script>
如果是你要刷新某一个iframe就把window给换成frame的名字或ID号
3)
<script>
window.navigate(”本页面url”)
</script>
4>function abc()
{
window.location.href=”/blog/window.location.href”
setTimeout(”abc()”,10000)
}刷新本页:
Response.Write(”<script>window.location.href=”/window.location.href”</script>”)刷新父页:
Response.Write(”<script>opener.location.href=”/opener.location.href”</script>”)转到指定页:
Response.Write(”<script>window.location.href=”/yourpage.aspx”</script>”)
刷新页面实现方式总结(HTML,ASP,JS)
‘by aloxy定时刷新:
1,<script>setTimeout(”location.href=”/url’”,2000)</script>说明:url是要刷新的页面URL地址
2000是等待时间=2秒,2,说明:
n is the number of seconds to wait before loading the specified URL.
url is an absolute URL to be loaded.
n,是等待的时间,以秒为单位
url是要刷新的页面URL地址3,<!–sponse.redirect ur–>说明:一般用一个url参数或者表单传值判断是否发生某个操作,然后利用response.redirect 刷新。4,刷新框架页
〈script language=javascript>top.leftFrm.location.reload()parent.frmTop.location.reload()弹出窗体后再刷新的问题
Response.Write(”<script>window.showModalDialog(’../OA/SPCL.aspx’,window,’dialogHeight: 300pxdialogWidth: 427pxdialogTop: 200pxdialogLeft: 133px’)</script>”)//open
Response.Write(”<script>document.location=document.location</script>”)在子窗体页面代码head中加入刷新的内容加在 if (!IsPostBack) 中在框架页中右面刷新左面
//刷新框架页左半部分
Response.Write(”<script>”)
Response.Write(”parent.left.location.href=’PayDetailManage_Left.aspx’”)
Response.Write(”</script>”)
页面定时刷新功能实现有三种方法:
1,在html中设置:
之後加入下面这一行即可!
定时刷新:
10代表刷新间隔,单位为秒2.jsp
<!–esponse.setHeader(”refresh”,”1″)–>
每一秒刷新一次3.使用javascript:
<script>
setTimeout(”self.location.reload()”,1000)
<script>
一秒一次
页面自动跳转:
1,在html中设置:
之後加入下面这一行即可!定时跳转并刷新: ,
其中20指隔20秒后跳转到http://自己的URL 页面。
点击按钮提交表单后刷新上级窗口
A窗口打开B窗口然后在B里面提交数据至C窗口最后要刷新A窗口并且关闭B窗口几个javascript函数//第一个自动关闭窗口
<script>
<!–
function clock(){i=i-1
document.title=”本窗口将在”+i+”秒后自动关闭!”
if(i>0)setTimeout(”clock()”,1000)
else self.close()}
var i=2
clock()
//–>
</script>//第二个刷新父页面的函数<script>
opener.location.reload()
</script>
//第三个打开窗口<script>
function show(mylink,mytitle,width,height)
{mailwin=window.open(mylink,mytitle,’top=350,left=460,width=’+width+’,height=’+height+’,scrollbars=no’)}
</script>
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。下面一个个列出,选一个适合你的 { display: none/* 不占据空间,无法点击 */ } { visibility: hidden/* 占据空间,无法在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。下面一个个列出,选一个适合你的
{ display: none/* 不占据空间,无法点击 */ }
{ visibility: hidden/* 占据空间,无法点击 */ }
{ position: absolutetop: -999em/* 不占据空间,无法点击 */ }
{ position: relativetop: -999em/* 占据空间,无法点击 */ }
{ position: absolutevisibility: hidden/* 不占据空间,无法点击 */ }
{ height: 0overflow: hidden/* 不占据空间,无法点击 */ }
{ opacity: 0filter:Alpha(opacity=0)/* 占据空间,可以点击 */ }
{ position: absoluteopacity: 0filter:Alpha(opacity=0)/* 不占据空间,可以点击 */ }{
zoom: 0.001
-moz-transform: scale(0)
-webkit-transform: scale(0)
-o-transform: scale(0)
transform: scale(0)
/* IE6/IE7/IE9不占据空间,IE8/FireFox/Chrome/Opera占据空间。都无法点击 */}{
position: absolute
zoom: 0.001
-moz-transform: scale(0)
-webkit-transform: scale(0)
-o-transform: scale(0)
/* 不占据空间,无法点击 */}