เมื่อสร้างเว็บเพจนิยมใช้แท็กสำหรับแสดง แท็กมุมโค้งม นซึ่งมีข้อดีคือมีรูปแบบที่สวยงามและมีสีสัน โดยทั่วไปเราจะทำให้พื้นหลังของแท็กมุมมนกลายเป็นรูปภาพ หากจำนวนคำในข้อความฉลากเปลี่ยนแปลง (ดังแสดงในรูปที่ 1) ภาพพื้นหลังคงที่จะไม่สามารถขยายได้ตามนั้น ด้วยวิธีนี้เราจำเป็นต้องสร้างภาพพื้นหลังจำนวนมากที่มีความกว้างต่างกันซึ่งไม่สะดวกมาก ต่อไปนี้เป็นสองวิธีในการสร้างฉลากมุมมนที่ขยายได้
รูปที่ 1
ฉลากกลมๆ
ดังแสดงในรูปที่ 1 ขอบของป้ายกำกับที่โค้งมนแตกต่างจากสีพื้นหลัง ขั้นแรกเราต้องสร้างภาพพื้นหลังใน Photoshop (รูปที่ 2) ความกว้างของรูปภาพจะกว้างกว่าความยาวข้อความที่เป็นไปได้เล็กน้อย และ ความสูงอย่างน้อยเท่ากับฉลากจริง ความสูง ขอบถูกกำหนดเป็นสีเส้นขีด และด้านในโปร่งใส แต่พื้นที่ด้านนอกมุมโค้งมนไม่สามารถตั้งค่าให้โปร่งใสได้ และควรเติมสีพื้นหลังของหน้า ในที่นี้มีการใช้สีขาว และเราตั้งชื่อมันว่า tab_bg.gif
รูปที่ 2
รหัสมีดังนี้:
| นี่คือคำพูด: <style type="text/css"> a.tab{ float:left; margin: 10px; padding-right:10px; พื้นหลัง:#4B90C6 url(tab_bg.gif) ด้านขวาบน ไม่ซ้ำกัน; a.tab span{ padding-left:10px; พื้นหลัง:url(tab_bg.gif) ไม่ซ้ำ; </สไตล์> <body bgcolor="#FFFFFF"> <a href="#" class="tab"><span>หน้าแรก</span></a> <a href="#" class="tab"><span>โปรไฟล์</span></a> <a href="#" class="tab"><span>สมุดเยี่ยม</span></a> </ร่างกาย> |
คำอธิบายรหัส:
1. แนวคิดในการนำไปปฏิบัติคือการตั้งค่าพื้นหลังด้านขวาของป้ายกำกับสำหรับแท็ก <a> และตั้งค่าพื้นหลังด้านซ้ายของป้ายกำกับสำหรับแท็ก <span> เพื่อให้ทราบถึงการขยายตัวของป้ายกำกับมุมโค้งมน
2. วิธีนี้ต้องการเพียงการดาวน์โหลดภาพพื้นหลัง ซึ่งจะช่วยแก้ปัญหาการแสดงพื้นหลังที่ไม่ซิงค์กันบนทั้งสองด้านของป้ายกำกับ อย่างไรก็ตาม หากจำนวนคำในป้ายกำกับเกินความกว้างของภาพพื้นหลัง ปัญหาก็จะตามมา เกิดขึ้น (ดังแสดงในรูปที่ 3) ดังนั้นในการสร้างภาพพื้นหลังความกว้างของภาพควรคำนึงถึงความกว้างของตัวอักษรที่ยาวที่สุดให้มากที่สุด
รูปที่ 3
ป้ายมุมโค้งมนสีทึบ
ในกรณีข้างต้น เนื่องจากจำเป็นต้องมีเอฟเฟ็กต์เส้นขีด ข้อความจึงสามารถขยายได้ภายในความกว้างของพื้นหลังเท่านั้น ซึ่งมีข้อจำกัดบางประการ หากเป็นป้ายมุมโค้งมนสีเดียวก็สามารถขยายได้เต็มที่ (รูปที่ 4)
รูปที่ 4
ตัดด้านซ้ายและด้านขวาของภาพพื้นหลังที่ใช้เป็นครั้งแรกเป็นภาพพื้นหลังตามลำดับ (ดังแสดงในรูปที่ 5) และตั้งชื่อเป็น tab_left.gif และ tab_right.gif
รูปที่ 5
รหัสมีดังนี้:
| นี่คือคำพูด: <style type="text/css"> a.tab{ float:left; margin: 10px; padding-right:10px; พื้นหลัง:#033EA5 url(tab_right.gif) ขวาบน no-repeat; a.tab span{ padding-left:10px; พื้นหลัง:url(tab_left.gif) ไม่ซ้ำ; </สไตล์> <body bgcolor="#FFFFFF"> <a href="#" class="tab"><span>หน้าแรก</span></a> <a href="#" class="tab"><span>โปรไฟล์</span></a> <a href="#" class="tab"><span>สมุดเยี่ยม</span></a> </ร่างกาย> |
คำอธิบายรหัส:
1. ใช้พื้นหลังที่แตกต่างกันสำหรับ <a> และ <span> และตั้งค่าสีพื้นหลังของลิงก์เป็นสีเส้นโครงร่างเพื่อให้ได้เอฟเฟกต์ฉลากขาวดำ
2. วิธีนี้สามารถบรรลุผลการขยายตามอำเภอใจ