Code room + สอนทำhi5 ค่ะ

ลำดับตอนที่ #23 : Code::ตกแต่งContentที่เป็นข้อมูลส่วนตัว

ในส่วนนี้จะมี Selector เป็น

#user-details .content { }

ซึ่งประกอบไปด้วย 3 ส่วนย่อย คือ

#about-left { }
#about-center { }
#about-right { }

เรียงตามลำดับจากซ้ายไปขวา
คุลสามารถใส่คุณสมบัติ ต่างๆ ลงไปได้ ทั้ง 4 selector เช่น
การสลับด้าน direction: RtL; หรือ LtR
พื้นหลัง background: url( );
เส้นกรอบ border: outset 10px red;

โค้ดที่ผมเอามาให้เป็นตัวอย่างนี้ จะเป็นการจัดรูปแบบเหมือนของผมนะคับ

โค้ดที่จะนำไปวาง  

<style type="text/css">

#user-details .content { direction: RtL;}
#about-left { direction: LtR; }
#about-center{ direction: LtR; }
#about-right { direction: LtR; }
#about-left, #about-center, #about-right
{ border: outset #1c1c1c 10px; }

</style>

#about-left, #about-center, #about-right จะเท่ากับ .about-column
จะสามารถใช้แทนกันได้นะคับ เพื่อให้โค้ดสั้นลง