首页 > 电脑专区 > 电脑教程 >

谷歌浏览器审查元素的妙用

来源:互联网 2023-02-21 23:58:31 136

谷歌浏览器审查元素功能,对于前台和后台开发人员有很多帮助,下面我将列举出妙用,方便用户的开发和使用BiV办公区 - 实用经验教程分享!

谷歌浏览器审查元素的妙用BiV办公区 - 实用经验教程分享!

工具/原料

  • 电脑PC

方法/步骤

  • 1

    首先进入到一个网页,如“百度经验”首页,会发现页面布局很好看,作为前端开发人员,想了解页面的div分布和模仿,那么请按“F12”进入审查元素框BiV办公区 - 实用经验教程分享!

    谷歌浏览器审查元素的妙用BiV办公区 - 实用经验教程分享!

    谷歌浏览器审查元素的妙用BiV办公区 - 实用经验教程分享!

  • 2

    比如您想看右上角那个“分享让生活更美好”的div是如何实现的,点击鼠标右键,选择“审查元素”,那么在页面下面将出现该div的html代码,在其右侧是css样式代码BiV办公区 - 实用经验教程分享!

    谷歌浏览器审查元素的妙用BiV办公区 - 实用经验教程分享!

  • 3

    您想要模仿写页面,总不能代码一行一行敲,那么您可以在下图蓝色选择的一行代码右键,选择copy,则复制下这个div的代码啦,在获得html代码的同时,不要忘记右侧的css,顺便copy下来吧BiV办公区 - 实用经验教程分享!

    谷歌浏览器审查元素的妙用BiV办公区 - 实用经验教程分享!

  • 4

    是不是觉得审查元素窗口好小,想放大,那么点击下图中类似屏幕的小图标吧,您将使得改窗口变成chrome的独立窗口,同样,再点击下这个图片,又会回到原先的嵌入式窗口模式了BiV办公区 - 实用经验教程分享!

    谷歌浏览器审查元素的妙用BiV办公区 - 实用经验教程分享!

  • 5

    那么,对于手机页面的开发,我们如何在pc上实现呢?点击 “Emulation",如果您想选择手机型号,则可以”select model“BiV办公区 - 实用经验教程分享!

    谷歌浏览器审查元素的妙用BiV办公区 - 实用经验教程分享!

  • 5该信息非法爬取自百度经验
  • 6

    console平台的妙用,在其中,您可以调试DOM元素和页面解析错误显示等等。BiV办公区 - 实用经验教程分享!

    谷歌浏览器审查元素的妙用BiV办公区 - 实用经验教程分享!

  • 注意事项

    • 可能不是很全面,不过我也在学习中,更多的会在以后分享

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!BiV办公区 - 实用经验教程分享!


    标签: 浏览器浏览审查

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码