การสร้างเว็บเพจด้วย CSS layout (ตอนที่ 7)
ในส่วนสุดท้ายที่เราจะกำหนดการแสดงผลคือ ส่วนของ list ที่อยู่ใน navigation นั่นเอง
คำสั่ง list ของ HTML เป็นแบบนี้
<ul> <li></<li> <li></<li> </ul>
ดังนั้นเราจะแยก CSS ออกเป็น 2 ส่วนคือ ul และ li
กำหนด CSS ในส่วนของ UL
(#containner #main #left #navigation ul) หมายความว่า ul ที่อยู่ใน #navigation เท่านั้นที่จะแสดงผลตามที่กำหนด
1. กำหนด Margin , Padding
2. คำสั่ง list นั้นจะแสดงสัญลักษณ์หน้า list แต่ละตัวด้วย ซึ่งเราจะทำการเปลี่ยนเป็นรูปสามเหลี่ยมแทน
รูปสามเหลี่ยมที่นำมาแทนสัญลักษณ์ list (arrow.gif)
กำหนด CSS ในส่วนของ LI
#containner #main #left #navigation li
1. กำหนดขนาดของตัวอักษร ขนาด 13px และให้ความสูงระหว่างบรรทัดเท่ากับ 20px
กำหนด CSS ในส่วนของ LI Link
#containner #main #left #navigation li a
ในส่วนนี้จะควบคุมการแสดลผลในส่วนที่เป็น hyperlink ของ list การตั้งค่ามีดังนี้
1. กำหนดขนาดตัวอักษร สีตัวอักษร ในส่วนของ Decoration:none ทำให้ส่วนที่เป็น link ไม่มีเส้นใต้
เมื่อสร้าง CSS เสร็จแล้วจะแสดงผลตามด้านล่าง
คลิกที่นี่เพื่อดูตัวอย่างเว็บเพจ
คลิกที่นี่เพื่อดูตัวอย่าง CSS
จะสังเกตุว่าหัวข้อในส่วน Navigation ของเรานั้นมีเพียงสีเหลืองเท่านั้น ถ้าต้องการเพิ่มสีอื่นก็ให้ คัดลอก #containner #main #left #navigation h1.yellow และเปลี่ยนจาก yellow ให้เป็น red , blue , green จากนั้นเปลี่ยนเพียงภาพพื้นหลัง ก็จะได้รายการครบ 4 สีแล้ว