Heute habe ich HTML/CSS verwendet, um eine Chat -Blase ähnlich zu machen.
Hier sind die Stileinstellungen der wichtigsten Orte. Dann posten Sie HTML- und CSS -Code (nicht viel).
Schritt 1: LayoutDie Nachricht verwendet Div+Float -Layout. Löschen Sie auf der linken Nachricht zuerst die schwebende und stellen Sie dann den Float: links ein. Auf diese Weise können das Benutzer -Symbol und der Nachrichteninhalt in derselben Zeile angezeigt werden.
Rechts auf der rechten Seite klären das gleiche zuerst das schwimmende. Setzen Sie dann Float: Rechts, damit das Benutzersymbol und die Nachricht in derselben Zeile angezeigt werden. Das Symbol ist ganz rechts. Die linke Seite des Symbols ist die Nachricht.
Schritt 2: Stellen Sie das abgerundete Rechteck einBorder-Radius: 7px;Schritt 3: dreieckiger Pfeil
& N
Stellen Sie die Breite und Höhe des DIV auf 0 ein und stellen Sie die Randbreite ein, damit ein Rechteck aus vier Dreiecken besteht.
Die drei dreieckigen Farben dürfen transparent sein. Lassen Sie einfach ein Dreieck sichtbar.
.Triangle {Breite: 0px; .Triangle {Breite: 0px; Schlüsselpunkt 4: Dreieckiger Schwanz folgte rechteckige BoxVerwenden Sie die relative Positionierung. Es kann immer an der Seite der rechteckigen Box fixiert werden.
Position: Relativ;
All Code:
<html> <Head> <Styles> / * Bubble Style * / .sender {Clear: Beide; (2) {Hintergrundfarbe: Aquamarin; {Breite: 50px; ; : transparentes Aquaamarin transparent; ; > </Div> <div> <div class = Left_triangle> </div> <span> Hallo, Mann! = ChattemplateExample2_files/cat.jpg> </div> <div class = right_triangle> </div> <span> Hallo Welt D </span> </div> </div> </body> </html>Das oben genannte ist der Inhalt dieses Artikels.