我的位置: 首页  >   揭秘CSS  >   11.1.3 右栏布局

11.1.3 右栏布局

编辑:比特教程网    时间:2018-10-13 04:24    


右栏的主内容区包含页眉、正文和页脚三个部分。正文的内容将在11.3节介绍,这里只介绍页眉和页脚的布局。

页眉包括两部分内容,左侧提供“文档结构视图”复选框,小屏幕用户可以通过该复选框关闭目录树,方便阅读。右侧为文章的章节标题。HTML代码如下:

<header>
<label id="view"><input id="show" type="checkbox" />文档结构视图</label>11 构建网页版word
</header>

首先,让“文档结构视图”复选框向左浮动,并设置字体样式。其次,设置 checkbox 的 vertical-align属性,使复选框的文本和方框垂直居中对齐。最后,为 header 添加灰色的下边框,使页眉和正文界限分明,并设置其他样式。

header {
    height: 2.2em;
    overflow: hidden;
    text-align: right;
    margin-bottom: 1em;
    letter-spacing: 1px;
    font-family: Arial,SimSun;
    border-bottom: 1px solid #888;
}
header label {
    float: left;
}
header label input{
    vertical-align: -2px;
}

页脚就更简单了,只需设置文本相关属性,再设置外边距,并添加一条灰色上边框,使页眉和正文界限分明。

footer {
    margin-top: 1em;
    text-align: center;
    letter-spacing: 1px;
    border-top: 1px solid #888;
}

最终的布局效果如图 11‑3 所示:

右栏布局效果

图11-3  右栏布局效果



上一节:11.1.2 左栏布局

下一节:11.1.4 穿上马甲