當前位置:編程學習大全網 - 編程軟體 - html中浮動窗口怎麽做啊?就是壹個小窗口飄在在頁面上那種

html中浮動窗口怎麽做啊?就是壹個小窗口飄在在頁面上那種

問題分析:

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;

}

頁面初始化效果:

  • 上一篇:液壓閥體與閥芯的公差配合是怎樣的?
  • 下一篇:初中畢業讀職高可以選擇哪些專業呢?
  • copyright 2024編程學習大全網