16、网页调试与检查工具全解析

网页调试与检查工具全解析

1. 颜色选择器

颜色选择器是一个简单的对话框，它会显示鼠标光标下方的当前颜色。由于该工具在标签页的上下文中运行，所以它只能选取标签页内位置的颜色，包括状态栏、浏览器栏、滚动条以及页面本身。通过“复制并关闭”按钮，可将所选颜色复制到剪贴板。

2. 扩展工具集实战

以“Joy of Fonts”博客为例，展示如何使用扩展工具集完善页面。
- 修改标题 ：原标题是灰色文本搭配深色背景，现在要让“Joy”这个词从标题中凸显出来。将“Joy”从标题中移除并放入 <span> 标签，同时添加一个透明图像文件，在 “The” 和 “of” 之间创建间距。

<!-- 新的博客标题标记 -->
<div class="header">
  <h1>
    The  
    <img class="spacer" src="images/spacer.gif" alt="(blank)">
    of Fonts - A Blog
  </h1>
  <span class="deco-text">JOY</span>
</div>

/* 新的博客标题样式 */
.spacer {
  height: 5px;
}
.deco-text {
  position: absolute;
  font-family