有没有剪裁一个网页的某个部分的html及对应的css的办法 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

有没有剪裁一个网页的某个部分的html及对应的css的办法

2016-06-20 18:41:00 1577 1

有时看一些网站的显示效果不错,想把组件加到自己的网站中,假如直接点开审查元素复制html的话没法把对应的css规则复制出来,假如直接保存,css文件10几个也不好查

取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:44:28

    现在有很多不错的代码片段管理软件,也有不少线上的代码片段管理,楼主可以尝试着借助浏览器(推荐chrome)自带的开发人员工具,来实现代码片段的提取。网页上的模块本身就是有3-4块构成的:html、css、javascript和images等。所以,一键搞定还不现实。

    1.拷贝HTML:打开开发人员工具后,在html结构树种可以折叠代码,同时也可以复制某个标签,操作是和常规的代码编辑器一样的。
    2.匹配样式:在右侧有对应的css,可以点击属性名右侧的链接,打开源文件,进而进行整块样式的复制操作,如果其样式是压缩过的,你需要把它的样式全部复制下来,然后使用在线工具或本地代码工具进行美化排版,然后再搜索片段。
    3.脚本:如果是单个的脚本好说,直接拷贝下来应该没问题,但要注意其代码的上下文关系。如果是经过压缩的脚本,你还是需要拷贝下来进行美化排版,然后根据个人的理解适当的添加注释。如果是经过混淆编译的,你可能无法还原脚本的原始内容,此时,你要么自己参考着实现一个,要么就乖乖用人家的代码。
    整个过程中,你其实也相当于整理了一份源码或者一个小插件,过程还是很繁琐的。

    我常用php来做一些小的插件调用,就是新建一个目录,然后创建对应的html、css和js文件,最后在页面上使用3个include来【嵌入】到页面上,最终效果就是上面是html,然后是css,最底下是对应的js。

    说起来,就是【down】人家的代码,从学习、工作和个人技能提升上讲,我个人是不建议的,有些东西,你要知其然知其所以然,与其花时间“偷”代码,反不如花时间研究他的实现方法和策略。

    0 0
相关问答

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 58092浏览量 回答数 19

43

回答

什么是云主机,云服务器与vps有什么区别?

zhuangdengyun 2011-11-01 04:21:50 51770浏览量 回答数 43

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 47876浏览量 回答数 19

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 148352浏览量 回答数 31

15

回答

网页挂马及暗链检测

yundun1 2012-02-24 17:40:01 47950浏览量 回答数 15

251

回答

阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

云代维 2014-02-14 15:26:06 310644浏览量 回答数 251

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 81887浏览量 回答数 13

21

回答

【Java学习全家桶】1460道Java热门问题,阿里百位技术专家答疑解惑

管理贝贝 2018-05-31 13:57:45 50097浏览量 回答数 21

46

回答

H5技术百问——不懂H5你就OUT啦

yq传送门 2017-09-09 11:03:04 48575浏览量 回答数 46

3

回答

Nginx—owncloud安装记事

寒喵 2014-06-07 23:24:41 49821浏览量 回答数 3
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载