任务1-3　使用DIV实现大小可变仿Window窗口的设计

需求：

实现指定长宽尺寸（600px*400px）的圆角方框。

分析：

用特定长宽尺寸的图像实现指定长宽尺寸的圆角方框，图形所占空间太大，影响下载速度，这种做法不可取。利用背景图像填充的原理，将背景图像中重复部分（四条边和一个中心）尽可能去除，再将图像切割成9块，分别保存到文件中作为填充图像。

实现：

第一步，将图分成9块不重复的区域，分别按图1-13所示进行编号。得到9个图像文件。用Windows附件—画图分别从大图中截取这9个图，保存到某个文件夹中。

图1-13　9个图像切片与页面结构

第二步，用9个DIV绝对定位组成这样的矩形。假定要实现600px*400px的方框，除去图像5四周的像素点，中间部分为（600-4-4）px*（400-28-4）px=592px*368px。其页面的源代码为清单1-8。

清单1-8　整体定位DIV层和内部9个DIV层

图1-14所示为清单1-8产生的600px*400px的圆角方框。

说明

以上的坐标定位都采用绝对定位position：absolute，它不是相对于整个浏览器定位，而是相对于其容器左上角定位。

下一个DIV的z-index大于前一个DIV的z-index，其层高于前一个。所以图标、标题和内容的DIV必须添加在背景DIV的后面。

如果要使用指定颜色作为是中间背景色，应如何实现，请读者思考实现。

使用TABLE能较好地实现大小可变仿Windows窗口的设计，这里只是为了加深读者对DIV的绝对定位深刻理解与熟练使用。下一个任务将介绍使用TABLE实现大小可变仿Window窗口的设计。

图1-14　600px*400px的圆角方框