12.2　如何用DIV布局

通过前一节的学习，大体知道了用DIV布局的方式，现在再总结DIV布局是如何进行的。DIV布局先利用层把内容框架打好，再利用样式表控制。下面通过实例讲解如何进行DIV布局，实例所完成的是门户网站的内容浏览新闻页的布局。

12.2.1　设置DIV选择符

首先在＜body＞＜/body＞中定好网站的DIV。对页面的头部、导航条、内容等各个模块用DIV列出并对选择符命名，并在样式表中列出，完成后如代码12.5所示。

代码12.5　源代码\第12章\如何用DIV布局.html

—————————————-文件名：如何用DIV布局.html—————————————-

01 ＜html＞

02 ＜head＞

03 ＜title＞如何用DIV布局＜/title＞

04 ＜style type="text/css"＞

05 /设置CSS选择符/

06 #header{}

07 #logo{}

08 .ad468{}

09 #banner{}

10 #content{}

11 #newsad{}

12 #news{}

13 #bottom{}

14 ＜/style＞

15 ＜/head＞

16 ＜body＞

17 ＜div id="header"＞

18 ＜div id="logo"＞logo—网站图标＜/div＞＜div class="ad468"＞468像素广告＜/div＞

19 ＜/div＞

20 ＜div id="banner"＞导航条＜/div＞

21 ＜div id="content"＞

22 ＜div id="newsad"＞新闻右边的广告＜/div＞

23 ＜div id="news"＞新闻内容＜/div＞

24 ＜/div＞

25 ＜div id="bottom"＞网页底部＜/div＞

26 ＜/body＞

27 ＜/html＞

【代码解析】在HTML中的DIV标记中设置了ID选择符和类选择符，在CSS样式中，以“#”开头的选择符为ID选择符，与DIV中的ID设置关联，同理，以“.”开头的为类选择符，与DIV中的参数class设置关联。在上述代码中，设置的选择符都为空，即在大括号中没有CSS代码，所表现的效果如图12.4所示。

图　12.4　没有CSS代码时的效果