本期內容
詳細講述布局劃分，flex布局，相對絕對布局，過渡效果，組件定義等，一步步實現下面的結果圖。左側藍色區域是會話列表，右側是消息記錄。藍色區域內的一個個小卡片是聊天會話組件，在組件內定義了相關的交互，刪除，點擊，鼠標懸浮。
點擊左側的會話，右側的內容也會隨之發生改變。
(資料圖片僅供參考)
鼠標放在會話上會彈出刪除按鈕，點擊可以發起刪除請求同時發送事件從會話列表中剔除該會話。
點擊新的聊天可以新增會話。
點擊右上角的修改按鈕可以修改會話名稱。
代碼實現
1. 搭建聊天面板骨架
2. 聊天會話小卡片
聊天會話可以封裝成組件，分散首頁的代碼邏輯。
3. 側邊會話列表展示和會話創建
點擊會話列表中的會話小卡片會切換當前激活的會話。鼠標放在會話小卡片上會彈出刪除按鈕。點擊新的聊天按鈕之后會話列表會新增會話小卡片。
4. 會話編輯
未編輯狀態，點擊右側按鈕開始編輯。
編輯狀態，可以點擊右側按鈕取消編輯。按回車也可以鍵確認編輯。
關鍵詞：
