วันนี้ฉันใช้ HTML/CSS เพื่อสร้างฟองแชทคล้ายกับ QQ
นี่คือการตั้งค่าสไตล์ของสถานที่สำคัญ จากนั้นโพสต์รหัส HTML และ CSS (ไม่มาก)
ขั้นตอนที่ 1: เค้าโครงข้อความใช้เค้าโครง Div+Float ในข้อความซ้ายให้ล้างการลอยตัวก่อนจากนั้นตั้งค่าลอย: ซ้าย ด้วยวิธีนี้ไอคอนผู้ใช้และเนื้อหาข้อความสามารถแสดงในบรรทัดเดียวกัน
ทางด้านขวาก่อนที่จะเคลียร์การลอยตัวก่อน จากนั้นตั้งค่า Float: ขวาดังนั้นไอคอนผู้ใช้และข้อความจะปรากฏในบรรทัดเดียวกัน ไอคอนอยู่ทางด้านขวาสุด ด้านซ้ายของไอคอนคือข้อความ
ขั้นตอนที่ 2: ตั้งค่าสี่เหลี่ยมผืนผ้าโค้งมนแนวชายแดน: 7px;ขั้นตอนที่ 3: ลูกศรสามเหลี่ยม
& n
ตั้งค่าความกว้างและความสูงของ div เป็น 0 และตั้งค่าความกว้างของเส้นขอบเพื่อให้มันแสดงสี่เหลี่ยมผืนผ้าประกอบด้วยสี่สามเหลี่ยม
สามสีสามเหลี่ยมถูกตั้งไว้ที่นี่ให้โปร่งใส เพียงแค่ทิ้งสามเหลี่ยมให้มองเห็นได้
. สามเหลี่ยม {ความกว้าง: 0px; . สามเหลี่ยม {ความกว้าง: 0px; จุดสำคัญ 4: หางสามเหลี่ยมตามกล่องสี่เหลี่ยมผืนผ้าใช้ตำแหน่งสัมพัทธ์ มันสามารถแก้ไขได้ที่ด้านข้างของกล่องสี่เหลี่ยม
ตำแหน่ง: ญาติ;
รหัสทั้งหมด:
<html> <head> <style> / * สไตล์ฟอง * / .sender {clear: ทั้งสอง;} .sender div: nth-of-type (1) {float: left;} .sender div: nth-of-type (2) {พื้นหลังสี: Aquamarine; {width: 50px; ความสูง: 50px;}. organ {clear: ทั้งสอง;} .receiver div: nth-child (1) {float: ขวา;}. พื้นหลัง: ทองคำ: 0 10px 10px 20px; : โปร่งใสโปร่งใสโปร่งใส; ตำแหน่ง: ญาติ: -16px; > </div> <div> <div class = left_triangle> </div> <pan> สวัสดีมนุษย์! = chattemplateExample2_files/cat.jpg> </div> <div class = right_triangle> </div> <pan> Hello World D </span> </div> </div> </body> </html>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้