今天給大家分享乙個我剛做的專案中的乙個小案例， 因為我們在做乙個聊天的功能，之前的聊天頁面ui很醜，我就不在這裡展示給大家了。
頁面大致就是這個樣子，接下來我們來一起學習製作步驟吧。
<divclass="leftd">
<spanng-class="leftd_h">
<imgng-src="./img/c_pic.pn" />
<divclass="speech left" ng-class="speech left">
二貨，你看你傻樣！
<divclass="rightd">
<spanng-class="rightd_h">
<imgng-src="./img/u_pic.pn" />
<divclass="speech right" ng-class="speech left">
嘻嘻嘻嘻。。。。。。
<divclass="leftd">
<spanng-class="leftd_h">
<imgng-src="./img/c_pic.pn" />
<divclass="speech left" ng-class="speech left">
笑什麼笑，沒看到本寶寶今天變漂亮了嗎？
<divclass="rightd">
<spanng-class="rightd_h">
<imgng-src="./img/u_pic.pn" />
<divclass="speech right" ng-class="speech left">
不不不，每天你都很漂亮的啦！
ps（這裡也算是最重要的部分了我就把全部的**都展示出來吧！）
div.speech
div.speech:before
div.speech:after
div.speech.right
div.speech.right:before
div.speech.right:after
div.left
div.left:before
div.left:after
.leftimg
.rightimg
.leftd
.rightd
.leftd_h
.leftd_h img
.rightd_h
.rightd_h img
這裡基本是上用了css偽類元素，來製作的小氣泡。網上有很多的案例都是吧使用者聊天的頭像作為背景圖，但是我感覺這樣子在實際專案中，並不是很合適，所以我就做了一些修改，然我們更加實用。
來製作聊天頁面，以及資料的互動問題。有興趣的敬請期待吧！
Android 仿微信聊天氣泡
第一次寫部落格，遇見了這樣的需求，當時看見那個角就有點觸了，想到了自定義去實現但是思路不是很明確，跟老大請教了下，給了我思路就開始上手，但是還是出不來想要的效果，最後功夫不負有心人啊，上效果圖吧，這是乙個自定義組合空間，可以往裡面放任何控制項，自定義 效果 public class chatitem...
ios 仿微信，簡訊聊天氣泡
其實實現很簡單，主要是控制項的自適應撐高，這裡用到的是cell。核心 uiview bubbleview nsstring textimagename nsstring name else uiimageview bubbleimageview uiimageviewalloc initwithim...
CSS 如何實現微信聊天氣泡
先來分析一下聊天氣泡 氣泡分割為兩部分，左邊的矩形，右邊的三角形 矩形的實現比較簡單 先對對右邊的三角形進行分析 如果把width，height置為0，效果則如下圖 只需要三角形，所以把border的其中一邊設定為你需要的顏色，其他三個border顏色則設定為與背景顏色相同，就得到了我們想要的三角形...