fixed 生成絕對定位的元素,相對於瀏覽器窗口進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
但是在IE6下,並不支持position:fixed屬性,這個時候我們需要對IE6進行hack處理。解決的方案是使用postion:absolute屬性,它的作用大家都很熟悉,相對於父元素進行絕對定位,然后我們可以通過expression來改變#ads的top值。
什么是expression?
expression的定義:IE5及其以后版本支持在CSS中使用expression,用來把CSS屬性和Javascript表達式關聯起來,這里的CSS屬性可以是元素固有的屬性,也可以是自定義屬性。就是說CSS屬性后面可以是一段Javascript表達式,CSS屬性的值等於Javascript表達式計算的結果。在表達式中可以直接引用元素自身的屬性和方法,也可以使用其他瀏覽器對象。這個表達式就好像是在這個元素的一個成員函數中一樣。
重要代碼如下:(注意css中對IE6兼容的處理)
/* 實例CSS */
html{ _background:url(about:blank);} /*阻止閃動 in IE6 , 把空文件換成about:blank , 減少請求*/
body{ font-size:12px; font-family:Arial,Tahoma,sans-serif; color:#EEEEEE; text-align:center; background:#E2E2E2;}
#header{
width:100%;
height:80px;
line-height:80px;
background:#333
}
#topToolbar{
_display:none;
width:100%;
height:40px;
line-height:40px;
background:#333;
position:fixed;
top:-40px;
left:0;
_top:0;
_position:absolute;
_top:expression(documentElement.scrollTop);
}
#content{
border:1px solid #f00;
width:880px;
height:1390px;
margin:auto
}
#bottomToolbar{
width:100%;
height:40px;
line-height:40px;
background:#333;
position:fixed;
bottom:0;
left:0;
_position:absolute;
_top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);
/*
document.body.scrollTop 網頁滾動的距離
document.body.clientHeight 網頁可見區域高
this.offsetHeight 當前元素的高度
*/
}
導航菜單html模板
來源:http://www.huiyi8.com/daohang/html/