在網頁設計中，彈窗(alert) 是一個非常流行的交互設計形式，它可以在網頁中以彈窗的形式展示特定的信息，警示用戶或提醒用戶進行特定的操作。為了讓彈窗具有更好的樣式和用戶體驗，我們通常會對彈窗進行樣式設置。下面是一段簡單的彈窗樣式 html 代碼：

<style>
.alert {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
z-index: 1000;
}
.alert-box {
width: 360px;
background-color: #fff;
border-radius: 10px;
padding: 20px;
margin: auto;
margin-top: 20%;
}
.alert-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.alert-message {
font-size: 14px;
color: #666;
margin-bottom: 20px;
}
.alert-button {
background-color: #007bff;
border-radius: 5px;
color: #fff;
padding: 10px 20px;
cursor: pointer;
}
</style>
<div class="alert">
<div class="alert-box">
<p class="alert-title">提示信息</p>
<p class="alert-message">這里是提示信息內容</p>
<button class="alert-button">確定</button>
</div>
</div>
<script>
function showAlert() {
var alertBox = document.querySelector('.alert');
alertBox.style.display = 'flex';
}
function hideAlert() {
var alertBox = document.querySelector('.alert');
alertBox.style.display = 'none';
}
var button = document.querySelector('.alert-button');
button.addEventListener('click', hideAlert);
</script>

上面是一個彈窗樣式的相關 html 代碼，其中使用了一個 alert 類，用于設置彈窗樣式。alert-box 類用于定義彈窗的具體內容，alert-title 類和 alert-message 類分別用于標題和內容的樣式設置，alert-button 類則定義了彈窗中的按鈕樣式。 同時，需要注意的是，由于彈窗樣式是在展示彈窗時動態添加到網頁中的，因此，還需要使用 JavaScript 來動態顯示和隱藏彈窗。以上的代碼中，我們定義了兩個事件處理函數，分別用于顯示(alert)和隱藏彈窗(hideAlert)，并且在按鈕上添加了一個 click 事件來觸發這個函數。 以上是相關的彈窗樣式 html 代碼，通過這些樣式組合，我們可以根據網頁設計的需求來實現不同的彈窗效果，效果更加出彩，用戶體驗更加友好。