41、网页布局定位技巧全解析

网页布局定位技巧全解析

1. 头部图像布局问题与解决方案

在处理网页头部图像布局时，当浏览器窗口宽度超过 800px 时，右侧会出现额外空间。若将浏览器窗口宽度调整得比头部图像宽或窄，会发现头部布局未能如预期那样完美适配。特别是当浏览器宽度小于 800px 时，头部图像中的标语部分会超出浏览器窗口边缘。

为解决这一问题，可将头部图像拆分为两个不同的图像，一个包含 logo，另一个包含标语。具体操作步骤如下：
1. 拆分头部图像 ：找到 “chapter11/starbuzz/images” 文件夹中的 “headerLogo.gif” 和 “headerSlogan.gif” 这两个图像。
2. 更新 HTML ：用上述两个图像替换现有的 800 像素宽的头部大图像，并为每个图像添加一个 id，以便在 CSS 中选择它们。示例代码如下：

<div id="header">
  <img src="images/header.gif" alt="Starbuzz Coffee header image">
  <img id="headerLogo" src="images/headerLogo.gif" alt="Starbuzz Coffee logo image">
  <img id="headerSlogan" src="images/headerSlogan.gif" alt="Providing all the caffeine you need to power your