免費(fèi)AI編程助手
我們?cè)趯W(xué)習(xí) HTML 中的盒子之后，我們就會(huì)想怎么樣才可以把 A 盒子讓 B 盒子覆蓋在 A 盒子之上呢？這個(gè)的話就涉及到我們的懸浮設(shè)置了，那么今天我們就來說說“在html中怎么設(shè)置div懸浮“和}“懸浮怎么設(shè)置“吧！
1.那么首先呢，我們要來新建一個(gè)新的 .html 文件，在文件中我們插入兩個(gè) ?div ?標(biāo)簽方便等等我們來對(duì)比看看是怎么個(gè)浮動(dòng)的方法呢！那么接下來就是我們的代碼部分了，在各個(gè) ?div ?標(biāo)簽中加入我們的類選擇器，有不懂的可以小伙伴們可以在CSS選擇器中進(jìn)行學(xué)習(xí)和回顧哦！代碼截圖如下：
<html>
<head>
<meta charset="utf-8">
<title>懸浮設(shè)置</title>
<style>
.float_box_seting {
width: 500px;
height: 150px;
background-color: antiquewhite; }
div p {
text-align: center; }
.float_box_discover {
background-color: aqua;
width: 150px; }
</style>
</head>
<body>
<div class="float_box_seting">
<p> 清平調(diào)·其一</p>
<p>李白 〔唐代〕</p>
<p>云想衣裳花想容，春風(fēng)拂檻露華濃。</p>
<p>若非群玉山頭見，會(huì)向瑤臺(tái)月下逢。</p>
</div>
<div class="float_box_discover">
顯示懸浮盒子的位置
</div>
</body>
</html>
在代碼塊中，我們使用了一個(gè)內(nèi)聯(lián)式的一個(gè)CSS的樣式，有關(guān)于樣式知識(shí)不清楚地小伙伴們，可以在HTML引入CSS常見方法及解析中進(jìn)行一個(gè)復(fù)習(xí)和了解噢！
2.在完成上面這個(gè)創(chuàng)建步驟后，我們也看到了一個(gè)效果圖，那么怎么設(shè)置浮動(dòng)的話這步就可以看到效果了啦！我們根據(jù)上面所提供的代碼中加入一個(gè) ?position ?元素，在這個(gè)元素中在加入一個(gè) ?absolute ?用來設(shè)置浮動(dòng)的盒子的位置，對(duì)于絕對(duì)定位和相對(duì)定位不了解的小伙伴可以在定位用法解析說明中進(jìn)行學(xué)習(xí)和了解噢，代碼如下：
.float_box_discover {
background-color: aqua;
width: 150px;
text-align: center;
position: absolute;
top: 55px;
left: 55px;
}
我們從這個(gè) CSS代碼中可以看到我們?cè)谑褂?position 這個(gè)元素之后 還設(shè)置了這個(gè)盒子的上邊距和左邊邊距，那么我們來看看最后的效果圖吧！
在效果圖中我們可以看到，藍(lán)色盒子已經(jīng)懸浮在第一個(gè)盒子"李白 〔唐代〕"這個(gè)文本旁邊了，說明我們已經(jīng)設(shè)置成功了。
小結(jié)：
那么這就是今天的一個(gè)有關(guān)于”在html中怎么設(shè)置div懸??？”和“懸浮怎么設(shè)置？”的一個(gè)方法，當(dāng)然如果你有更好的一個(gè)方法的話也可以和大家一起來分享討論噢！希望這些建議對(duì)你有所幫助，更多有關(guān)于HTML的知識(shí)和學(xué)習(xí)內(nèi)容我們都可以在Web前端入門掃盲課程中進(jìn)行學(xué)習(xí)噢。
