iT邦幫忙

2022 iThome 鐵人賽

DAY 14
0
自我挑戰組

30天製作專題紀錄-虛擬女友系列 第 14

Day14 30天製作專題紀錄-製作UI

  • 分享至 

  • xImage
  •  

繼昨天完成了框架~
今天要處理的是對話內容的呈現,
那對話的部分我把它分成兩個部分,
一個是使用者方以及聊天機器人簡稱回復方,
內容上稍微有點不同,
所以我將他們分開來寫,
那我們事不宜遲趕快來試試吧!/images/emoticon/emoticon08.gif


首先先來製作使用者方~
那一些基本的要素要先出來
像是對話內容、發送訊息的時間

<div  class="message_row you-message">
    <div class="message-content">
        <div class="message-text">嗨嗨</div>
        <div class="message-time">09/23 10:16</div>
    </div>
</div>

https://ithelp.ithome.com.tw/upload/images/20220930/20150345scNMLauYSH.png
那明天就來開始製作CSS的部分~


上一篇
Day13 30天製作專題紀錄-製作UI
下一篇
Day15 30天製作專題紀錄-美化UI
系列文
30天製作專題紀錄-虛擬女友30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言