Сегодня я использовал HTML/CSS, чтобы сделать пузырь чата, похожий на QQ.
Вот настройки стиля ключевых мест. Затем опубликуйте код HTML и CSS (не так много).
Шаг 1: макетВ сообщении используется макет Div+Float. В левом сообщении сначала очистите плавание, а затем установите поплавок: слева. Таким образом, значок пользователя и содержание сообщений может отображаться в той же строке.
Справа тот же самый первый проясняет плавание. Затем установите Float: Правильно, поэтому значок пользователя и сообщение отображаются в той же строке. Значок находится на крайнем правом. Левая сторона значка - это сообщение.
Шаг 2: Установите округлый прямоугольникграница радий: 7px;Шаг 3: Треугольная стрела
& n
Установите ширину и высоту Div до 0 и установите ширину границы, чтобы она показала прямоугольник, состоящий из четырех треугольников.
Три треугольных цветов установлены здесь, чтобы быть прозрачными. Просто оставьте треугольник, чтобы быть видимым.
.triangle {ширина: 0px; .triangle {ширина: 0px; Ключевой пункт 4: Треугольный хвост следовал прямоугольной коробкеИспользуйте относительное позиционирование. Он всегда может быть зафиксирован на стороне прямоугольной коробки.
позиция: относительно;
Весь код:
<html> <head> <style> / * Bubble Style * / .sender {clear: оба;} .sender div: nth-of-type (1) {float: left;} .sender div: nth-of-type (2) {фоновый цвет: Aquamarine; {ширина: 50px; ; : Прозрачный прозрачный, прозрачный; ; > = ChattemplateExample2_files/cat.jpg> </div> <div class = right_triangle> </div> <pan> hello world d </span> </div> </div> </body> </html>Приведенное выше содержимое этой статьи.