任务1-8　使用DIV实现区域的滚动

需求：

用DIV嵌套建立一个如图1-20所示的滚动区域。

图1-20　可滚动的区域

分析：

在一个DIV内放置另一个DIV，前一个DIV是一个小窗口，后一个DIV显示内容较大，通过样式属性设置前一个在溢出时自动出现滚动条。

实现：

第一步，新建一个静态页面，从工具箱的“HTML”选项卡中选择“Div”拖放一个DIV到页面表单（form）中。

第二步，继续从工具箱的“HTML”选项卡中选择“Div”拖放一个DIV到前一个DIV中。

第三步，设置前一个DIV样式属性，如清单1-21所示。

清单1-21　由“样式生成器”产生的具有四个边框且自动滚动的DIV层

这是用“样式生成器”得到的样式属性，对于四边样式相同时只需将它设置简化为总边框的样式设置border：silver thin solid，而不必对每个边进行设置，这就是使用手工编码的优点。简化后上面样式属性如清单1-22所示。

清单1-22　简化后的具有四个边框且自动滚动的DIV层

第四步，在后一个DIV中放入＜pre＞标签以显示大量内容，注意在不对DIV做任何样式属性设置时，其高度大多按实际需要而定。

说明

本任务中后一个DIV作为前一个DIV的内容，滚动的是后一个DIV。当然也可以直接将＜pre＞标签取代后一个DIV，同样也能实现滚动效果。

使用一个DIV也可以实现本任务所要求的滚动区域。