Css tutorial : Neck Menu

posted on 03 Nov 2007 23:41 by bbears in TutorialCss

โหมด : มีสาระกับเขาบ้าง ก็ดีนะ 555 55
คำเตือน : ห้ามนำงานของผักออกไปแพร่เองนะคะ !!!
โปรแกรมที่ควรใช้ดูบลอคนี้ : Firefox เท่านั้น

-----------------------------------------------------------------------

ตามสัญญาที่เอนทรี่ที่แล้วนะคะ
มาต่อกับ css ของเอ็กทีนแบบใหม่กันนะคะ !
อ๊ะ ! รูปแบบธีมเป็นแบบ basic นะคะ จิ้มดูภาพได้เลยคะ

เป็นส่วนที่เป็น feather ใหม่ของเอ็กทีนคะ เป็นส่วนที่อยู่ใต้เฮด พวกคำว่า Home อะไรแบบนี้อ้ะคะ
(ในส่วนนี้ผักขอเรียกว่าส่วนของ PAGE คะ) สามารถเขียนได้แบบเอนทรี่นี้แหละคะ
เพียงแต่เวลาแสดงหัวข้อของ page รวมเขาจะมาแสดงตรงนี้เท่านั้นเองคะ

" /* Neck Menu */
#neck{
background:url(http://g.exteen.com/t/darkapollo/belly.png) top left; <<เป็นส่วนบีจีหลังสุด (จากรูปเป็นสีขาวนะ) ของส่วนนี้นะคะ
}
#neck .module{
background:#473e3c; <<เป็นสี บีจี ของส่วนนี้เป็นทั้งแถบ (ไม่รวมสีขาวนะ) ,, ดูรูปอธิบายเพิ่มเติมคะ
display:inline;
float:left;
margin:0px 0px 0px 25px;
padding:2px 0px 5px 0px;
width:730px;
}
#neck .module ul{ <<ในส่วนของตรงนี้ก็คือ ตัวหนังสือในส่วนของ PAGE ที่เป็นลิงค์ (ก่อนเมาส์ชี้ น้อ)
display:inline;
margin:0px;
padding:0px;
}
#neck .module h2{ <<ในส่วนของตรงนี้ก็คือ ตัวหนังสือในส่วนของ PAGE ที่เป็นลิงค์ (หลังเมาส์ชี้ น้อ)
display:none;
}
#neck .module li{
border-right:1px solid #CCC; <<เป็นเส้นคั่น ระหว่างลิงค์ในแถบของพวก PAGE คะ
display:inline;
padding:0px 10px 0px 10px;
}

หวังว่าคงเข้าใจกัน ไม่มากกน้อยนะคะ
เอนทรี่ หน้าคงต้องมาเคลียร์แทกกันซะหน่อย เป็นแทกที่... ไม่เคยมีมาในชีวิต 555 55
ขอบคุณสำหรับทุกคอมเมนต์คะ ♥

3 Comments