Hari ini, saya menggunakan HTML/CSS untuk membuat gelembung obrolan yang mirip dengan QQ.
Berikut adalah pengaturan gaya tempat -tempat utama. Kemudian posting kode HTML dan CSS (tidak banyak).
Langkah 1: Tata letakPesan ini menggunakan tata letak div+float. Di pesan kiri, hapus mengambang terlebih dahulu, lalu atur float: kiri. Dengan cara ini, ikon pengguna dan konten pesan dapat ditampilkan di baris yang sama.
Di sebelah kanan, pertama kali membersihkan yang mengambang. Kemudian atur float: benar, sehingga ikon pengguna dan pesan ditampilkan di baris yang sama. Ikon itu berada di paling kanan. Sisi kiri ikon adalah pesannya.
Langkah 2: Atur persegi panjang bulatBorder-Radius: 7px;Langkah 3: Panah segitiga
& N
Atur lebar dan tinggi div ke 0, dan atur lebar perbatasan untuk membuatnya menunjukkan persegi panjang yang terdiri dari empat segitiga.
Tiga warna segitiga diatur di sini untuk transparan. Tinggalkan segitiga agar terlihat.
.TRIAGLE {Width: 0PX; .TRIAGLE {Width: 0PX; Titik kunci 4: Ekor segitiga mengikuti kotak persegi panjangGunakan penentuan posisi relatif. Itu selalu dapat diperbaiki di sisi kotak persegi panjang.
Posisi: kerabat;
Semua kode:
<html> <head> <tyle> / * bubble style * / .sender {clear: keduanya;} .sender div: nth-of-type (1) {float: left;} .sender div: nth-of-type (2) {latar belakang-warna: aquamarine; {width: 50px; ; Transparan transparan transparan; ; > </div> <v> <div class = left_triangle> </div> <span> halo, man! = ChattemplePateExample2_files/cat.jpg> </div> <div class = right_triangle> </div> <span> hello world d </span> </div> </div> </body> </html>Di atas adalah semua isi artikel ini.