20.3.2　对层布局

先定好五个层，分别表示头部、中部、左栏、右栏和底部。新建一张网页，然后定好层的ID和文字内容，以下内容只起显示作用，先确定有哪些层，然后再对层进行分步布局，如代码20.7表示。

代码20.7　源代码\第20章\margin实例—设置层与层的距离.html

——————————-文件名：margin实例—设置层与层的距离.html——————————

01 ＜html＞

02 ＜head＞

03 ＜title＞margin实例—设置层与层的距离＜/title＞

04 ＜/head＞

05 ＜body＞

06 ＜div id="mybody"＞

07 ＜div id="header"＞

08 这是网页头部，放一些logo，宣传栏之类

09 ＜/div＞

10 ＜div id="contentright"＞

11 内容右栏

12 ＜/div＞

13 ＜div id="contentleft"＞

14 网页内容左栏

15＜/div＞

16＜div id="contentcenter"＞

17内容中间栏

18＜/div＞

19＜div id="bottom"＞

20网页底部

21＜/div＞

22＜/div＞

23＜/body＞

24＜/html＞

【代码解析】代码20.7中，通过给层设置文字和ID，在没有CSS控制下，是显示原形的，这时的ID不会起作用，因为根本没有CSS可以控制，效果如图20.7所示。

图　20.7　设置层ID