現(xiàn)在很多門戶網(wǎng)站頁面內(nèi)容龐大,都會往下拉很長,在以前我們想回頂部的時候要不斷往上滾動鼠標(biāo)的滾輪,直到滾到頂部為止,現(xiàn)在如果大家細(xì)心觀察右下角是不是有一個點(diǎn)擊回到頂部的按鈕呢,對,今天我要說的就這個按鈕的布局,閑話不多說,直接上代碼,在代碼中我盡量的標(biāo)注css樣式,以方便大家閱讀;
復(fù)制代碼代碼如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /
titlefixed定位,解決IE6閃動問題/title
style type="text/css"
*html{
background-image:url(about:blank);
background-attachment:fixed;
}/*此代碼解決IE6.0下不會出現(xiàn)閃動*/
.backgroundBox {
border:1px solid orange;
width:100px;
height:2000px;
}
.fixedBox {
border:1px solid red;
width:100px;
height:100px;
position:fixed; /*支持實(shí)現(xiàn)w3c標(biāo)準(zhǔn)的瀏覽器*/
_position:absolute; /*單獨(dú)針對IE6*/
left:200px; /*距離頂部200px*/
top:200px; /*距離右邊200px*/
_top:expression(eval(document.documentElement.scrollTop 200)); /* 200是IE6.0下面距離瀏覽器窗口頂部的位置*/
/*IE6.0下面距離底部位置為0px*/
/*_top:expression(eval(document.documentElement.scrollTop document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));*/
}
/style
/head
body
div class="backgroundBox"/div
div class="fixedBox"fixed box/div
/body
/html
推薦閱讀
- IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一覽表
- css FF與IE兼容性總結(jié)
- ie下的css層疊z-index各種問題詳細(xì)整理
- 一句代碼解決css ie8兼容性問題
- IE的CSS制作網(wǎng)頁技巧3則
- css中IE判斷語句 if !IE
- IE下css常見問題總結(jié)及解決
- 區(qū)別各種IE瀏覽器的css寫法
- CSS中height和width在IE和其他瀏覽器中的區(qū)別圖文詳解
- CSS hack 針對IE6,IE7,firefox顯示不同效果
