ตัวอย่างการสร้างเว็บเพจด้วย 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 สีแล้ว