怎么样仿写已知网址的网页？

Posted 2020-10-02 李家大少爷

今天上午在实验室里学习，无意中看到湖北老乡群里爆出了一则外包的消息。

是问有没有回搭建网站。我接了这单活儿。需求很简单，仿照这一个已知的网站做一个静态页面。

工作量不大。他说了，做一个静态网站。因为之前，我曾做过类似的工作，所以我就答应了。

遇到的第一个问题就是评价。他让我开个价。说实话，我当时也蒙了。这个外包估价这个事情，我之前也没做过。在网上搜了下，每个人说法都不一样。看到一个我觉得可以参考的回答。按照做的页面收费。

每个30~50。于是我给他报价是500，理由就是 大概做10个左右的页面，每个50。他答应了。第一次估价的经历就这样结束了。我觉得还好。整个事情的工作量不是很大。

 

好，回到今天的主题。怎么仿写已知网址的网页。

我要走的第一步工作就是把已知的网址 www.sorbushouseware.com

打开浏览器的调试模式，查看网页的html代码。

 也就是说把显示这个网页的相关代码，包括需要的html, css, javascript, font, images 全部搞到你的项目中，就能显示这个效果。

在操作的过程中，对每个文件进行“右键-》另存为-》确定”即可。在操作的过程中，注意文件目录的一致性。

对于像图片文件没有另存为选项的，我们可以访问这个图片文件的url，通过保存图片来获取图片资源。

 

最后获取的结果下所示

最后在浏览器的效果跟原网址的效果100%的一致。

 

 

 

至此，就完成了已知网址的页面仿写。怎么样，有没有觉得很好玩呢? 你也可以去尝试着仿写着www.baidu.com 的网页哦。

 

 

----------------------------------------------------------------------------

虽然说功能是实现了，但是我们要搞清楚它的原理。

其实每个网页在浏览器的呈现都是以网页形式的。既然是网页，就要了解网页的构成。除了从代码层面上知道header body外。我们还得知道这个网页引用了哪些文件，加载了哪些图片，加载顺序是什么。所谓的动态网页，要搞懂这些，我们就要搞清楚在浏览器加载网页的原理和过程。当然了，这也不是我一句两句话可以解释清楚的。但我总结的一句就是可以通过浏览器的调试模式开来清网页加载的过程。