اليوم ، استخدمت HTML/CSS لصنع فقاعة الدردشة مماثلة ل QQ.
فيما يلي إعدادات نمط الأماكن الرئيسية. ثم انشر رمز HTML و CSS (ليس كثيرًا).
الخطوة 1: التصميمتستخدم الرسالة Div+Float. في الرسالة اليسرى ، قم بمسح الطوفان أولاً ، ثم اضبط العائمة: اليسار. وبهذه الطريقة ، يمكن عرض أيقونة المستخدم ومحتوى الرسائل في نفس السطر.
على اليمين ، واضحة أولا الأول العائم. ثم اضبط Float: إلى اليمين ، بحيث يتم عرض رمز المستخدم والرسالة في نفس السطر. الأيقونة على اليمين الأقصى. الجانب الأيسر من الرمز هو الرسالة.
الخطوة 2: اضبط المستطيل المستديرالحدود الحدودية: 7px ؛الخطوة 3: السهم الثلاثي
& ن
قم بتعيين عرض وارتفاع DIV إلى 0 ، وضبط عرض الحدود لجعله يظهر مستطيلًا يتكون من أربعة مثلثات.
يتم تعيين الألوان الثلاثة الثلاثة هنا لتكون شفافة. فقط اترك مثلثًا ليكون مرئيًا.
.
.النقطة الرئيسية 4: الذيل الثلاثي يتبع صندوق مستطيل
استخدام المواقع النسبية. يمكن دائمًا تثبيته على جانب المربع المستطيل.
الموقف: قريب
كل الكود:
<html> <head> <style> / * نمط الفقاعة * / .sender {clear: كلاهما ؛}. (2) {العرض: 50px ؛ الارتفاع: 50px ؛}. الخلفية : الشفافة الشفافة الشفافة ؛ > </div> <div class = left_triangle> </div> hello ، يا رجل! = chattemplateexample2_files/cat.jpg> </viv> <div class = right_triangle> </viv> <span> hello world d </span> </viv> </viv> </body> </html>ما سبق هو كل محتويات هذا المقال.