HTML彈窗是一種常見的網(wǎng)頁交互方式，可以在頁面中彈出一個小窗口來進行提示、確認或輸入等操作。為了使彈窗更美觀和適合網(wǎng)頁風(fēng)格，我們可以對其進行樣式設(shè)置。

.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 300px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
overflow: auto;
}
.popup-header {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
}
.popup-body {
padding: 20px;
}
.popup-footer {
text-align: right;
padding: 10px 20px;
}
.popup-btn {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}

在上面的代碼中，我們定義了一個彈窗的大框架`.popup`，包括其在頁面中的位置和大小，背景顏色、邊框和陰影等屬性。`overflow: auto`是為了讓內(nèi)容溢出時自動出現(xiàn)滾動條。

在`.popup-header`中，我們定義了頭部的樣式，包括背景色、字體顏色和大小等。同樣，在`.popup-body`中，我們定義了彈窗內(nèi)容的樣式，包括內(nèi)邊距等。在`.popup-footer`中，我們定義了彈窗底部的樣式，包括文本對齊方式和內(nèi)邊距等。

最后，我們定義了一個公共樣式`.popup-btn`，用于彈窗中的按鈕。這里我們設(shè)置了按鈕的背景色、字體顏色、內(nèi)外邊距和邊框圓角等屬性。