《与页面布局》PPT课件

第 19章 CSS与 页 面 布 局l 使 用 CSS布 局 页 面 和 传 统 的 使 用 表 格 布 局 页 面 有 很 大 的区 别 。 使 用 CSS布 局 页 面 时 ， 要 注 意 很 多 问 题 ， 例 如 元素 的 居 中 问 题 、 图 文 混 排 问 题 、 元 素 的 浮 动 问 题 、 宽 度的 计 算 问 题 、 高 度 的 扩 展 问 题 等 。 下 面 详 细 讲 解 使 用CSS进 行 页 面 布 局 的 知 识 。 19.1 CSS页 面 布 局 简 介l 本 节 主 要 讲 解 使 用 CSS布 局 页 面 的 基 础 知 识 ， 其 中 包 括CSS布 局 页 面 的 优 点 、 CSS页 面 布 局 的 基 本 思 想 等 。 19.1.1 CSS布 局 页 面 的 优 点l 1 网 站 浏 览 者 的 好 处l 由 于 页 面 代 码 量 减 少 ， 文 件 下 载 速 度 更 快 。 同 时 ，浏 览 器 显 示 页 面 的 速 度 也 更 快 。l 由 于 清 晰 的 语 义 结 构 ， 使 得 内 容 能 被 更 多 的 用 户（ 包 括 部 分 残 障 人 士 ） 所 访 问 。l 由 于 实 现 了 结 构 和 表 现 相 分 离 ， 内 容 能 被 更 多 的 设备 （ 包 括 手 机 、 打 印 机 等 ） 所 访 问 。l 由 于 样 式 文 件 的 独 立 性 ， 用 户 选 择 自 己 喜 欢 的 界 面变 得 更 容 易 。 19.1.1 CSS布 局 页 面 的 优 点l 2 网 站 拥 有 者 的 好 处l 由 于 代 码 变 得 更 简 洁 和 组 件 用 得 更 少 ， 使 得 维 护 变 得 很容 易 。l 由 于 对 带 宽 要 求 的 降 低 ， 节 约 了 成 本 。l 由 于 页 面 结 构 清 晰 的 语 义 性 ， 使 得 搜 索 引 擎 的 搜 索 变 得更 容 易 。 19.1.2 CSS布 局 页 面 的 基 本 思 想l CSS布 局 页 面 的 基 本 思 想 ， 就 是 实 现 网 页 结 构 和 表 现 相分 离 。l 内 容 、 结 构 和 表 现 是 一 个 网 页 必 不 可 少 的 组 成 部 分 ， 其中 内 容 是 页 面 传 达 信 息 的 基 础 ， 表 现 使 得 内 容 的 传 达 变得 更 加 明 晰 和 方 便 ， 而 结 构 则 是 内 容 和 表 现 之 间 的 纽 带 ，内 容 、 结 构 和 表 现 的 具 体 含 义 如 下 所 示 。l 内 容 ： 是 指 网 页 实 际 要 传 达 的 信 息 ， 包 括 文 本 、 图 片 、音 乐 、 视 频 、 数 据 、 文 档 等 。 其 中 不 包 括 修 饰 的 图 片 、背 景 音 乐 等 。 19.2 定 义 文 档 结 构l 在 W3C推 荐 的 Web标 准 中 ， 推 荐 使 用 过 渡 的 XHTML文 档 作为 CSS布 局 页 面 的 文 档 ， 具 体 操 作 如 下 所 示 。 19.3 CSS样 式 的 优 先 级l 在 页 面 中 ， 定 义 CSS样 式 有 三 种 形 式 ： 一 种 为 只 对 该 文档 的 CSS样 式 ； 一 种 为 附 加 的 CSS样 式 ； 还 有 一 种 为 使 用style属 性 定 义 的 CSS样 式 。 其 中 前 两 种 定 义 CSS样 式 的方 法 ， 在 第 18章 中 已 经 讲 解 过 了 。 下 面 讲 解 使 用 style属 性 定 义 的 CSS样 式 的 内 容 ， 以 及 三 种 方 式 的 优 先 级 。l 1 使 用 style属 性 定 义 CSS样 式 19.3 CSS样 式 的 优 先 级l 2 CSS样 式 的 优 先 级 19.4 页 面 属 性 与 CSS样 式l 在 文 档 中 ， 页 面 属 性 的 部 分 参 数 ， 会 使 用 CSS样 式 进 行定 义 ， 其 中 包 括 外 观 、 标 题 、 链 接 等 选 项 。 页 面 属 性 的样 式 会 定 义 在 文 档 的 头 部 ， 如 图 19.5 水 平 居 中l 在 大 多 数 页 面 中 ， 页 面 的 内 容 都 居 中 显 示 ， 如 果 页 面 中未 定 义 任 何 属 性 或 添 加 相 应 的 元 素 ， 页 面 元 素 就 会 以 页面 的 左 上 角 为 基 准 显 示 。 下 面 分 别 讲 解 在 传 统 布 局 和CSS布 局 中 ， 定 义 页 面 元 素 居 中 的 方 法 。 19.5.1 传 统 布 局 中 定 义 内 容 水 平 居 中l 在 传 统 布 局 中 ， 一 般 通 过 使 用 元 素 定 义 页 面 内容 水 平 居 中 ， 元 素 是 由 两 个 部 分 组 成 的 ， 分 别是 开 始 标 签 和 结 束 标 签 。l 在 文 档 中 ， 将 开 始 标 签 放 在 元 素 之 后 ，结 束 标 签 放 在 元 素 之 前 ， 这 样 由元 素 包 含 的 内 容 ， 将 水 平 居 中 显 示 。 19.5.2 使 用 CSS定 义 内 容 水 平 居 中l 使 用 CSS定 义 内 容 水 平 居 中 有 两 种 方 法 ： 一 种 是 使 用 文 本 对 齐 属 性 ； 另 一种 是 使 用 边 界 属 性 。 下 面 讲 解 具 体 的 制 作 方 法 。l 1 使 用 文 本 对 齐 属 性 定 义 居 中 19.5.2 使 用 CSS定 义 内 容 水 平 居 中l 2 使 用 边 界 属 性 定 义 居 中l 使 用 边 界 属 性 定 义 页 面 内 容 水 平 居 中 时 ， 要 将 边 界 属 性定 义 在 需 要 水 平 居 中 的 元 素 之 中 ， 具 体 操 作 如 下 所 示 。 19.6 浮 动 与 清 除l 在 使 用 CSS布 局 的 页 面 中 ， 一 般 不 使 用 AP Div进 行 页 面的 布 局 。 多 数 页 面 都 使 用 浮 动 属 性 进 行 页 面 元 素 的 布 局 。但 是 不 同 的 浏 览 器 ， 对 浮 动 的 解 释 并 不 相 同 。 有 时 候 为了 要 显 示 某 种 效 果 ， 还 要 使 用 清 除 浮 动 属 性 ， 使 元 素 某个 方 向 不 能 含 有 浮 动 元 素 。 19.6.1 浮 动 元 素 与 固 定 元 素l 在 CSS布 局 中 ， 如 果 为 元 素 定 义 了 浮 动 属 性 ， 元 素 会 从 元 素 所 在 行 中 分 离出 来 ， 在 另 一 个 层 次 中 按 照 浮 动 的 参 数 显 示 ， 而 在 浮 动 元 素 之 后 的 非 浮 动元 素 ， 会 忽 略 浮 动 元 素 继 续 显 示 ， 但 是 IE浏 览 器 和 常 用 的 Firefox浏 览 器对 这 个 属 性 的 解 释 并 不 相 同 。 下 面 通 过 示 例 ， 讲 解 浮 动 元 素 后 面 含 有 非 浮动 元 素 的 显 示 效 果 。 具 体 操 作 如 下 所 示 。 19.6.2 两 个 浮 动 元 素l 在 CSS布 局 中 ， 含 有 浮 动 属 性 的 元 素 ， 会 显 示 在 一 个 相对 独 立 的 层 次 中 。 所 以 当 两 个 浮 动 元 素 并 列 在 一 起 时 ，元 素 无 法 重 叠 显 示 ， 后 插 入 的 元 素 会 按 照 前 一 个 元 素 定义 的 属 性 值 ， 显 示 在 相 应 的 位 置 。 具 体 操 作 如 下 所 示 。 19.6.3 多 个 浮 动 元 素l 在 CSS布 局 中 ， 如 果 并 列 插 入 多 个 浮 动 元 素 ， 每 个 后 插入 的 元 素 的 显 示 位 置 ， 要 参 照 前 面 元 素 定 义 的 属 性 值 ，具 体 操 作 如 下 所 示 。 19.6.4 浮 动 元 素 和 父 元 素l 在 CSS布 局 中 ， 如 果 一 个 元 素 中 包 含 浮 动 元 素 ， 在 IE浏 览 器 中 ， 浮 动 元 素会 撑 开 父 元 素 ， 在 Firefox中 浮 动 元 素 会 浮 动 在 父 元 素 上 ， 下 面 是 元 素 中包 含 浮 动 元 素 的 示 例 ， 具 体 操 作 如 下 所 示 。 19.6.5 清 除 浮 动 元 素l 在 CSS布 局 中 ， 如 果 浮 动 元 素 后 面 紧 跟 浮 动 元 素 ， 那 么 浮 动 元 素 就 会 同 行显 示 ， 直 到 浮 动 元 素 宽 度 之 和 超 出 父 元 素 宽 度 为 止 。 如 果 在 浮 动 元 素 后 面紧 跟 固 定 元 素 ， 或 者 浮 动 元 素 包 含 在 父 元 素 之 中 ， 则 在 IE浏 览 器 和Firefox浏 览 器 中 会 显 示 不 同 的 效 果 。 使 用 清 除 浮 动 属 性 ， 可 以 调 整 浮 动元 素 的 显 示 效 果 ， 具 体 操 作 如 下 所 示 。 19.7 计 算 元 素 的 宽 度l 在 使 用 CSS定 义 元 素 的 大 小 时 ， 元 素 的 宽 度 是 由 宽 度 、边 框 、 填 充 、 边 界 等 几 个 部 分 组 成 的 ， 在 元 素 的 不 同 部分 中 ， 显 示 的 内 容 也 不 同 。 下 面 进 行 详 细 讲 解 。 19.7.1 元 素 宽 度 的 计 算l 在 CSS中 所 有 的 文 档 元 素 都 会 生 成 一 个 矩 形 框 ， 这 个 矩形 框 由 以 下 几 个 部 分 组 成 ： 边 界 、 边 框 、 填 充 、 宽 度 、高 度 。 其 具 体 组 成 如 图 所 示 。 19.7.2 元 素 各 个 部 分 的 作 用l 元 素 各 个 部 分 ， 包 括 宽 度 、 高 度 、 边 框 、 填 充 、 边 界 等 ，各 自 显 示 的 内 容 以 及 作 用 各 不 相 同 ， 下 面 分 别 进 行 介 绍 。l 宽 度 和 高 度 ： 在 宽 度 和 高 度 构 成 的 矩 形 框 中 ， 显 示的 是 元 素 的 内 容 部 分 。 其 中 包 括 文 本 、 图 像 、 视 频 等 内容 。l 填 充 ： 是 内 容 与 边 框 之 间 的 部 分 ， 显 示 元 素 的 背 景颜 色 或 者 背 景 图 像 。 19.7.3 嵌 套 元 素 之 间 的 距 离l 嵌 套 元 素 ， 当 同 时 定 义 父 元 素 的 “ 填 充 ” 属 性 ， 同 时 定 义 了 子 元 素 的 “ 边界 ” 属 性 时 ， 两 个 元 素 边 框 间 的 距 离 和 两 个 元 素 是 否 定 义 了 大 小 有 关 ， 下面 分 别 进 行 介 绍 。l 1 元 素 未 定 义 大 小 在 父 元 素 和 子 元 素 中 定 义 “ 边 框 ” 样 式 ， 如 图 所 示 。 19.7.3 嵌 套 元 素 之 间 的 距 离l 2 定 义 子 元 素 的 宽 度l 在 子 元 素 中 定 义 “ 方 框 ” 样 式 ， 如 图 所 示 。 19.7.3 嵌 套 元 素 之 间 的 距 离l 3 定 义 子 元 素 的 宽 度 同 时 定 义 父 元 素 的 宽 度 19.8 自 适 应 的 问 题l 自 适 应 的 问 题 分 为 两 个 方 面 ： 一 方 面 是 水 平 自 适 应 ； 另一 方 面 是 垂 直 自 适 应 。 水 平 自 适 应 要 涉 及 到 很 多 具 体 的因 素 ， 使 用 得 较 少 ； 垂 直 自 适 应 在 动 态 页 面 中 经 常 用 到 ，下 面 进 行 详 细 讲 解 。 19.8.1 什 么 叫 自 适 应l 自 适 应 主 要 指 的 是 自 适 应 浏 览 器 不 同 的 分 辨 率 、 自 适 应高 度 、 自 适 应 宽 度 。 其 中 ， 当 自 适 应 浏 览 器 的 分 辨 率 不同 时 ， 主 要 使 用 百 分 比 来 布 局 。 由 于 使 用 的 技 巧 和 要 注意 的 问 题 都 比 较 复 杂 ， 本 书 将 不 做 讲 解 。 下 面 讲 解 自 适应 高 度 的 问 题 。l 自 适 应 高 度 的 意 思 是 元 素 随 着 内 容 的 增 加 而 自 动 增 高（ 包 括 元 素 之 间 的 互 相 影 响 的 适 应 问 题 ） 。 例 如 其 中 一个 元 素 中 的 内 容 增 加 ， 另 一 个 元 素 的 背 景 也 随 之 增 加 。 19.8.2 水 平 自 适 应l 实 现 水 平 自 适 应 主 要 有 两 种 方 法 ： 一 种 是 使 用 宽 度 值 定 义 百 分 比 的 方 法 ；另 一 种 是 使 用 水 平 方 向 上 绝 对 定 位 的 方 法 。 下 面 分 别 讲 解 。l 1 采 用 百 分 比 布 局 19.8.2 水 平 自 适 应l 2 采 用 绝 对 定 位 布 局l 采 用 绝 对 定 位 可 以 使 元 素 固 定 在 浏 览 器 窗 口 的 某 个 位 置 。 所 以 ， 可 以 通 过绝 对 定 位 的 方 法 固 定 各 列 元 素 。 下 面 是 使 用 绝 对 定 位 布 局 的 示 例 ， 具 体 操作 如 下 所 示 。 19.8.3 两 列 的 垂 直 自 适 应l 两 列 的 垂 直 自 适 应 主 要 分 为 两 种 情 况 ： 一 种 是 其 中 一 列 中 内 容 固 定 ； 另 一种 是 两 列 中 任 何 一 列 的 内 容 都 不 固 定 。 下 面 分 别 讲 解 。l 1 一 列 内 容 固 定 的 自 适 应 19.8.3 两 列 的 垂 直 自 适 应l 2 两 列 完 全 自 适 应l 并 列 的 两 列 中 ， 背 景 不 同 ， 同 时 每 一 列 的 内 容 也 不 固 定 。可 以 在 嵌 套 的 Div标 签 中 使 用 负 的 边 界 值 来 实 现 ， 具 体操 作 如 下 所 示 。 19.8.4 三 列 完 全 垂 直 自 适 应l 三 列 完 全 垂 直 自 适 应 是 指 任 何 一 列 的 内 容 都 不 固 定 ， 同时 三 列 内 容 有 各 自 不 同 的 背 景 的 情 况 。 19.8.5 使 用 背 景 图 像 的 垂 直 自 适 应l 如 果 在 元 素 中 使 用 背 景 图 像 ， 可 以 很 简 单 地 完 成 高 度 上的 自 适 应 ， 具 体 操 作 如 下 所 示 。 19.9 浏 览 器 和 兼 容 问 题l 浏 览 器 及 兼 容 问 题 是 使 用 CSS布 局 时 经 常 遇 到 的 问 题 ，其 主 要 原 因 是 各 种 浏 览 器 对 CSS的 支 持 程 度 不 同 ， 同 时每 种 浏 览 器 又 有 其 自 身 特 有 的 处 理 方 法 ， 所 以 如 果 要 使制 作 的 网 页 能 兼 容 各 种 浏 览 器 ， 就 要 了 解 各 个 浏 览 器 的特 性 ， 同 时 会 使 用 一 定 的 技 巧 。 19.9.1 各 种 浏 览 器 简 介l 现 在 用 来 浏 览 网 页 的 浏 览 器 有 很 多 种 ， 其 中 使 用 得 比 较 多 的 是 IE浏览 器 、 Firefox浏 览 器 等 。 同 时 还 有 Netscape和 Opera等 其 他 的 浏 览器 。 下 面 分 别 进 行 简 单 介 绍 。l 1 IE浏 览 器l IE浏 览 器 全 称 是 Internet Explorer， 是 微 软 公 司 发 布 的 免 费 浏 览器 。 由 于 直 接 绑 定 在 Windows操 作 系 统 之 中 ， 所 以 无 须 下 载 安 装 。由 于 发 布 的 先 后 不 同 ， 有 IE 4.0/5.0/5.5/6.0等 很 多 版 本 ， 目 前 最新 的 是 IE 7.0版 本 。 19.9.1 各 种 浏 览 器 简 介l 2 Firefox浏 览 器l Firefox浏 览 器 又 称 为 火 狐 浏 览 器 ， 是 Mozilla基 金 会 与众 多 志 愿 者 所 开 发 的 ， 现 在 也 有 很 多 的 使 用 者 。 19.9.1 各 种 浏 览 器 简 介l 3 Netscape Navigator网 景 浏 览 器l 网 景 浏 览 器 是 Netscape通 信 公 司 开 发 的 浏 览 器 ， 提 供 了在 不 同 操 作 系 统 中 使 用 的 免 费 版 本 ， 在 Unix用 户 群 中 的使 用 率 较 高 。 19.9.1 各 种 浏 览 器 简 介l 4 Opera浏 览 器l Opera浏 览 器 是 由 Opera Software ASA出 品 的 一 款 网 络浏 览 器 。 同 时 支 持 Windows、 移 动 电 话 等 很 多 平 台 ， 同时 也 支 持 中 文 、 英 文 等 很 多 语 言 。 19.9.2 兼 容 浏 览 器 的 原 则l 各 种 浏 览 器 在 广 大 用 户 中 的 使 用 率 并 不 相 同 ， 同 时 每 个站 点 面 对 的 浏 览 群 体 也 存 在 差 别 ， 所 以 兼 容 的 问 题 也 会比 较 复 杂 。 总 体 来 讲 ， 关 于 页 面 要 兼 容 哪 些 浏 览 器 的 问题 ， 主 要 遵 循 以 下 几 个 原 则 。l 1 使 用 者 的 需 要 19.9.3 解 决 兼 容 问 题 的 原 理l 由 于 CSS样 式 以 及 页 面 各 种 元 素 在 不 同 浏 览 器 中 的 表 现不 同 ， 解 决 兼 容 性 问 题 一 般 可 以 遵 循 以 下 两 个 原 理 。l 1 使 用 CSS hack 19.9.3 解 决 兼 容 问 题 的 原 理l 2 尽 量 使 用 兼 容 属 性l 因 为 并 不 是 所 有 的 CSS属 性 都 存 在 兼 容 的 问 题 ， 所 以 如果 使 用 所 有 浏 览 器 都 能 理 解 一 致 的 属 性 ， 那 么 兼 容 的 问题 也 就 不 存 在 了 。l 但 是 如 果 要 实 现 这 样 的 兼 容 要 考 虑 的 因 素 相 应 的 会 更 多 。因 为 每 增 加 一 种 要 兼 容 的 浏 览 器 ， 就 会 有 一 部 分 CSS属性 的 使 用 受 到 限 制 。 也 就 是 说 兼 容 的 浏 览 器 越 多 ， 能 够使 用 的 CSS属 性 就 越 少 。 19.10 专 家 总 结l 使 用 CSS样 式 表 对 网 页 进 行 布 局 ， 已 经 被 广 大 网 页 制 作者 所 接 受 ， 同 时 其 优 点 也 变 得 日 益 突 出 。 在 使 用 CSS样式 表 对 网 页 进 行 布 局 的 时 候 ， 首 先 要 分 清 页 面 的 结 构 部分 和 表 现 部 分 ， 将 网 页 中 所 有 的 表 现 效 果 均 定 义 在 CSS样 式 文 件 之 中 ， 以 便 于 页 面 显 示 效 果 的 修 改 。 在 制 作 页面 的 同 时 ， 还 要 考 虑 布 局 在 各 种 浏 览 器 中 的 显 示 效 果 ，尽 量 做 到 在 各 种 浏 览 器 中 正 常 显 示 。