กำหนดรูปแบบของ 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 เสร็จแล้วจะแสดงผลตามด้านล่าง
คลิกที่นี่เพื่อดูตัวอย่างเว็บเพจ
ในส่วนของการแสดงผลสีฟ้า blue นั้นก็ให้เราคัดลอง code ของสีเขียวมาและเปลี่ยน แค่ code ของสีเท่านั้น