ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 10)

กำหนดรูปแบบของ date

#containner #main #right #content.green #date กำหนดรูปแบบและตำแหน่งของวันที่ดังตัวอย่าง



1.กำหนดรูปแบบตัวอักษร



2.กำหนดสีพื้นหลัง



3.กำหนดให้แสดงตัวอักษรตรงกลาง



4.กำหนดความกว้างของ date ให้เท่ากับ 100px และสูง 10px และให้ padding บน,ล่าง เป็น 10px ดังนั้นเมื่อรวมแล้วจะทำให้ date มีความสูงเท่ากับ 30px ดังที่แสดงผลพอดี



5.กำหนดตำแหน่ง type:absolute ทำให้สามารถกำหนดตำแหน่งโดยอ้างอิงจาก content ได้ จะเห็นได้ว่าเราสั่งให้ date อยู่ห่างจากขอบขวามือ 5px ก็ได้

---

กำหนดรูปแบบของ story

#containner #main #right #content #story ส่วนนี้ก็คือเนื้อหาที่อยู่ใน content นั่นเอง

1.สิ่งที่จะต้องกำหนดก็คือ ขนาดตัวอักษร และ margin ซึ่งจะเห็นได้ว่ากำหนดให้มี margin-bottom มากหน่อยเพื่อแบ่งเนื้อที่ให้กับ ลิงค์ "อ่านเนื้อหาเพิ่มเติม" จะได้ไม่ทับกัน

---

กำหนดรูปแบบของ more

#containner #main #right #content.green #more ส่วนนี้คือ ลิงค์ "อ่านเนื้อหาเพิ่มเติม" ดังรูปด้านล่าง



1.จะขอข้ามเนื้อหาส่วน กำหนดรูปแบบของตัวอักษร และกำหนดสีพื้นหลัง เพราะจะซ้ำกับที่ผ่านมา จะเริ่มที่ กำหนดความกว้างเท่ากับ 150px และสูงเท่ากับ 15px แต่เมื่อรวมกับ padding แล้วความสูงจะเท่ากับ 25px ดังที่แสดงผล



2.กำหนดตำแหน่ง

---

กำหนดรูปแบบของ more link

#containner #main #right #content.green #more a ส่วนนี้ก็คือ กำหนดรูปแบบของลิงค์ "อ่านเนื้อหาเพิ่มเติม" ในส่วนนี้ก็ไม่มีอะไรมาก จัดรูปแบบตัวอักษร

---

เมื่อสร้าง CSS เสร็จแล้วจะแสดงผลตามด้านล่าง

คลิกที่นี่เพื่อดูตัวอย่างเว็บเพจ

คลิกที่นี่เพื่อดูตัวอย่าง CSS

ในส่วนของการแสดงผลสีฟ้า blue นั้นก็ให้เราคัดลอง code ของสีเขียวมาและเปลี่ยน แค่ code ของสีเท่านั้น