今天要來做的是聊天室中間的部分，
也是整個聊天室最核心的對話內容呈現~
那我們就來一步一步試看看吧

首先第一步先把中間的框架做出來

<div class="chat_container">
    <div id="chatRoom" class="chat_message">
    </div>
</div>

我這邊把它分成兩個部分
chat_container是中間的整個框架
chatRoom則是負責使用者與聊天機器人的對話
那框架的部分非常簡單~
跟上次製作上部分基本上都一樣

.chat_container{
    width: 500px;
    height: 700px;
    display: flex;
    margin: 0 auto;
    position: relative;
    background-color: #f1f1f1;
    border: 1px solid rgb(83, 83, 83);
    box-shadow: 0 0 10px rgba(0,0,0,.5);
}

這些屬性之前都一一介紹過~
不清楚的小白們記得往前去看喔

那我們明天就來處理對話內容的部分!