今天介紹一個網頁上常用的右下角布局實例,其實實現起來挺簡單,也就是相對定位和絕對定位的用法,這裡要使用絕對定位:
CSS代碼部分:
1
* {
margin
:
0
;
padding
:
0
;}
/*設置頁面邊距為0,可以去掉,依你網頁而定*/
2
.rigdown {
position
:
fixed
;
bottom
:
0
;
right
:
0
;
_position
:
absolute
;
width
:
300px
;
height
:
250px
;
border
:
2px
solid
green
;
background
:
#eeeeee
;
padding
:
10px
;}
/*在此絕對定位距頁面的距離,右邊=0,下邊=0*/
Html部分:
1
<
body
>
2
<
div
class
=
"rigdown"
>這裡是右下角中要顯示的內容哦</
div
>
3
</body
為了兼容其它浏覽器,使用了position:fixed;以及_position:absolute;,大家可作下測試,我在IE8下完美實現。