มาต่อกันเยครับ

ขั้นตอนที่ 6 เขียน css ตามโครงสร้าง box model ที่เราวาดไว้
จาก box model ที่เราได้สร้า้งไว้ในขั้นตอนที่ 2 แล้ว

เราสามารถเขียนโครงสร้่าง div ได้ดังนี้ครับ

<div id=”warpper”>
<div id=”logo”></div>
<div id=”banner”></div>
<div id=”menu”>

</div>
<div id=”mainbody”>
<div id=”lcol’></div> <! — บรรจุเนื่อหาฝั่งซ้าย–>
<div id=”rcol’></div><! — บรรจุเนื่อหาฝั่งขวา–>

</div>
<div id=”footer”></div>
</div><!–ปิด wrapper : ตั้งหน้าเว็บให้อยู่กลางจอ–>

เราสามารถเขียน css เพื่อกำหนดโครงสรา้าง div ได้ดังนี้ครับ

RESET CSS…..
#warpper { margin: 0 auto; width: 820px;}
#logo {}
#banner {}
#menu {}
#mainbody {width: 820px;}
#mainbody #lcol {width: 490px; float: left;}
#mainbody #rcol {width: 275px; float: left;}
#footer { width: 820px;}

เท่านี้เราก็ได้โครงส้รางขอบเว็บนี้แล้วครับ

ในตอนหน้า เราจะกำหนด css ที่ละส่วนๆๆครับ ของ โครงสร้างนี้ครับ