การตกแต่ง Content ที่เป็นข้อมูลส่วนตัว

 

การตกแต่ง 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
จะสามารถใช้แทนกันได้นะคับ เพื่อให้โค้ดสั้นลง

 

การใส่รูปตรงช่อง Content ข้อมูลส่วนตัว

 

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

 

<style type="text/css">
#user-details .content {background:url(ใส่ URL ของรูปนะคับ ) center center;}
</style>