Dreamweaver CS

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

เพิ่มรายละเอียดให้กับเว็บเพจต่อจากบทที่ 9

กำหนดรูปแบบของ 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 ของสีเท่านั้น


เลื่อนขึ้นด้านบน