代码教程——第十九章 导航条（四）

你说，上节课的都听明白了，就是不懂。

这很正常，现在我们来说一个你以后在网页前端道路上不可或缺的助手——“审查元素”（这是 Chrome 浏览器里的名字，而 Firefox 里叫做“查看元素”）。

其实很简单，你对着你要研究的元素右键，然后选择审查元素就行了。

然后我们就看到一个如下图的界面（Firefox 中类似）：

左下方是网页当前用来显示的代码，先记住我这个说法，到后面我们研究 JavaScript 的时候你就明白我为什么这么说了。

现在深灰色的那行就是我们刚才右键的元素所对应的代码。而右侧上边的内容就是这个元素所对应的 CSS 代码（只是与这个元素有关的部分哦）。

往下看，右下方那个黄色绿色蓝色一层套一层的方块，就是当前元素的盒模型了，结合上节课的内容，其实你稍微认真看下就能理解了。

然后如果你觉得 CSS 一套一套的看着眼晕，就点击那个 computed（计算后） 标签，意思就是把重复的合并，未生效的省略……之后，当前元素实际的有效的 CSS 属性和对应的值。非常方便。

我们再回到左边，用鼠标在代码上滑动（不是点击，也不是拖动），你会看到一个蓝色的条着重显示你鼠标指向的代码。同时上面网页上的某些元素会被用特殊的颜色标识出来。所以现在你指哪行代码，那行代码所对应的元素就会在页面上标记出来，而且你注意他的标识颜色，与右下方盒模型的颜色是对应的。这样哪里是外补哪里是内补就一目了然了。

然后说说那些小图标，左上那个小手机的标志是移动设备视图，现在我们还用不上，将来我们讲响应式网页的时候会用到。右边齿轮是设置，叉是关闭。那个一半黑一半白的图标是说现在这个面板所处的位置，你可以点击它调整位置看看效果，反正再找相应的图标点击还能回来，怎么方便怎么用就是了。

这个简单吧，你看我就这么几句话，你还都能听得懂，就把我们眼下用的到的都讲清楚了。来给你讲个案例让你了解他的强大。

我们知道背景图片是不可以右键另存为的，但是有的时候图片真的很美，怎么把他们搞下来呢？我们打开 500px 来做实验，在它的首页大图上右键，然后鼠标在代码上上下滑动找那行可以让蓝色正好覆盖整整个图片的代码，其实也就是说这个元素的内容部分正好和图片一致，点击这一行，然后看右侧的 css ，上下滚动寻找 background 后面的网址，鼠标放上去看看，会有图片缩略图，基本就是这张图片了。如果没找到，那么在上一层下一层元素查查也基本差不多了。

你说页面不允许右键？那你按一下 F12 键试试看。当然了，在这里还是要强调一下，技术无罪，但你得用来干正事，反正白茶同学说过：

长期盗图，对投胎不好！

顺便说一句，如果你在我下方所列出的四个站点之外看到本教程，基本上他们是盗版的！！！

好了，回归主题，有一句话说能看到就能改！（来自某玄幻小说）用来形容这个工具还是十分恰当的，反正那些代码想改哪里双击就是了（你别很实在的双击里面链接就好）。然后尽情的修改和测试吧～～

这东西实在太过强大和有用，建议每天玩一会，玩懂他！