HTML 廣告窗口代碼 在網(wǎng)頁(yè)設(shè)計(jì)中，我們常常需要在頁(yè)面上添加廣告窗口來(lái)展示商品或服務(wù)。下面是一個(gè)簡(jiǎn)單的 HTML 廣告窗口代碼示例：

<div id="ad-container">
<div id="ad-header">
<h2>精品推薦</h2>
<a href="#" id="ad-close">X</a>
</div>
<div id="ad-body">
<p>這里是廣告內(nèi)容。</p>
</div>
</div>

上面的代碼包含一個(gè) div 元素，它有一個(gè) id 為 "ad-container"。這是廣告窗口的主容器。在該容器內(nèi)，我們又創(chuàng)建了一個(gè) div 元素，它有一個(gè) id 為 "ad-header"。這個(gè)頭部區(qū)域包含了廣告窗口的標(biāo)題以及一個(gè)關(guān)閉按鈕。接下來(lái)，我們創(chuàng)建了另一個(gè) div 元素，它有一個(gè) id 為 "ad-body"。這個(gè)主體區(qū)域包含了廣告的具體內(nèi)容。 下面是一個(gè)簡(jiǎn)單的 CSS 樣式，可以讓廣告窗口居中并使其看起來(lái)更漂亮：

#ad-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 300px;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
overflow: hidden;
}
#ad-header {
font-size: 22px;
color: #fff;
background-color: #333;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
#ad-header a {
color: #fff;
}
#ad-body {
padding: 20px;
}

上述代碼將廣告窗口定義為一個(gè)固定定位的 div 元素。它的 top 和 left 屬性設(shè)置為 50%，這樣就可以將其水平垂直居中。由于廣告窗口的寬度和高度已經(jīng)指定，所以我們還需要將它的左上角向左和向上移動(dòng)一半的寬度和高度。這樣就可以將廣告窗口完美居中。 接下來(lái)，我們給廣告窗口添加了一些樣式，包括一個(gè)白色背景，陰影效果以及內(nèi)邊距。我們還通過(guò)使用 display 和 justify-content 屬性將關(guān)閉按鈕放置在標(biāo)題欄的右側(cè)。 最后，我們將廣告窗口的主體區(qū)域添加了一些內(nèi)邊距。這將確保內(nèi)容與邊框之間有更多空間，使其更美觀。 總之，HTML 廣告窗口代碼是一個(gè)非常有用的工具，可以提高網(wǎng)站的銷售和轉(zhuǎn)化率。通過(guò)學(xué)習(xí)上面的示例，我們可以更好地理解如何創(chuàng)建 HTML 廣告窗口，并為網(wǎng)站添加設(shè)計(jì)美學(xué)。