CSS两栏布局之左栏布局

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

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

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

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

1. header span {
2.     float: left;
3.     color: #555;
4.     font-size: 1.4em;
5.     font-weight: bold;
6. }
7. header img {
8.     float: right;
9.     margin-top: 4px;
10.     border: none;
11. }
12. header {
13.     border-bottom: 1px dashed #aaa;
14. }

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

图11-2 左栏顶部布局效果

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

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。