下面是一個簡單的浮動窗口HTML代碼:
<div class="float-window"> <a href="#" class="close">✖</a> <h3>這里是標題</h3> <p>這里是內容。</p> </div> .float-window { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } .float-window a.close { position: absolute; top: -10px; right: -10px; font-size: 20px; color: #999; text-decoration: none; } .float-window h3 { margin-top: 0; font-size: 16px; } .float-window p { font-size: 14px; }這段代碼創建了一個帶有標題和內容的浮動窗口,同時還有一個關閉按鈕。浮動窗口的樣式定義在`.float-window` CSS類中,其中`position: absolute`將其定位到父元素的任意位置。`top`和`left`屬性將其定位到父元素的中心,`transform: translate(-50%, -50%)`稍微調整其位置以完全居中。 浮動窗口有一個``元素作為關閉按鈕,其樣式定義在`.float-window a.close`類中,其中`position: absolute`將其定位到右上角。`font-size`和`color`屬性定義了關閉按鈕的外觀。 浮動窗口中包含一個標題`
`元素和一個內容`
`元素。 總之,這個浮動窗口是一個簡單且有用的組件,可以輕松添加到任何網站中。