【即将关站通知●已关闭注册功能】,倒计时剩余:计算中...

[建站技巧] 利用审查元素这个神器去修改任何想要修改的网页图片或者元素

[复制链接]
魔趣吧站长魔趣吧官方成员 实名认证 发表于 2017-11-18 22:18:28 | 显示全部楼层 |阅读模式
很多刚接触网站建设的用户总是不知道如何去找修改想要修改的地方,有的是一张图片,有的是一个DIV或者一个其他网页元素,这里魔趣吧讲一下如何利用浏览器自带的【审查元素】功能去定位想要修改的地方!
- B; D4 b0 }4 Q! i% [8 K% V; I) I6 m# F) H7 o5 I' z7 a3 \7 b
1,审查元素在哪里?很多小白甚至不知道【审查元素】是什么意思,也不会去使用这个功能。审查元素是很多浏览器都有的一个功能!百度百科是这样解释的:审查元素是Google Chrome浏览器提供的一项服务功能,用户只需右键点击“审查元素”(名字),即可打开Chrome Inspector,获得网页各种元素的加载时间、Javascript函数、Object等信息。当然,现在很多浏览器都有这个功能了,不过仍然推荐使用Chrome浏览器进行相关的学习修改!Chrome浏览器打开审查元素的方法如下:7 X+ ?! X3 f8 W! a  M- v" N
' b! R' d1 o: ^* D8 ?5 o
, D7 f+ W% Y) ~) O( g
(1)在需要修改的页面单击鼠标右键,在弹出的对话框中选择【检查】,如下图:
. k# l$ {1 d: L: B9 ~* b
. H! t1 J! W/ Q& L
) h0 d& \- |+ O, m
利用审查元素这个神器去修改任何想要修改的网页图片或者元素 + D, K- A+ k# w

% ?  N1 ~5 d: Q这样就打开了【审查元素功能】,其效果如下图:& j; N3 \* T7 k, X: w$ F5 [9 A

7 }  X# N$ x0 O 利用审查元素这个神器去修改任何想要修改的网页图片或者元素 / L8 e2 f- s3 H
1 ?2 O3 E9 q( m5 [  Z8 K
(2)为了方便审查,我们点击如图位置,选择【左右】审查模式,方便修改!如下图:5 @8 G7 g: h- m

! u8 [, g5 d% Q
7 H2 F0 W% k! h" v4 B  J
利用审查元素这个神器去修改任何想要修改的网页图片或者元素 利用审查元素这个神器去修改任何想要修改的网页图片或者元素 5 F/ H6 `0 u( _5 C4 \+ j" O
2 D8 }: G( W4 N5 c, R
2,使用审查元素功能去定位想要修改的图片既然打开了审查元素,那么就要用!这里我们以一个很多小白经常询问的问题来演示使用方法!那就是查找页面的一个图片并定位修改!如下图,我们尝试去修改这个LOGO图片,那么首先要找到LOGO图片的位置:
" C: {( d6 m) ^  s6 c' O; C. K4 L& U; F) Z1 c& j

# r8 M$ B2 d; Q" h% f; a 利用审查元素这个神器去修改任何想要修改的网页图片或者元素 ( n6 h- N& j. S; W) t1 Z
6 N! |  P/ P' Z" }! ?
1 m5 c# J/ Q/ N) _
这里我们在这个图片上面单击鼠标右键,然后选择【审查】,可以看到,在右侧的审查窗口出现了图片的路径!
1 _/ C! q! ]) a3 W! p$ s+ H 利用审查元素这个神器去修改任何想要修改的网页图片或者元素 , B% j( N* h6 h2 {" M; j+ Q

- c. k  |$ U1 [, o3 ?. S2 Z我们在这个路径上单击鼠标右键,在弹出的窗口选择【在新窗口打开】,如下图:& c. n1 M. [& L' Y/ m
利用审查元素这个神器去修改任何想要修改的网页图片或者元素
" v: J4 {- h+ x: q& _# z0 Q/ J
  ^! }2 S, Z- W6 b! z

8 I' j( e3 N. F2 u& X' w* D- Y可以看到,图片在新窗口被打开了(当然,你也可以直接在图片上单击鼠标右键,选择在新窗口打开图片,不过一些图片可能是用CSS调用,那么就可以用这种方法来获取路径!),此时我们已经看到了这个图片的具体路径,只需要替换这个图片即可!
1 M( _7 o6 {" H: ~/ [1 S% u0 Q9 G$ G1 U
$ @+ ]* k/ x  G- U" {; s; _- `3 d
利用审查元素这个神器去修改任何想要修改的网页图片或者元素
! h0 F- e/ h/ k5 h4 l# {2 o4 ^% W' u- x/ E* F, W9 K7 `
以上就是利用审查元素的方法来获取任意页面图片真实路径的方法!当然,部分网站可能添加了防鼠标右键的功能,这个就不是本教程的范围了!
5 L! Q# U; u' @4 G% z0 A& \. V, O8 [* a9 Z; i. T! f, Z+ L
3,使用审查元素来定位需要修改的元素或者DIV!实际上方法和第二步的图片定位是相似的,只不过修改的对象变成了其他元素,想要修改哪里,就在哪里单击鼠标右键,审查元素!比如想修改图中的部分,就对这块审查元素,可以获取到这里的DIV class名称,然后下载对应的插件或者模板全部文件,进行全文搜索class即可定位(全文搜索操作教程):
/ I+ s, y. R0 A
7 Y# y* }0 c( O

6 _1 I6 L$ O; s% F9 Y* F 利用审查元素这个神器去修改任何想要修改的网页图片或者元素
( m4 `3 v  @8 L. w( f  [7 A: P, z% e# j$ w; g1 F; K3 x1 h
( |( q) C$ [& H
然后做针对性修改即可,这个需要长期的实践才能熟练,多练习即可!, }7 L, `( P! B( u: Z. U  F

5 I. E. R! a# {- O
  Q* M0 Z$ r& L) H8 ]* z" w

; z4 E5 K* w9 J2 i审查元素功能强大!除了定位需要修改的元素,还可以查看页面是否有JS错误等,这些可以自己多多研究!魔趣吧也会不断的推出相关的教程!1 C2 x0 i+ A, ~- ]' `% q2 b9 Q, L
# B9 i/ A. B# e/ Y" r" \3 L

魔趣吧版权声明1,本文内容及相关资源来源于网络,版权归版权方所有!本站原创内容版权归本站所有,请勿转载!
2,本文内容仅代表作者本人观点,不代表本网站立场,作者文责自负,本站资源仅供学习研究,请勿非法使用,否则后果自负!请下载后24小时内删除!
3,本文内容,包括但不限于源码、文字、图片等,仅供参考使用,本站不对其安全性,正确性等作出保证。但本站会尽量审核会员发表的内容
4,如您认为本文内容侵犯了您的权益,请与我们联系!我们将在5个工作日内做出处理!本站保留全部修改、解释、更新本声明的权利魔趣吧

回复

使用道具 举报

支持,虽然讲的太牵线了,不够用
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

在线支持
关闭
欢迎来到魔趣吧
如果你有建站技术问题、仿站需求、模板插件修改需求,请联系我们的技术支持!高效率,低价格的帮你搞定!
请认准魔趣吧唯一官网:www.moqu8.com,谨防假冒网站!

一般问题请到【求助区】发帖咨询(免费)!

邮箱咨询:
winkill2012@qq.com

邮箱咨询需注明:资源地址+本站用户名+具体问题,三者缺一不做处理。非本站资源不处理!
在线支持
快速回复 返回列表

关于魔趣吧|魔趣建站

魔趣吧,志在打造全国最大的建站资源共享平台。 本站提供海量免费的建站资源,包括WordPress模板、Discuz精仿模板、PHPWind模板、phpcms模板、Discuz精仿插件、帝国cms模板、织梦模板等上万精品模板!同时,提供各种建站素材、JS特效、整站程序源码!
服务中文站长,传播分享精神!建站,就来魔趣吧!!
2015-2024 魔趣吧 ( 豫ICP备2021024354号 )   豫公网安备41030402000182号 百度统计
HTTPS安全认证
|网站地图 | 已运行:天 
温馨提示:本站所有资源、教程、源码,不得用于非法站点及用途,否则,本站将终止提供任何服务! Powered by Discuz! Licensed