Aujourd'hui, j'ai utilisé HTML / CSS pour faire une bulle de chat similaire à QQ.
Voici les paramètres de style des lieux clés. Puis publiez le code HTML et CSS (pas grand-chose).
Étape 1: mise en pageLe message utilise la mise en page DIV + Float. Sur le message de gauche, effacez d'abord le flottement, puis définissez le flotteur: à gauche. De cette façon, l'icône de l'utilisateur et le contenu du message peuvent être affichés dans la même ligne.
À droite, le même premier efface le flottant. Ensuite, définissez Float: à droite, donc l'icône et le message de l'utilisateur sont affichés dans la même ligne. L'icône est à l'extrême droite. Le côté gauche de l'icône est le message.
Étape 2: Réglez le rectangle arrondiBorder-Radius: 7px;Étape 3: flèche triangulaire
& n
Réglez la largeur et la hauteur de la div 0 et définissez la largeur de la bordure pour le faire montrer un rectangle composé de quatre triangles.
Les trois couleurs triangulaires sont présentées ici pour être transparentes. Laissez simplement un triangle pour être visible.
.Tringle {Largeur: 0px; .Tringle {Largeur: 0px; Point clé 4: la queue triangulaire a suivi la boîte rectangulaireUtilisez un positionnement relatif. Il peut toujours être fixé sur le côté de la boîte rectangulaire.
Position: relative;
Tout code:
<html> <éad- head> <style> / * Style de bulle * / .sender {clear: both;} .sender div: Nth-of-Type (1) {float: Left;} .sender div: nth-of-type (2) {Coloraire: Aquamarine; {largeur: 50px; ; : transparent aquaamarine transparent; ; > </ Div> <div> <div class = Left_triangle> </div> <span> Bonjour, l'homme! = ChattemplateExample2_files / cat.jpg> </ div> <div class = right_trianggle> </div> <span> Bonjour le monde d </span> </div> </div> </ body> </html>Ce qui précède est tout le contenu de cet article.