如何制作簡(jiǎn)易DIV懸浮框的具體方法，可以用在dz的diy里面

大師兄

我們?cè)谶M(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，經(jīng)常會(huì)遇到想設(shè)定一個(gè)懸浮DIV，卻不知道怎么做的情況，下面我將告訴大家怎樣制作一個(gè)簡(jiǎn)單的DIV懸浮框。
使用Dreamweaver軟件，打開(kāi)一個(gè)已經(jīng)編輯完成的html頁(yè)面。

然后打開(kāi)折疊的body標(biāo)簽，在標(biāo)簽的末尾添加一個(gè)DIV

1. </div>
   
2. </div>
   
3. <div class="khfwpingtai">
   
4. </div>
   
5. </body>
   
6. </html>

復(fù)制代碼

在DIV里面加入一個(gè)img標(biāo)簽，src指向images文件夾中的一張圖片

1. <div class="khfwpingtai">
   
2. <img src="images/khfwpt.png">
   
3. </div>
   
4. </body>

復(fù)制代碼

這時(shí)的div并沒(méi)有相應(yīng)的css樣式，只處在整個(gè)網(wǎng)頁(yè)的左下角
接下來(lái)我們就需要將給其添加一定的css樣式，為了簡(jiǎn)便起見(jiàn)，我的css樣式就寫(xiě)在頁(yè)面的body標(biāo)簽里面了。
<style>
</style>
首先我們要讓這個(gè)DIV的position樣式為fixed，意為相對(duì)于屏幕定位。然后將top設(shè)為20px;right也設(shè)為20px;這樣我們的div就固定在相對(duì)距離屏幕上方和右方分別20個(gè)像素的地方

1. .khfwpingtai{display:block; position:fixed; top:20px; right:20px; height:60px; width:180px;}

復(fù)制代碼

這樣就可以了。

• 元素相對(duì)位置，只需要設(shè)定上下左右的兩個(gè)中的一個(gè)即可。例如只設(shè)定上右，便可以確定元素的位置
  
• 一定要將元素的position屬性設(shè)為fixed，這樣才是懸浮的，才能相對(duì)于屏幕是懸浮的
  
  

道勤主機(jī)提供365天*24小時(shí)全年全天無(wú)休、實(shí)時(shí)在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過(guò)程中所遇到的一切問(wèn)題! 如果您是道勤主機(jī)用戶，那么您可以通過(guò)QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費(fèi)電話、后臺(tái)提交工單這些方式聯(lián)系道勤主機(jī)客服！ 如果您不是我們的客戶也沒(méi)問(wèn)題，點(diǎn)擊頁(yè)面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購(gòu)買(mǎi)后，我們?yōu)槟�免費(fèi)進(jìn)行無(wú)縫搬家服務(wù)，讓您享受網(wǎng)站零訪問(wèn)延遲的遷移到道勤主機(jī)的服務(wù)！