問題分析:
HTML中的浮動窗口,可以使用CSS的定位方式完成,同時使用這種方式來完成這個功能也是壹種較為簡單的方式,只需要有HTML以及CSS的知識就可以完成了。
舉例如下:
在以下示例中,將演示頁面左右兩側分別放置壹個高度為500像素,寬度為200像素的浮動窗口。示例中使用的定位方式為:固定定位(fixed),所有它們將永遠的跟隨頁面進行滾動。
HTML代碼:
<div?id="left"><p>我是左側浮動窗口的內容</p>
</div>
<div?id="right">
<p>我是右側浮動窗口的內容</p>
</div>
CSS代碼:
body{/*
*?為body標簽設置背景僅僅是為了演示效果。 *?與浮動窗口本身無關。 */background-color:?#ccc;
}
#left,?#right{
position:?fixed;
top:?100px;
width:?200px;
height:?500px;
line-height:?500px;
text-align:?center;
border:?1px?solid?#000;
background-color:?#FFF;
}
#left{
left:?50px;
}
#right{
right:?50px;
}
頁面初始化效果: