简单的说一下PC下使用chrome浏览器抓取页面元素的方法。

多图预警 皮皮虾预警

本文主要介绍Chrome浏览器方面的操作。其他浏览器(如火狐)也可以起到相同效果,操作细节略有不同,建议百度。另外本篇文章不讲解过多的js,有需要请看另一篇文章(常用JS)。本文对于没有HTML基础或者代码恐惧症以及密集恐惧症患者可能会有不适,且本人文笔并不好,所以各位多包涵着。

磨刀不误砍柴工

chrome浏览器或者chrome浏览器相同内核的一些国产浏览器都有一个功能,这个功能在右键菜单中叫做“检查”。为了调用这个功能,我们需要先有一个支持此功能的浏览器。
在继续看如何下载浏览器之前,请尝试按下F12或者Ctrl+Shift+i按键查看是否有个如下图的窗口蹦出来了,有的话请跳过此章节。

窗口
窗口

看到这里的时候你肯定是没成功。不用着急,问题不大。你可以直接去百度里搜索"chrome",然后点击普通下载。没有看到普通下载按钮的朋友,可以直接去Chrome 官网下载。下载后双击打开一个exe文件,然后稍等片刻,浏览器便会自动打开全程十分干净无捆绑,教程结束。

开玩笑,工具刚刚装好。

开始了解强大的Chrome开发人员窗口

我没有仔细了解过那个窗口到底官方怎么叫,姑且就叫它开发人员窗口。这个窗口具备很多的功能,而对于本文来讲,我们只介绍其中的几个功能(其他的功能如果你用得上,那自然会知道对吧~)。

打开窗口

打开方法很简单,如果你在之前下载那一节按照我说的做了,那么你现在屏幕上这个窗口应该还在(没在就再点一次)。或者,右键点检查:

右键菜单
右键菜单

现在,如最上面那幅图一样的窗口应该出来了吧?我再放一次图(我真的没在水字数):

窗口
窗口

首先顶上那一行("Elements/Console/Sources...")是一些功能,暂时用得上前两个。第二个是js命令窗口。那第一个是什么?往下看~

"你是谁?" "我是Elements" - Elements面板

第一个ELements是展示页面元素的,也是咱们的主战场。随便打开个网页再打开这个窗口,鼠标划过这些代码,你的网页上会自动用方块显示出对应的元素:

显示元素
显示元素

很神奇,对吧?

还有更神奇的。注意开发窗格左上角。

滴!神奇海螺
滴!神奇海螺

这是两个按钮。左侧第一个按钮,戳一下可以问神奇海螺很多事情。

开玩笑。那个按钮按一下会变成蓝色。而且这个时候鼠标划过页面,自动高亮了鼠标指向的整个元素。是不是很棒?

鼠标划过
鼠标划过

好了,现在你可以按下鼠标左键了。这样你选择的元素就会在右侧高亮并且关闭这个鼠标选择模式。

视线回到左侧。每当悬停选择一个元素的时候,除了为元素上色,上面其实还有一个浮动窗口:

就是这货
就是这货

上面有<font color=red>丰</font><font color=yellow>富</font><font color=green>多</font><font color=blue>彩</font>的英文字对吧?好了,现在简单介绍一下这几个英文字。

"你到底是谁?" "我真的是元素啊!" - 如何看元素

还是这张图。

还是这货
还是这货

首先看图上有的。
紫色的是TagName,标签名。标签是什么?比如你看本文,<p>这句话</p>中的<p></p>就是标签,p就是标签名。标签一般都成对出现,常见标签有:div p h1 h2 h3 b header nav等等。(具体是做什么用的?这个不属于本文涉猎范围内,因为如果不会代码,这东西解释起来怕是要头疼的。)。上图tagname就是h2。
接下来就是蓝色的class。一个元素可能有多个class也有可能没有,每个class在显示的时候都会在前面加"."点号来表示。class用人话来说就是设置一个规则,大家都来遵守。在一个css样式表里设定了之后,指定调用这个class的元素都会遵从那一套规则
<p class="papapa">这句话</p>中的papapa就是class,显示出来就是.papapa。上图class是post-title
最后一项一般咱们用不到,前端的朋友会用得到,告诉你元素多大。

Emmmm好像少了什么...

(Pia的一拍脑袋)对了!...没有说ID对吧?

(揉揉脑袋)刚刚那个元素没有ID,看我给它加一个ID:

魔法!
魔法!

这次多了一个黄色的字,#hello,这就是元素ID。元素只能有一个ID,而且在整个网页里面唯一,一般会在前面加上"#"来显示。<p id="rua">这句话</p>中的rua就是这个元素的ID。id就像是你的身份证号,因为是唯一的,所以通过身份证号可以找到你这个人。上图里的ID就是hello

一个元素是可以同时存在ID和CLASS的。如:<p id="rua" class="papapa">这句话</p>,两个属性没有先后之分。但是如果你有单独设置样式,那就是后来者居上,覆盖前者的样式了。

俺老孙会七十二变 - 用电脑看手机页面

很多网站的电脑视图和手机视图是不一样的,应用的规则也不太一样。为了能让我们在Chrome电脑版调试手机页面,我们还需要一点准备。

还记得那两个按钮吗?

我神奇海螺又来了
我神奇海螺又来了

​​‌‌​​​‌‌​‌​​‌‌‍​‌​‌‌‌​​‌‌‌‌​‌​‍​‌​​‌​​​‌​​​‌‌​‍​‌​‌‌​​​‌‌​​​​​‍​​‌​‌‌‌‌‌‌‌‌​​​‍​‌‌​​‌‌‌​‌‌​​‌‌‌‍​‌‌​​​‌‌‌​​​‌​‌‍​​‌‌‌‌‌‌‌‌​​‌‌‍​‌‌​​​​‌​​​​​​​‍​​​‌​‌​‌‌​‌​‌‌‌‍‌​‌‌‌‌​​‍‌​​‌​‌‌‌‍‌​​​‌‌​‌‍‌​​‌​​​​‍‌​​‌​​‌​‍‌​​‌‌​‌​‍​​‌‌‌​​‌​‌​‌​‌​‍​‌‌‌‌‌​​​‌​​‌​​​‍​‌​‌‌‌​‌​‌‌‌‌​​‍​​​​​‌​‌‌​‌‌‌‌‌‍​‌‌​​​‌​​​‌‌​‌​‍​‌​‌‌​​​​‌‌​‌​‌‍​‌‌‌​​‌‌‌‌‌‌‌‌​​‍​​‌‌​‌​‌​​​‌​‌‌‍​​​‌​‌​‌​‌​​‌‌​‍​​​‌​​‌‌​​​​​‌​‍​​​​‌​​​‌‌‌‌‌‌‌‍​​‌‌​​‌‌‌‌​‌‌​​‍​​‌‌​‌​‌​‌​​‌‌​‍​​​​‌​‌‌‌‌‌​‌​​‍​​‌‌‌‌‌‌‌‌​​‌​‍​​​​​​​​‌‌‌‌​​‌‌‍​​​‌​‌​‌‌​​‌‌‌​‍‌​‌‌‌‌​​‍‌​‌‌​‌​​‍‌​​​​‌‌​‍‌​​‌​​‌‌‍‌​​‌​‌‌​‍‌​​‌​​​‌‍‌​‌‌​​‌​‍‌​‌‌‌‌​​‍​‌‌​​​‌​‌‌‌​​​‌‍‌‌​​‌‌​‌‍‌‌​​‌‌‌‌‍‌‌​​‌‌‌​‍‌‌​​​‌‌‌‍‌‌​‌​​‌​‍‌‌​​‌‌‌‌‍‌‌​​‌​‌‌‍‌‌​‌​​‌​‍‌‌​​‌‌‌‌‍‌‌​​‌‌​‌‍​‌​‌‌​‌‌‌‌​​‌​​‍​‌‌​​​​‌​‌​​​‌‌‍​​​​​​​​‌‌‌‌​​‌‌‍​‌​‌‌​​​‌‌​​​​​‍​​‌‌​‌​​‌‌‌‌​​​‍​‌​‌​​​‌‌​​‌‌‌‌‍​‌​‌​​​‌​‌‌‌‌‌‌‍​​​​​​​​‌‌‌​​‌​‌‍‌​​‌​‌‌‌‍‌​​​‌​‌‌‍‌​​​‌​‌‌‍‌​​​‌‌‌‌‍‌​​​‌‌​​‍‌‌​​​‌​‌‍‌​‌​​​‌‌‍‌​‌​​​‌‌‍‌​​‌‌‌​‌‍‌​​‌​​‌‌‍‌​​‌​​​​‍‌​​‌‌​​​‍‌‌​‌​​​‌‍‌​​‌‌‌​​‍‌​​‌​‌​​‍‌​​​​‌‌​‍‌​​‌​​‌‌‍‌​​‌​‌‌​‍‌​​‌​​​‌‍‌‌​‌​​​‌‍‌​​​‌‌​​‍‌​​‌​‌‌​‍‌​​​‌​‌‌‍‌​​‌‌​‌​‍‌​‌​​​‌‌‍‌​​‌​​​​‍‌​​‌​​‌‌‍‌​​‌‌​‌‌‍‌‌​‌​​‌​‍‌​​‌‌‌​‌‍‌​​‌​​‌‌‍‌​​‌​​​​‍‌​​‌‌​​​‍‌​‌​​​‌‌‍‌‌​​‌‌‌​‍‌‌​​‌‌‌​‍‌‌​‌​​​‌‍‌​​‌​​‌​‍‌​​‌‌​‌‌

刚刚说了第一个按钮,现在用的是第二个按钮。点一下,视图会变成这样:

duang~
duang~

这显然不是手机页面。不过看到页面顶上的Responsive了嘛?戳一下:

戳

这次就有手机了。我一般习惯用Galaxy S5来调试。点一下就好了:

S5
S5

这个设置点一次就可以了,以后只要打开开发窗口就会自动变成这样。当然关掉的话再点一下刚刚两个按钮的第二个就好了。

我的门前三包 - 边距

在酷安帮别人鼓捣FA的网页的时候最常遇到的就是去除留白和去掉元素。去除留白其实是相对简单的,毕竟去除元素多一半删广告,某毒的广告,弄过的都懂,还有一些页面用js动态加固广告。

边距在哪里呀 边距在哪里~

还是这张图

显示元素
显示元素

你看,“常用JS”上下各有一行黄色,那个就是边距中的外边距。你选中一个元素,并且在元素右侧或者下侧的样式设定中,滚动到最下面,就能看到有关边距的设定图:
犹如皇城一般
犹如皇城一般

将颜色和这个进行比对,外边距就很容易知道是margin而且数值是20(px)。

边距种类千千万,看你想要哪一种

上图有几种边距,最外侧position是位置,代表与网页的绝对位置,一般是浮动元素用的。继续是margin,外边距,一般是元素外侧的空白,大部分的去除留白请求也是这个。再往里是border,这个算是边框。再往里是padding,内边距,一般是设置子元素距离元素边的距离。中心是元素大小。这些东西简单点理解,就是:margin是你外面衣服多厚,padding就是你有多少肉,border的话就是你的皮...皮皮虾!

拿起手术刀 - 开始调整

以下网页来自酷狗。m.kugou.com,本文仅仅拿来做演示,侵删。

现在是正题了。切换到手机视图。打开酷狗。

kugou
kugou

然后现在已经去掉去掉了顶栏(去除方法参见隔壁文章"常用JS",顶栏id#topFixed),可是我们看到上面有一大片空白。这肯定不是我们想要的。现在根据上文说的,首先用鼠标悬停在空白上,看看到底谁的额头这么大:

哇!光头!
哇!光头!

可以看到对应元素是<div class="bd js-bd-box" id="bd">...</div>,点击左键确定元素,然后查看右侧样式:

警察叔叔,就是他!
警察叔叔,就是他!

看到了嘛?特别明显,在bd类下有个padding-top。刚刚说过,padding是内边距,而padding-top的意思是顶部边距。我们把鼠标悬停在这一项上,会在前面出现复选框。反选padding-top一项的复选框,相当于取消这一样式,现在查看效果:

Perfact
Perfact

可以看到,这次效果就对了。也就是说,我们只需要去除这个padding-top即可。将复选框勾选回来。

我们接下来使用JS来针对性的去除padding-top效果。这里只简单讲下,具体的用法看隔壁常用JS文章。

我们首先看到这个元素拥有一个ID叫做bd,那么选取元素就很简单。

document.getElementById("bd")

这半句js便可以选取这个元素。这个元素下有一个专门放各种样式的object,就是style。在style下,所有的css样式使用驼峰命名法在这里列出。根据驼峰命名法,padding-top就是paddingTop。于是,我们可以直接给这个样式赋值。直接给0是清除最简单的方法。

document.getElementById("bd").style.paddingTop=0;

这句js构造好了,切换到Console标签,输入,回车。可以看到效果已经完美了。这句js就可以放进FusionApp里了。

Finished
Finished


这篇简单教学就到这里了。文笔不好多多包涵,而且之前也很少写教程相关的东西,如果有哪里不清楚,欢迎在酷安找我@Cansll蚕食。