下载整个网页的方法,包括样式、图片、和js

扒别人网站,不一定是要干邪恶的事(当然也有干的)。有时候我们看到别人网站的功能很酷,想要自己试着实现一下。我们就需要扒一下这个页面,一方面可以线下修改学习,另一方面不会浪费时间在设计页面上,可以更关心功能的实现。

chrome有一个插件,叫做downfaster可以下载页面的js、样式和图片,不过你在伟大的共产主义国度下,估计是访问不了chrome的应用商店了,就算访问的了,估计也安装不成功。这里提供个下载地址https://clients2.google.com/service/update2/crx?response=redirect&x=id%3Ddcloeafkedgmoodilkgbjbdfbieoiiab%26uc 

注意要在非chrome下打开这个链接,不然就下载不了了。如果你想知道我怎么得到这个链接的,看这里

下载之后,把它拉到chrome的扩展安装页面。

这个插件有一个问题是没有办法下载css里使用的图片,我一般这样做,使用Firefox,别说你做web没有使用Firefox。

然后:

1、右击

2、查看页面信息

3、选择媒体

4、全选,另存为。

 

转载于:https://www.cnblogs.com/mengzhongshi/p/3595824.html

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用以下步骤来生成可以插入图片点击图片能够放大的网页表格: 1. 创建一个HTML文件,并在文件中包含一个表格。 2. 在表格中为每个单元格创建一个<img>标记。 3. 为每个<img>标记设置一个点击事件,当用户点击图像时,会触发一个JavaScript函数。 4. 在JavaScript函数中,创建一个<div>标记来显示放大后的图片。 5. 设置<div>标记的CSS样式,使其覆盖整个屏幕并且透明度为50%。 6. 在<div>标记中插入一个<img>标记,该标记包含用户点击的原始图像的大尺寸版本。 7. 设置<img>标记的CSS样式,使其位于屏幕中央并具有较大的尺寸。 8. 当用户点击放大的图像时,隐藏<div>标记,使放大的图像消失。 以下是示例代码: HTML文件: ```html <!DOCTYPE html> <html> <head> <title>可点击放大的表格</title> <style> table { border-collapse: collapse; } td { border: 1px solid black; padding: 10px; text-align: center; } img { max-width: 100%; max-height: 100%; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; } .overlay img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 90%; border: 5px solid white; box-shadow: 0 0 10px black; } </style> </head> <body> <table> <tr> <td><img src="image1.jpg" onclick="showImage('image1-large.jpg')"></td> <td><img src="image2.jpg" onclick="showImage('image2-large.jpg')"></td> <td><img src="image3.jpg" onclick="showImage('image3-large.jpg')"></td> </tr> <tr> <td><img src="image4.jpg" onclick="showImage('image4-large.jpg')"></td> <td><img src="image5.jpg" onclick="showImage('image5-large.jpg')"></td> <td><img src="image6.jpg" onclick="showImage('image6-large.jpg')"></td> </tr> </table> <div class="overlay" onclick="hideImage()"> <img id="overlay-image"> </div> <script> function showImage(src) { var overlay = document.querySelector('.overlay'); var image = document.querySelector('#overlay-image'); image.src = src; overlay.style.display = 'block'; } function hideImage() { var overlay = document.querySelector('.overlay'); overlay.style.display = 'none'; } </script> </body> </html> ``` 在上面的代码中,我们首先定义了一个表格,其中包含六个单元格,每个单元格都包含一个<img>标记。当用户点击图像时,会调用showImage函数。 showImage函数创建一个<div>标记,并在其中插入一个<img>标记,该标记包含用户点击的原始图像的大尺寸版本。然后,我们设置<div>标记的CSS样式,使其覆盖整个屏幕并且透明度为50%。最后,我们将<div>标记的display属性设置为“block”,以使其显示在屏幕上。 hideImage函数则将<div>标记的display属性设置为“none”,以隐藏放大的图像。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值