HTML微信聊天頁面是一種常見的設(shè)計，它通常用于微信公眾號的聊天功能中。在這里，我們將介紹如何使用HTML代碼創(chuàng)建微信聊天頁面。
<!DOCTYPE html> <html> <head> <title>微信聊天頁面</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="chat"> <div class="message left"> <p>你好，我是小艾。</p> <span class="time">10:00</span> </div> <div class="message right"> <p>你好，我是小明。</p> <span class="time">10:01</span> </div> <div class="message left"> <p>你喜歡音樂嗎？</p> <span class="time">10:02</span> </div> <div class="message right"> <p>是的，我很喜歡音樂。</p> <span class="time">10:03</span> </div> </div> </body> </html>
上面的代碼中，我們使用了<div>標(biāo)簽來創(chuàng)建一個名為“chat”的區(qū)域，在這個區(qū)域內(nèi)部，我們使用了<div>標(biāo)簽來分別創(chuàng)建左右兩個聊天框，同時我們也為這些聊天框分別指定了樣式（.left和.right），并為聊天框內(nèi)的文本及時間信息創(chuàng)建了<p>和<span>標(biāo)簽。
下面是用CSS編寫的樣式代碼。
.chat {
width: 80%;
margin: 0 auto;
}
.message {
padding: 10px;
border-radius: 10px;
margin-bottom: 10px;
}
.left {
background-color: #F6F6F6;
float: left;
}
.right {
background-color: #DCF8C6;
float: right;
}
.time {
font-size: 12px;
color: #999;
margin-left: 5px;
}通過上面的代碼，我們成功地創(chuàng)建了一個功能完整的微信聊天頁面。
上一篇vue尚硅谷幾集
下一篇html微博點贊代碼