S i X h E a D { ? }

เคยเห็น link ลักษณะนี้ไหม

ไม่มีอะไรยากเลย ใช้ css และ div เข้ามาช่วย ลองมาดูตัวอย่างกัน

ดูตัวอย่างที่นี่

 
<style media="screen" type="text/css">
.SiXhEaD_Link { font: 12px Tahoma, Arial, sans-serif; padding: 10px 0; }
.SiXhEaD_Link a { background: #F8FBFC; color: #069; text-decoration: none; padding: 2px 6px 3px 6px; border: 1px solid #E2EFF3; }
.SiXhEaD_Link a:hover { border-color: #B7D7E1; }
.SiXhEaD_Link font { font: 12px Tahoma, Arial, sans-serif; background: #F8FBFC; color: #CCCCCC; padding: 2px 6px 3px 6px; border: 1px solid #E2EFF3; }
</style>
 

จุดสังเกตุง่ายๆ ใน css ถ้า ขึ้นด้วย . คือชื่อ class แต่ถ้าขึ้นด้วย # คือ id ของ div หรือ span
- บรรทัดที่ 7 เริ่มกำหนด class ชื่อ SiXhEaD_Link
- บรรทัดที่ 8 ถ้าเป็น link
- บรรทัดที่ 9 ถ้าเป็น link และถูก mouse over
- บรรทัดที่ 10 tag font

 
<div class="SiXhEaD_Link" align="center">
<font>&laquo; First</font> <font>&#8249; Prev</font>
<a href="javascript:void(0);">1</a>
....
....
</div>
 

ทีนี้เราก็ใส่ div ครอบ link ทั้งหมดที่เราต้องการ และใส่ class="SiXhEaD_Link" เท่านั้นเป็นอันจบ