Hoy usé HTML/CSS para hacer una burbuja de chat similar a QQ.
Aquí están la configuración de estilo de los lugares clave. Luego publique el código HTML y CSS (no mucho).
Paso 1: DiseñoEl mensaje utiliza el diseño de Div+Float. En el mensaje izquierdo, limpie primero la flotación y luego configure el flotador: izquierda. De esta manera, el icono del usuario y el contenido del mensaje se pueden mostrar en la misma línea.
A la derecha, lo mismo primero aclara la flotación. Luego establezca flotante: a la derecha, por lo que el icono y el mensaje del usuario se muestran en la misma línea. El ícono está en el extremo derecho. El lado izquierdo del icono es el mensaje.
Paso 2: Establezca el rectángulo redondeadoBorder-Radius: 7px;Paso 3: Flecha triangular
& n
Establezca el ancho y la altura del DIV a 0, y establezca el ancho del borde para que muestre un rectángulo compuesto de cuatro triángulos.
Los tres colores triangulares se establecen aquí para ser transparentes. Solo deja un triángulo para ser visible.
.triangle {ancho: 0px; .triangle {ancho: 0px; Punto clave 4: la cola triangular seguía la caja rectangularUse posicionamiento relativo. Siempre se puede solucionar en el lado de la caja rectangular.
Posición: relativo;
Todo el código:
<html> <head> <style> / * estilo de burbujas * / .sender {claro: ambos;} .sender div: nth-of-type (1) {float: left;} .sender div: nth-of-type (2) {Color de fondo: Aquamarina; {ancho: 50px; ; : transparente Aquaamarine Transparent Transparent; ; > </div> <div> <div class = Left_triangle> </div> <span> ¡Hello, hombre! = ChattemplateExample2_files/cat.jpg> </div> <div class = right_triangle> </div> <span> Hello World d </span> </div> </div> </body> </html>Lo anterior es todo el contenido de este artículo.