Hoje, usei o HTML/CSS para fazer uma bolha de bate -papo semelhante ao QQ.
Aqui estão as configurações de estilo dos principais lugares. Em seguida, poste o código HTML e CSS (não muito).
Etapa 1: layoutA mensagem usa o layout Div+Float. Na mensagem esquerda, limpe a flutuação primeiro e depois defina o flutuador: esquerda. Dessa forma, o ícone do usuário e o conteúdo da mensagem podem ser exibidos na mesma linha.
À direita, o mesmo primeiro limpe a flutuação. Em seguida, defina o Float: à direita, para que o ícone e a mensagem do usuário sejam exibidos na mesma linha. O ícone está na extrema direita. O lado esquerdo do ícone é a mensagem.
Etapa 2: defina o retângulo arredondadoRadio de fronteira: 7px;Etapa 3: Arrow triangular
& n
Defina a largura e a altura da div para 0 e defina a largura da borda para que ele mostre um retângulo composto por quatro triângulos.
As três cores triangulares são definidas aqui para serem transparentes. Basta deixar um triângulo para ser visível.
.Triangle {Width: 0px; .Triangle {Width: 0px; Ponto -chave 4: Tail triangular seguiu a caixa retangularUse o posicionamento relativo. Sempre pode ser fixado na lateral da caixa retangular.
Posição: relativa;
Todo o código:
<html> <head> <estilo> / * estilo bolha * / .sender {clear: ambos;} .sender div: nth-of-type (1) {float: left;} .sender div: nth-of-type (2) {Background-Color: Aquamarine; {largura: 50px; ALTERAÇÃO DE BRODADE: GOLD; : transparente transparente transparente; Posição: Right; > </div> <div> <div class = esquerda_triangle> </div> <pan> Olá, cara! = ChattemplateExample2_files/cat.jpg> </div> <div class = right_triangle> </div> <pan> Olá, mundo d </span> </div> </div> </body> </html>O acima é todo o conteúdo deste artigo.