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

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

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

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

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

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

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

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

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

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

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

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

最后获取的结果下所示

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

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

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

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

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

时间: 2024-08-05 03:23:57

怎么样仿写已知网址的网页?的相关文章

HTML: 仿写一个财经类静态的网页

要求:仿写一个静态的网页,主要采用HTML+CSS+DIV的布局方式, 新建两个文件:demo.html.demo.css 图片素材:image.zip demo.html代码如下: <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="description" content="t

用js写已知abc+cba = 1333,其中a、b、c均为一位数,编程求出满足条件的a、b、c所有组合。

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 28.0px Consolas; color: #888471 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 28.0px Consolas; color: #888471; min-height: 33.0px } span.Apple-tab-span { white-space: pre } <!--<script type="text/

仿写一个简单的网站,以及初学前端的一点感悟

本文同时发布在本人个人博客上www.yaoxiaowen.com 这段时间在学习前端,并仿着我们公司官网的设计 tongshai.net, 把官网重新实现了一遍. 主要是因为我们公司的官网设计很简单(就几个静态页面,连什么控件都没用),很适合作为练手项目, 模仿的工程放在了我的另一个测试服务器上. 点击查看. 在仿写过程中,因为网页很简单,所以也没有碰到过什么很纠结的技术问题.仿写一下也就是熟悉一下相关概念. 但是按照我的前端同事的建议,使用了bootstrap 框架,快速浏览了一下这个框架的教

JAVA-集合作业-已知有十六支男子足球队参加2008 北京奥运会。写一个程序,把这16 支球队随机分为4 个组。采用List集合和随机数

第二题 已知有十六支男子足球队参加2008 北京奥运会.写一个程序,把这16 支球队随机分为4 个组.采用List集合和随机数 2008 北京奥运会男足参赛国家: 科特迪瓦,阿根廷,澳大利亚,塞尔维亚,荷兰,尼日利亚.日本,美国,中国,新西 兰,巴西,比利时,韩国,喀麦隆,洪都拉斯,意大利 package Test03; import java.util.ArrayList; import java.util.List; import java.util.Random; public class

页面布局 假设高度已知,写出三栏布局,左右栏定宽,中间自适应。

*{margin: 0;padding: 0} //Reset(重置)浏览器默认样式[利:可以简单方便的一次性重置所有HTML网页元素的浏览器样式,代码少,控制量大.--弊:因为它重置了所有元素的样式,包括不需要重置的样式,例如table ,我们不需要去重置table元素的样式,所以还需要再为 table 设置默认样式,反而增加了代码量] div{height: 100px} //高度已知,定高100px; 第一种 浮动写法 <h3>第一种 浮动写法</h3> <div cl

网页元素居中攻略记_(3)已知宽高元素水平垂直居中

已知宽高元素水平垂直居中 方案 使用了position的absolute属来实现,在上篇文章的垂直居中的基础上加上水平居中 代码 index.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>已知宽高元素水平垂直居中</title> <style> #container { posit

知乎首页的简单仿写

HTML(5)+CSS(3).静态页面仿写 Github链接:https://github.com/nebulium/ZhiHu 大概布局如下,在此布局基础上进一步处理. 切图:图片非高清,不过是非重点.在设计的时候使用到的chrome插件:屏幕尺子(page ruler)和color zilla取色工具. 布局总结:header为position:fixed,且z-index较大.mancolumn和sidebar部分考虑到并不会自适应,设置为position:absolute,这里注意统一用

OSX 10.11 Developer Beta 1的已知问题列表

OSX 10.11 Developer Beta 1的已知问题列表如下,如有你无法忍受的,请不要测试. 应用程序如需要向系统位置写文件的,在10.11下将无法工作.意味着大量需要调正系统.安装驱动的软件都需要重新升级.从10.7或更早系统升级是不推荐的.无法从WINDOWS迁移.AirPlay:可能无法正常与AppleTV连接.Aperture:无法导入RAW文件:workspace会经常性的消失(可从dock点回):部分SONY RAW无法显示:部分对话框无法显示导致程序卡死(需要强制对出并重

仿写抖音旋转汉字时钟

一直对抖音上的各种人脸处理算法很感兴趣,个别的我觉得目前的水平我能写个简单的实现方式,但是涉及复杂的,还是太菜了.但是之前在抖音上看到了一个用网页写的旋转汉字时钟的视频,感觉很好玩,而且我觉着写出来完全没问题,就用Pygame 和之前实现的旋转立方体的底层代码实现了一下.原视频地址找不到了,只有个模糊的印象,所以就跟着感觉走了.最终实现的东西,需要运算量较大,而且速度很慢.所以我若是有时间了,我会移植为C或者C++语言再看看.因为我的代码都是由之前的C语言改来的,所以改回去不会很难,只有麻烦不麻