任务1-2　使用DIV实现仿Windows窗口的设计

需求：

完成特殊方框输出界面的设计使用。画出图1-12所示的圆角方框，并在框内相应位置实现文本的显示。

分析：

假定方框的大小固定为410px*240px，一种比较简单的办法是将上图作DIV背景图像，在其内部添加两个子DIV，在子DIV中区分标题和内容文本。

技术关键是子DIV的定位。

实现：

第一步，添加DIV以背景方式显示方框图像，代码如清单1-6所示。

清单1-6　建立显示方框图像DIV层

第二步，在其中添加两个DIV，定位方式为绝对定位（absolute），并设置其内部文本。代码如清单1-7所示。

绝对定位其实也不是真正相对于窗口用户区的左上角，而是相对于其容器的左上角确定横坐标与纵坐标。

清单1-7　建立标题DIV层和内容DIV层

标题栏图像的高度是28px（可通过Windows附件—画图软件实现），DIV默认字体的大小为16px，绝对定位情况下DIV的top的取值为（28-16）/2=6px。当然也可以在设置了绝对定位后用拖放的方法可视化定位。

如果将标题文本的字体大小设为12px，则它的top应设为（28-12）/2=8px。

说明

当DIV采用了绝对定位后，可以选中该DIV，在其左上方出现一个 图标，拖动该图标就可以将对应DIV安放在某个位置。但这种定位只能在设计时使用，如果要精确控制或动态代码控制就需要设置其top属性和left属性。

用整幅图像作为圆角方框的背景图，虽然实现起来比较简单，但其代价是花较长时间传输一幅图。下个任务将介绍使用DIV实现大小可变的仿Windows窗口。

如何实现圆角方框相对于浏览器内容区域水平居中，读者可以参照任务1-1。