《Web开发技术》课件第4章.ppt

4.5DIV+CSS布局

当前，很多大型网站的网页布局都采用DIV+CSS的方式，比如说易趣、新浪等。DIV+CSS的方式正在逐步替代传统的表格(table)布局方式。

4.5.1网站的几种版式

首先，先来了解一些当前流行的大型网站的DIV+CSS版式情况。

(1)?MSN网站的布局方式。图4.38可简单地抽像成图4.39的样式，称之为1-3-1布局。其中，减号表示竖直方向，即该样式是最上面有一列，中间有三列，最下面又有一列的布局方式。图4.38MSN网站图4.39MSN网站的抽象图

(2)新浪网站的布局方式。图4.40可简单地抽像成图4.41的样式，称之为3-3-1布局，即最上面有三行，中间有三列，最下面又有一列的布局方式。

MSN网站和新浪网站是两种简单的网站布局方式。网站的布局方式还有很多，如图4.42和图4.43所示。读者可以尝试去抽象出各大网站的DIV+CSS版式布局方式。图4.40新浪网站图4.41新浪网站的抽象图图4.42网站的抽象图图4.43网站的抽象图4.5.2DIV+CSS布局方式

经过对各大网站的DIV+CSS版式布局方式进行分析，我们也可以作出自己的网站布局。首先，我们了解一些DIV+CSS的基本知识。

1．DIV与SPAN

区隔标记(DIV)与SPAN都用于排版与布局。它们的区别在于：DIV是一个块级元素，可以包含段落、标题、表格乃至章节、摘要和备注内容等；而SPAN?只是行内元素，其前后是不会换行的，它没有结构的意义。【例4.43】DIV与SPAN的区别。

pDIV标记换行/p

divimgsrc=“baoshi.png”//div

divimgsrc=“baoshi.png”//div

divimgsrc=“baoshi.png”//div

运行结果如图4.44所示。

pSPAN标记不换行/p

spanimgsrc=“baoshi.png”//span

spanimgsrc=“baoshi.png”//span

spanimgsrc=“baoshi.png”/

运行结果如图4.45所示。图4.44DIV标记图4.45SPAN标记2．DIV+CSS排版

DIV+CSS排版布局一般的步骤如下：

(1)从整体上进行DIV标记的分块，描述出网页的抽象图。

(2)对各块DIV进行定位布局。

(3)在网页中添加相应的DIV内容。

下面通过一个简单的例子来学习DIV+CSS布局方法的主要步骤。

【例4.44】DIV+CSS排版。

图4.46网页设计的抽象图DIV+CSS排版步骤如下：

步骤一：画出网页的布局抽象图，假设如图4.46所示。图4.46网页设计的抽象图我们给出body样式，代码如下：

body{margin:0px;padding:0px;

background:url(back.gif)#FEFEFErightbottom;

font-family:‘LucidaGrande’,‘LucidaSansUnicode’,‘宋体’,‘新宋体’,arial,verdana,sans-serif;

color:#FF0000;

font-size:30px;

line-height:150%;}

解释如下：定义了边框边距为0；背景颜色为#FEFEFE；背景图片为back.gif，图片位于页面右下角；字体尺寸为14px；字体颜色为红色；行高为150%。步骤二：定义DIV块的样式。

/*定义页面左列样式*/

#left{width:150px;

height:500px;

margin:0px;

padding:0px;

background:#CDCDCD;}

/*定义页面中列样式*/

#middle{

position:absolute; left:200px;

TOP:0px;

width:300px;

height:500px;

margin:0px;

padding:0px;

background:#DADADA;

}

/*定义页面右列样式*/

#right{ position:absolute;

left:480px;

TOP:0px;

width:200px;