오늘, 나는 HTML/CSS를 사용하여 QQ와 비슷한 채팅 버블을 만듭니다.
주요 장소의 스타일 설정은 다음과 같습니다. 그런 다음 HTML 및 CSS 코드를 게시하십시오 (별로).
1 단계 : 레이아웃메시지는 Div+Float 레이아웃을 사용합니다. 각 메시지는 DIV 태그로 래핑됩니다. 왼쪽 메시지에서 플로팅을 먼저 지우고 Float : Left를 설정하십시오. 이러한 방식으로 사용자 아이콘 및 메시지 내용은 동일한 줄에 표시 될 수 있으며 사용자 아이콘은 왼쪽에 있으며 메시지는 사용자 아이콘에 가깝습니다.
오른쪽에, 같은 첫 번째는 떠 다니는 것을 제거합니다. 그런 다음 Float : Right를 설정하여 사용자 아이콘과 메시지가 같은 줄에 표시됩니다. 아이콘은 가장 오른쪽에 있습니다. 아이콘의 왼쪽은 메시지입니다.
2 단계 : 둥근 사각형을 설정합니다Border-Radius : 7px;3 단계 : 삼각형 화살표
& N
DIV의 너비와 높이를 0으로 설정하고 테두리 너비를 설정하여 각 삼각형의 색상과 크기를 구성하여 테두리 너비와 색상을 설정하여 설정할 수 있습니다.
세 가지 삼각형 색상은 투명하게 설정되어 있습니다. 삼각형을 눈에 띄게 남겨 두십시오.
.triange {width : 0px; .triange {width : 0px; 키 포인트 4 : 삼각형 꼬리는 직사각형 상자를 따랐습니다상대 위치를 사용하십시오. 항상 직사각형 상자의 측면에 고정 될 수 있습니다.
위치 : 상대;
모든 코드 :
<html> <head> <style> / * 버블 스타일 * / .sender {clear :} .sender div : nth-of-type (1) {float : left;} .sender div : nth-of-type (2) {배경 색 : 왼쪽; {너비 : 50px; 높이; 배경 색 : 0 10px 10px 10px;} : 투명한 투명성 : -16px; 위치 : 오른쪽; -16px; > </div> <div> <div class = left_triangle> </div> <span> </div> </div> <! = chattemplateexample2_files/cat.jpg> </div> <div class = right_triangle> </div> <span> Hello World d </div> </div> </body> </html>위는이 기사의 모든 내용입니다.