揭秘CSS(第 1 版)
11.1.2 左栏布局
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

解决跨浏览器问题

构建网页版WORD

布局设计

总体设计

左栏布局

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

顶部的左侧显示“目录”二字,以提醒用户这里是目录。右侧是一副图像,通过图像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 所示:

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

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

关于作者

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验