利用浏览器审查元素功能定位代码

在上一篇文章中讨论了如何为图片添加投影效果

可是有些博主可能没有读过主题的代码,不知道在哪里修改 CSS。没有关系,我们可以利用浏览器强大的审查功能定位到相应的代码,修改并预览。

现在最火热的浏览器是 IE,Chrome,Firefox,Opera,Safari。就个人感觉而言,我认为对于代码解释严谨性最好的是 Firefox 浏览器,以下是在 Firefox 中审查的方法。

为 Google 搜索框添加 box-shadow 属性

首先打开 Google,在输入框中右键点击查看元素。

利用浏览器审查元素功能定位代码

利用浏览器审查元素功能定位代码

之后在右侧的 CSS 中双击某一行编辑,就可以即时预览了。

这里为 Google 添加 box-shadow 属性:

利用浏览器审查元素功能定位代码

这样就可以预览了。

利用浏览器审查元素功能定位代码

利用 Firefox 审查元素查找 WordPress 相应的 CSS 文件

用同样的方法审查网站内任意的图片:

利用浏览器审查元素功能定位代码

为其添加一条 box-shadow 属性,调整到合适的样式,就可以去主题目录下修改了~

具体的文件也会在审查元素面板中 Class 右侧显示,雨人博客是 style.css 中的 1124 行~

如果我的文章对您有帮助,请我喝杯咖啡吧~

支付宝转账打赏⬆️

微信钱包转账打赏⬆️

目前评论:1   其中:访客  1   博主  0

  1. 韩国时尚购物起义 0

    有眼光的人处处有眼光。

评论加载中...

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen: