使用chrome查看网页上效果的实现方式

  chrome是一个极为强大的工具,很多时候,我们不知道一个效果怎么实现的,我们完全可以找到响应的网页,然后找到其html文件,和js文件,查看源码,获得其实现方式。

  下面举例说明:

 1. 我想知道下面这一部分的HTML代码:

可以直接打开开发者工具,点击箭头后,选中该部分,则会自动定位到element中的相应元素。

  2.我想知道这一部分的ajax实现,那么我可以直接通过猜测(准确率不是很高哈,要多试试~),找到HTML中引入的JS代码,在source资源中通过ctrl+P进行搜索文件。进入该文件后,再通过ctrl+F输入关键字如input或者password等进行搜寻。即可实现。如下图:

由此即可得到我们希望得到的代码。

时间: 2024-10-13 20:49:46

使用chrome查看网页上效果的实现方式的相关文章

网页上弹出pop窗口实例,(document).height()与$(window).height()的区别

#dvbg{background-color:#666666; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}        #dvpop{position:absolute;display:none;width:auto; height:auto; z-in

webview 获取网页上的数据

最近做webview,遇到2种需求,一种是在自己服务器上的HTML中获取数据,另一种是通过自己服务器上的HTML中的超链接跳到另一个站点的HTML中,并获取数据. 于是,总结了2种通过webview获取网页上的数据的方式: 第一种:简单点的,直接通过js调java,在调用方法的过程中将数据通过方法的参数传递给Android端,(前提:服务端有对应的faxun对象,而且调用的方法是showImages(String[] imgUrls)). <span style="font-size:18

网页上的倒计时效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>jquery数字倒计时代码</title&

django之创建第一个项目并查看网页效果

1.c盘下创建djangoweb文件夹 Microsoft Windows [版本 6.1.7601]版权所有 (c) 2009 Microsoft Corporation.保留所有权利. 2.C:\Users\Administrator>cd c:\\python273.c:\Python27>cd c:\\djangoweb #切换到djangoweb目录下之后创建项目4.c:\djangoweb>django-admin.py startproject helloworld #切换

JS让网页上文字出现键盘打字的打字效果

一个挺简单的网页特效:JS让网页上文字出现键盘打字的打字效果实现 演示地址:http://codepen.io/guihailiuli/pen/jPOYMZ 以代码形式实现过程分析: <html> <head> <title>打字效果</title> <meta http-equiv="Content-Type" Content="text/html;charset=gb2312" /> <style

CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 3.在一个非浮动元素<div>中存在一个浮动元素,当浮动元素高于元素本身的时候,内容就会溢出<div>中,解决方案如下: A:在</div>介绍之前添加一个换行,并且添加一个类<br class=”clear”/>,之后创建一个样式br.class{clear

前端菜鸡之路——网页上的图标

如何在页面上放置我们需要的图标,这个问题从我学习前端以来便一直伴随着我,从开始的全部用img标签来放图标到之后的用雪碧图,用字体,但是再多的方法也要懂得如何在不同的情形下去使用这些方法.所以刚在加班中过完圣诞的我坐在了电脑前,想要对这些熟悉而又陌生的东西进行整理和总结. 首先是从img标签说起,当我第一次切图时便和它邂逅,当时觉得好神奇,给它一个路径居然可以找到我想要的图片,并且展示出来,功能有点类似于快递员,于是我开始频繁的收各种快递,用到图片的地方都选择使用它.虽然这么做并不算错,但很显然不

CSS系列(4)-如何使用Firebug查看网页的html和css

Firebug是火狐浏览器Firefox的一个插件,专门为开发人员开发的.使用Firebug需要先在Firefox中安装这个插件,网上有很多教程,可以对照着安装一下. 不同的火狐浏览器版本中的Firebug可能有些差别,不过大致相同.我使用的是火狐31.0版本. 使用Firebug查看百度的菜单. 1,百度首页改版了,变得更简洁了,通过百度首页,打开左上角[更多产品]中的[全部产品] 2,打开之后,可以看到百度的菜单如下图, 网址为:http://www.baidu.com/more/ 3,按一

网页上传到服务器后访问时出现怪异模式(Quirks mode)

1.更多内容请参考:http://blog.csdn.net/freshlover/article/details/11616563 http://blog.csdn.net/barebear/article/details/5100260 2.当使用jsp+tomcat+mysql开发时,将tomcat上传到服务器后,使用360浏览器通过ip访问网站时,本来很好的网站样式会变得混乱,导航栏,图片,特别是盒模型会有很大的变化.使用360的工具->开发人员工具.查看网页文档模式时,发现使用的是Qi