鐵人檔案
繼昨天對外框架做了一些美觀上的改變~今天要來做的是排版的部分我想將聊天室位於網頁的正中間 display: flex; position...
昨天把外框架的部分處理好了~那接下來就先來處理倒退鍵及名稱的部分 倒退鍵 .myIcon { cursor: pointer; }...
今天要來做的是聊天室中間的部分，也是整個聊天室最核心的對話內容呈現~那我們就來一步一步試看看吧 首先第一步先把中間的框架做出來 <div class=&...
繼昨天完成了框架~今天要處理的是對話內容的呈現，那對話的部分我把它分成兩個部分，一個是使用者方以及聊天機器人簡稱回復方，內容上稍微有點不同，所以我將他們分開來寫...
那我們就來繼續昨天對話內容的CSS部分 .chat_message{ padding: 10px 20px; overflow-y:scrol...
今天繼續接著對話的部分~估計這部分可以多蹭個好幾天 因為現在做的是使用者方，所以他應該要位於的是聊天室的右方。 .message-content{ d...
那這邊想要美化對話的呈現，所以稍微再排版一下對話以及美化。 .message-text{ padding: 9px 14px; font-siz...
那今天呢就是要來呈現回覆方的對話內容啦~回覆方跟使用者方稍微會有些地方不一樣，那我們就不廢話~接著看吧 那首先一樣先將HTML的部分弄出來 <div...
那我們就接著完成CSS的部分吧~ .other-message{ justify-items: start; } .other-message .mes...
那今天就來把對話的部分都解決掉吧~ .other-message{ justify-items: start; } .other-message .me...
