วิธีใช้ป้ายกำกับมุมมนที่ขยายได้

เมื่อสร้างเว็บเพจนิยมใช้แท็กสำหรับแสดง แท็กมุมโค้งม นซึ่งมีข้อดีคือมีรูปแบบที่สวยงามและมีสีสัน โดยทั่วไปเราจะทำให้พื้นหลังของแท็กมุมมนกลายเป็นรูปภาพ หากจำนวนคำในข้อความฉลากเปลี่ยนแปลง (ดังแสดงในรูปที่ 1) ภาพพื้นหลังคงที่จะไม่สามารถขยายได้ตามนั้น ด้วยวิธีนี้เราจำเป็นต้องสร้างภาพพื้นหลังจำนวนมากที่มีความกว้างต่างกันซึ่งไม่สะดวกมาก ต่อไปนี้เป็นสองวิธีในการสร้างฉลากมุมมนที่ขยายได้

รูปที่ 1

ดังแสดงในรูปที่ 1 ขอบของป้ายกำกับที่โค้งมนแตกต่างจากสีพื้นหลัง ขั้นแรกเราต้องสร้างภาพพื้นหลังใน Photoshop (รูปที่ 2) ความกว้างของรูปภาพจะกว้างกว่าความยาวข้อความที่เป็นไปได้เล็กน้อย และ ความสูงอย่างน้อยเท่ากับฉลากจริง ความสูง ขอบถูกกำหนดเป็นสีเส้นขีด และด้านในโปร่งใส แต่พื้นที่ด้านนอกมุมโค้งมนไม่สามารถตั้งค่าให้โปร่งใสได้ และควรเติมสีพื้นหลังของหน้า ในที่นี้มีการใช้สีขาว และเราตั้งชื่อว่า tab_bg.gif

รูปที่ 2

รหัสเป็นดังนี้:

1. แนวคิดในการนำไปปฏิบัติคือการตั้งค่าพื้นหลังด้านขวาของป้ายกำกับสำหรับแท็ก <a> และตั้งค่าพื้นหลังด้านซ้ายของป้ายกำกับสำหรับแท็ก <span> เพื่อให้ทราบถึงการขยายตัวของป้ายกำกับที่โค้งมน

2. วิธีนี้ต้องการเพียงการดาวน์โหลดภาพพื้นหลัง ซึ่งจะช่วยแก้ปัญหาการแสดงพื้นหลังที่ไม่ซิงค์กันบนทั้งสองด้านของป้ายกำกับ อย่างไรก็ตาม หากจำนวนคำในป้ายกำกับเกินความกว้างของภาพพื้นหลัง ปัญหาก็จะตามมา เกิดขึ้น (ดังแสดงในรูปที่ 3) ดังนั้นในการสร้างภาพพื้นหลังความกว้างของภาพควรคำนึงถึงความกว้างของตัวอักษรที่ยาวที่สุดให้มากที่สุด

รูปที่ 3

 

ในกรณีข้างต้น เนื่องจากจำเป็นต้องมีเอฟเฟ็กต์เส้นขีด ข้อความจึงสามารถขยายได้ภายในความกว้างของพื้นหลังเท่านั้น ซึ่งมีข้อจำกัดบางประการ หากเป็นป้ายมุมโค้งมนสีเดียวก็สามารถขยายได้เต็มที่ (รูปที่ 4)

รูปที่ 4

ตัดด้านซ้ายและด้านขวาของภาพพื้นหลังที่ใช้เป็นครั้งแรกเป็นภาพพื้นหลังตามลำดับ (ดังแสดงในรูปที่ 5) และตั้งชื่อเป็น tab_left.gif และ tab_right.gif

รูปที่ 5

รหัสเป็นดังนี้:

คำอธิบายรหัส:

1. ใช้พื้นหลังที่แตกต่างกันสำหรับ <a> และ <span> และตั้งค่าสีพื้นหลังของลิงก์เป็นสีเส้นโครงร่างเพื่อให้ได้เอฟเฟกต์ฉลากขาวดำ

2. วิธีนี้สามารถบรรลุผลการขยายตามอำเภอใจ