尋夢悄悄話樣式語法

尋夢悄悄話樣式語法是一種用於設計網頁或應用程式對話框的語法，通常用於模擬對話框的顯示效果。以下是一個簡單的範例，展示如何使用HTML和CSS來實現這種效果：

HTML 結構

<div class="chat-box">
    <div class="message user">
        <p>你好，這是我的悄悄話。</p>
    </div>
    <div class="message bot">
        <p>我收到了你的悄悄話！</p>
    </div>
</div>

CSS 樣式

.chat-box {
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    background-color: #f9f9f9;
}

.message {
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 5px;
    max-width: 80%;
}

.message.user {
    background-color: #e1ffc7;
    margin-left: auto;
}

.message.bot {
    background-color: #fff;
    margin-right: auto;
}

.message p {
    margin: 0;
    font-size: 14px;
    color: #333;
}

說明

1. HTML 結構：

   • .chat-box 是整個對話框的容器。
   • .message 是每一條訊息的容器，分為 user 和 bot 兩種類型，分別代表用戶和系統的回應。

2. CSS 樣式：

   • .chat-box 設置了對話框的寬度、邊框、圓角和背景色。
   • .message 設置了每條訊息的樣式，包括內邊距、圓角和最大寬度。
   • .message.user 和 .message.bot 分別為用戶和系統訊息設置了不同的背景色和對齊方式。
   • .message p 設置了訊息內容的字體大小和顏色。

這個範例可以根據需求進一步擴展，例如添加頭像、時間戳或其他互動元素。