CSS两栏布局之右栏布局

右栏的主内容区包含页眉、正文和页脚三个部分。正文的内容将在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 右栏布局效果

关于作者

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

CSS两栏布局之右栏布局相关推荐

【word】双栏写作如何调整为写满左栏再写右栏
word双栏写作一般默认都是写满了左栏再跳到右栏,如果不小心设置了添加了设置标记. 问题图: 步骤: 点击显示段落标记 2.然后原文就可以看到标记: 3,直接删掉即可(PS.有时候标记非常小,可能看不 ...
word中分栏后文字均匀的分布在了左右两栏,而不是填满左栏再填右栏,怎么办?
应该是在设置分栏时选定了部分段落. 解决办法: 重新设置分栏,通过菜单:格式→分栏→栏数设置成2,并将"应用于"设置成"整篇文档"→确定. 回到普通界面后,将文 ...
css -- 两种方法实现流式布局
Bootstrap将屏幕分为4个等级: 1.超小屏幕 (宽度小于768 px), 显示宽度 100%; 2.小屏幕 (宽度在768px ~ 992px), 显示宽度 750px; 3.中等屏幕 (宽度 ...
左栏固定，右栏自适应
方法1: <style> body{ margin:0; height:100%} html{ height:100%} /*兼容firefox的div高度100%*/ #left{ po ...
用CSS的float属性创建三栏布局网页的方法
三栏布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度.本文介绍一 ...
css多栏布局(双栏布局、三栏布局、圣杯布局、双飞翼布局)
1.两栏布局两栏布局的核心是左栏固定宽度,右栏宽度自适应 html结构为 <div class="outer"><div class="left&qu ...
CSS floats来创建三栏网页布局的方法
栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度. 绝 ...
CSS 两栏布局之总体设计
随意打开一个 word 文档一看,其布局便一目了然.它分为左.右两栏,左栏为文档的目录树,右栏为文档的内容.而内容区又被分为页眉.正文和页脚三个部分. 这里跟现实版的 word 保持一致,也采用相同的 ...
css布局：table布局、两栏布局、三栏布局
一.最初的布局--table 最初的时候,网页简单到可能只有文字和链接.这时候,大家最常用的就是table.因为table可以展示出多个块的排布.这种布局现在应该不常用了,因为在形色单一时,使用起来方 ...

CSS两栏布局之右栏布局

CSS两栏布局之右栏布局相关推荐

最新文章

热门文章