css抄页面,如何照抄别人家的网页

开发中会遇到领导指着一个网页说，这个不错，咱们页面也按这个布局和风格做吧。直接用html+css+js生写还是挺费工的。最快的方法是直接照抄网页。本文例子不需要其它工具，只用浏览器的“另存页面为”和“查看页面源代码”两个功能来照抄网页，结果证明，不考虑js功能，仅看网页外观，是完全可以做出一模一样的网页的。

以下面网页为例，布局简单，但是要自己从头开始写，肯定要调试很久。

网页上鼠标右键，查看页面源代码

浏览器的新标签中会打开一个完整的html文件，

复制html全部内容到testindex.html，这个文件就是我们网页的主页面。将红框中引入的css文件和js文件的目录去掉../../是为了我们建立目录方便，改完后只需要在testindex.html同级目录下建立common目录，避免到testindex.html所在目录的外面建立目录。

页面源代码页面点击js和css文件名称，会在新标签页打开js文件，如下图。如果复制js css文件内容到对应文件，有些乱码会影响最终显示，我试验是失败了。

要获得需要的js和css文件用“另存页面为”可以得到

箭头指向的文件夹内有testindex.html需要的全部js和css

在testindex.html目录下建立js和css需要的目录，将对应文件拷贝进去

然后用浏览器打开testindex.html

发现中文部分是乱码，用UltraEdit对文件进行转换

转换完重新打开，中文显示正常了。弹窗是因为js和后台服务交互的问题，我们只抄外观，所以这个问题不用处理，后期把js文件对应动作注释即可。

现在还差图片无法显示，Login.css里配置了图片的相对位置，

通过相对位置可以猜测图片url，浏览器打开url

下载图片放到目录里，同时修改css中图片的目录为url("img/frame/banner.jpg")，

刷新浏览器，看到图片也成功加载上了。其它图片也都同样处理

总结，只用浏览器的“页面另存为”和“查看页面源代码”两个功能可以实现照抄网页外观的目的，是否对所有网页都可行我也不清楚。使用页面另存为就可以保存页面的大部分元素，但是文件的目录结构会很混乱，主文件里面会有乱码表示的目录位置，不利于后续维护和管理。所以建议主文件还是直接复制的页面源代码，图片、css、 js文件位置也自己手动设置，这样项目结构合理清晰，后续维护也方便。

图片其实不用下载，我们的网页不可能用人家的原图，自己做好图片放到正确的目录下，页面会展示我们自己的图。

js文件涉及和后台服务的交互，我们只需要模仿外观，可以把引入的js文件都注释掉。

举报/反馈

css抄页面,如何照抄别人家的网页相关推荐

html+css静态页面还原拼多多网页
html+css静态页面还原代码 <!DOCTYPE html> <html lang="zh"> <head> &l ...
css抄页面,如何正确的抄网页
box model 为了加一个新功能,抄了部分页面顺带一大坨 css 代码,结果原有部分页面样式就乱掉了.罪魁祸首就是两者的盒模型不同(如上图),其中 W3C 模型也被成为 standards mod ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~...
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
HTML网页设计制作大作业(div+css) ~中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化)
HTML网页设计制作大作业(div+css) ~ 中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面)
web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
HTML奥运网页5页面文化 ~ 体育学生网页设计作业 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计
HTML奥运网页5页面文化 ~ 体育学生网页设计作业 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计临近期末, 你还在为HTML网页设计结 ...
HTML5期末大作业：节日网站设计——中国传统节日-春节(8个页面) HTML+CSS+JavaScript 中国传统节日春节网页HTML代码学生网页课程设计期末作业下载春节大学生网页设计制作成
HTML5期末大作业:节日网站设计--中国传统节日-春节(8个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
web前端期末大作业 HTML+CSS+JavaScript仿唯品会购物商城网页设计实例企业网站制作
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...

css抄页面,如何照抄别人家的网页

css抄页面,如何照抄别人家的网页相关推荐

最新文章

热门文章