HTML和CSS是網站設計和開發的基礎，無論是前端工程師還是UI設計師都需要精通這兩個技術。在網站中，聊天界面是一個非常重要的功能，以下是一些HTML和CSS代碼來打造一個簡單的聊天界面。

<div class="chat">
<div class="message received">
<p>你好，最近怎么樣啊？</p>
</div>
<div class="message sent">
<p>我很好，謝謝！你呢？</p>
</div>
</div>

以上代碼創建了一個名為“聊天”的div。在里面，我們創建了兩個名為“信息”的div。第一個信息是接收到的信息，第二個是發送的信息。這就是我們的最終聊天界面的外觀和感覺。

然后，我們需要為我們的聊天界面添加其他樣式。以下是聊天界面的完整CSS代碼。

.chat {
display: flex;
flex-direction: column;
height: 400px;
width: 300px;
padding: 10px;
border: 1px solid #ccc;
}
.message {
border-radius: 5px;
padding: 5px;
margin-bottom: 10px;
max-width: 80%;
}
.message.received {
background-color: #f0f0f0;
align-self: flex-start;
}
.message.sent {
background-color: #0f0f0f;
color: #fff;
align-self: flex-end;
}

使用以上代碼，我們為聊天界面添加了一些樣式。通過添加display:flex屬性，我們將聊天界面轉換成一個垂直列。通過添加align-self:flex-start和align-self:flex-end屬性，我們將接收到的信息和發送的信息居左和居右對齊。通過添加background-color和color屬性，我們為信息添加了不同的顏色，以便更輕松地區分他們。此外，還添加了一些內邊距、邊框和圓角，使我們的聊天界面看起來更加美觀。