什" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > HTML中怎么做懸浮框?

HTML中怎么做懸浮框?

時間:2023-10-05 15:48:01 | 來源:網(wǎng)站運(yùn)營

時間:2023-10-05 15:48:01 來源:網(wǎng)站運(yùn)營

HTML中怎么做懸浮框?:懸浮框是什么?大家不一定清楚,但是說網(wǎng)站上怎么都關(guān)不完的小廣告,估計人人都被它惡心過,不管你怎么滾動網(wǎng)頁,這些小廣告始終會出現(xiàn)在你的屏幕上。今天我們就來聊聊這些小廣告背后的原理——懸浮框。

什么是懸浮框?

懸浮框是Web前端開發(fā)中的一種常見的網(wǎng)頁特效,它懸浮于網(wǎng)頁內(nèi)容之上,不受滾動條的影響,可以一直處于瀏覽器的可視區(qū)域內(nèi)。

通過懸浮框,我們可以為用戶展示一些特定的信息(如提示信息、廣告信息),也可以在懸浮框中提供一些常用的按鈕(如“返回頂部”按鈕、“分享”按鈕)方便用戶操作。

下面為大家展示一些網(wǎng)頁中常見的懸浮框效果。

(1)當(dāng)用戶使用百度進(jìn)行搜索時,在搜索結(jié)果頁面的頂部會出現(xiàn)懸浮框。該懸浮框會一直懸浮在網(wǎng)頁頂部,不受用戶滾動頁面的影響,如下圖所示。

(2)用戶在騰訊網(wǎng)瀏覽新聞時,右下角會出現(xiàn)兩個小按鈕,分別是“用戶反饋”和“^”(返回頂部),這兩個小按鈕就是通過懸浮框來實(shí)現(xiàn)的,如下圖所示。

如何實(shí)現(xiàn)懸浮框?

對于Web前端開發(fā)不熟悉的朋友們來說,也許會覺得懸浮框做起來很不容易,需要用大量的JavaScript代碼才能實(shí)現(xiàn)。

實(shí)際上,懸浮框做起來很簡單,它主要是通過CSS代碼來實(shí)現(xiàn)的。在學(xué)習(xí)CSS的時候,大家是不是都學(xué)過定位(position)呢?還有印象嗎?

我們來回顧一下。在CSS中,position屬性可以設(shè)置元素的定位方式。position屬性有4個常用的可選值,分別表示的含義如下。

在回顧了position屬性的4個可選值以后,請大家思考一下,實(shí)現(xiàn)懸浮框,應(yīng)該使用哪一種定義方式呢?

答案是:fixed固定定位。

當(dāng)對元素設(shè)置固定定位后,該元素將脫離標(biāo)準(zhǔn)文檔流的控制,始終依據(jù)瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動,也不管瀏覽器窗口的大小如何變化,該元素都會始終顯示在瀏覽器窗口的固定位置。

下面我們通過一個具體案例來實(shí)現(xiàn)懸浮框效果,案例的效果圖如下所示。

在上圖中,頁面右下角的“返回頂部”就是一個懸浮框,當(dāng)用戶單擊該懸浮框后就會返回頂部。

下面講解本案例的具體實(shí)現(xiàn)步驟。

(1)創(chuàng)建一個HTML文件,在文件中編寫簡單的網(wǎng)頁結(jié)構(gòu)和內(nèi)容,具體代碼如下。

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> /* 此處用于編寫懸浮框的樣式 */ </style></head><body> <!-- 此處用于編寫網(wǎng)頁結(jié)構(gòu) --></body></html>(2)在第11行代碼的位置,新增如下代碼,為網(wǎng)頁填充內(nèi)容,并完成懸浮框的頁面結(jié)構(gòu)。

<div> <p>網(wǎng)頁內(nèi)容</p> <p>網(wǎng)頁內(nèi)容</p> <p>網(wǎng)頁內(nèi)容</p> <p>網(wǎng)頁內(nèi)容</p> <p>網(wǎng)頁內(nèi)容</p> <p>網(wǎng)頁內(nèi)容</p> ……(大家可以把上面的p標(biāo)簽多復(fù)制幾行,以填充網(wǎng)頁內(nèi)容) </div> <!-- 懸浮框結(jié)構(gòu) --> <div class="go-top"> <a href="#">返回<br>頂部</a> </div>上述代碼中,第2~7行代碼用于簡單填充網(wǎng)頁內(nèi)容,使網(wǎng)頁出現(xiàn)滾動條;第10~13行代碼用于實(shí)現(xiàn)懸浮框結(jié)構(gòu)。

(3)在<style>標(biāo)簽內(nèi)編寫頁面樣式,通過fixed固定定位使懸浮框停留在頁面右下角的位置,并美化懸浮框的樣式,將其調(diào)整為圓角矩形,背景為淺灰色。

.go-top { position: fixed; /* 設(shè)置fixed固定定位 */ bottom: 20px; /* 距離瀏覽器窗口下邊框20px */ right: 20px; /* 距離瀏覽器窗口右邊框20px */ } .go-top a { display: block; /* 將<a>標(biāo)簽設(shè)為塊元素,用于美化樣式 */ text-decoration: none; /* 取消超鏈接下畫線 */ color: #333; /* 設(shè)置文本顏色 */ background-color: #f2f2f2; /* 設(shè)置背景顏色 */ border: 1px solid #ccc; /* 設(shè)置邊框樣式 */ padding: 10px 20px; /* 設(shè)置內(nèi)邊距 */ border-radius: 5px; /* 設(shè)置圓角矩形 */ letter-spacing: 2px; /* 設(shè)置文字間距 */ }案例最終的實(shí)現(xiàn)效果如下:



關(guān)鍵詞:懸浮

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉