11.1.2 左栏布局

左栏为文档的目录树，布局相对简单，分为顶部和底部两部分。

顶部的左侧显示“目录”二字，以提醒用户这里是目录。右侧是一副图像，通过图像map提供“全部展开”和“全部收起”的链接，方便用户全部展开或全部收起目录树。HTML代码如下：

<aside>
<header><span>目录</span><img src="../../img/open.png"  map="#oAll"/></header>
</aside>

首先，让“目录”二字向左浮动，并设置文本和字体样式。其次，让图像向右浮动，并调整外边距，使图像垂直居中。最后，为header添加浅灰色的虚线下边框，使顶部和底部界限分明。

header span {
    float: left;
    color: #555;
    font-size: 1.4em;
    font-weight: bold;
}
header img {
    float: right;
    margin-top: 4px;
    border: none;
}
header {
    border-bottom: 1px dashed #aaa;
}

最终的布局效果如图 11‑2 所示：

底部为目录树的内容，将使用一个现有的Javascript轻量级树形控件实现，具体实现细节将在7.2节介绍。