ในการออกแบบเว็บไซต์ เรามักจะใช้ลูกศรเพื่อตกแต่งหน้าเว็บของเรา แม้ว่านักออกแบบเว็บไซต์จำนวนมากต้องการใช้ไอคอนแบบอักษรเพื่อให้ได้เอฟเฟกต์ของลูกศร แต่สิ่งนี้ก็จะมีผลกระทบต่อการโหลดหน้าเว็บด้วย วันนี้ บรรณาธิการของ Feiniao Muyu จะบอกวิธีใช้ div และ CSS เพื่อให้ได้เอฟเฟกต์ลูกศรในการออกแบบเว็บไซต์
DIV+CSS เพื่อให้ได้เอฟเฟกต์ของลูกศรเล็กทึบในเมนูการนำทางรองหรือรายการที่มีฟังก์ชันแบบเลื่อนลงบนหน้าเว็บ จะมีลูกศรเล็กๆ บางส่วนถูกนำมาใช้เพื่อระบุว่า DIV มีเนื้อหาอยู่ แล้วเราจะนำสไตล์ของลูกศรเล็กๆ เหล่านี้ไปใช้อย่างไร
ขั้นแรกให้ใส่โค้ด CSS
/*ลูกศรขึ้น*/.to_top { width: 0; height: 0; border-bottom: 10px solid #ccc; border-left: 10px solid transparent; border-right: 10px solid transparent;}/*ลูกศรลง*/ to_bottom { ความกว้าง: 0; ความสูง: 0; ขอบด้านบน: 10px ทึบ #ccc; 10px solid transparent;}/*ลูกศรไปทางซ้าย*/.to_left { width: 0; height: 0; border-right: 10px solid #ccc; border-top: 10px solid transparent-bottom; / *ลูกศรไปทางขวา*/ .to_right { width: 0; height: 0; border-left: 10px solid #cccf; โปร่งใส ขอบล่าง: โปร่งใส 10px;}รหัส HTML
<p>ลูกศรขึ้น</p><div class=to_top></div><p>ลูกศรซ้าย</p><div class=to_left></div><p>ลูกศรขวา</p>< คลาส div =to_right></div><p>ลูกศรลง</p><div class=to_bottom></div>
ผลลัพธ์การรันโค้ด
หากคุณรู้สึกว่าลูกศรใหญ่หรือเล็กเกินไป และสีไม่ตรงตามที่ต้องการ เราสามารถปรับขนาดของลูกศรได้โดยการปรับความหนาและสีของเส้นขอบ DIV
DIV+CSS เพื่อให้ได้เอฟเฟกต์ของลูกศรขนาดใหญ่เมื่อแก้ไขธีมสามคอลัมน์เมื่อวานนี้ ผู้ใช้บางคนรายงานว่าควรเพิ่มลูกศรซ้ายและขวาขนาดใหญ่ แม้ว่าจะใช้งานง่ายมาก (คุณสามารถใช้รูปภาพพื้นหลังแทนได้) แต่คุณต้องเพิ่มฟังก์ชันพื้นหลังที่สามารถปรับแต่งสีได้ ดังนั้นฉันจึงคิดว่าจะใช้ DIV+CSS เพื่อวาดลูกศร เพื่อให้คุณสามารถปรับแต่งสีได้อย่างง่ายดาย สีของลูกศร
รหัสซีเอสเอส
.text{ display: inline-block; border-top: 2px solid; border-right: 2px solid; ความกว้าง: 100px; border-color: #EA6000; อัตโนมัติ 100px;}รหัส HTML
<span class=text></span>
ผลลัพธ์การรันโค้ด
เราสามารถเปลี่ยนจำนวนลูกศรได้โดยแก้ไขโค้ดด้านล่าง C หรือปรับเปลี่ยนความกว้างและความสูงเพื่อเปลี่ยนขนาดของลูกศรได้
transform: rotate(-135deg);/*调整旋转的角度*/
โค้ดด้านบนคือโค้ดที่ตัวแก้ไขแนะนำให้คุณใช้ div+CSS เพื่อใช้ไอคอนลูกศรแบบธรรมดาใน HTML ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วตัวแก้ไขจะตอบกลับ ถึงคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!
หากคุณคิดว่าบทความนี้มีประโยชน์สำหรับคุณ คุณสามารถพิมพ์ซ้ำได้ โปรดระบุแหล่งที่มา ขอขอบคุณ!