富阳企业网站建设:从网站复制代码与SnappySnippet

2019.09.05 富阳企业网站建设

90

作为富阳企业网站建设web开发人员,我们可以偶尔找到一些鼓舞人心的元素在一个网站,让你想知道他们是如何建造东西。 然后,你想复制的代码。 Chrome Devtools 以及Firefox的Firebug实际上附带的功能,使它容易复制HTML和CSS网站。

然而, 这些工具的工作 只复制HTML和CSS; 你不能使用这些工具复制你选定的CSS和HTML元素。 例如,假设你选择一个HTML元素包含两个子元素,如下所示。

1
2
3.
4
<div 类=“容器”>
  <按钮>提交< /按钮>
  <p><跨度>通过提交你同意我们的条款和条件< /跨度>p>
div>

其中的每个元素都有自己的特定的样式规则驻留在样式表中。 一些HTML元素可能继承了几个样式规则,这将使 一起复制HTML和CSS棘手 。 在这里你会爱一个像SnappySnippets工具。

推荐阅读: 40个有用的Google Chrome扩展网页设计师

开始

SnappySnippet 是一个Chrome扩展(明白了吗 在这里 ),安装完成后,会给你一个新标签页在Google Chrome DevTools SnappySnippet命名。 这就是我们将SnappySnippet运作。

测试一下,我们准备了一个web页面包含一些HTML元素形成一个很好的简单 网络登录表单 。 每一个HTML元素继承CSS代码。 以传统的方式复制所有这些代码从浏览器DevTools使用正常功能,将需要一些工作。

富阳企业网站建设


不过,与SnappySnippet一切都简单多了。

首先,选择你想要哪个元素复制,然后打开SnappySnippet选项卡并单击 从检查元素创建一个片段 按钮。

你可以在下面的截图中看到,我们选择复制的元素包括内部的子元素,并将行的 超文本标记语言 在左边窗格中。 所有这些HTML元素的样式规则形状也复制和放置在CSS中。

的设置

SnappySnippet允许我们设置代码的输出。 下的两个窗格用于将HTML和CSS,你会发现的 设置 面板。 你可以设置一些东西,如删除的CSS属性 webkit - 前缀的输出,插入ID给HTML元素的前缀,等等。

代码共享

Web开发人员可能熟悉代码共享平台 Codepen 。 这个网站允许web开发人员 分享工作的代码片段。 它就像一个社交网站,而是共享状态和selfies,我们共享代码。 SnappySnippet一样,您可以将代码复制到 Codepen , JSFiddle ,JSBin。

发送代码,确保您已经登录到各自的网站,你要把你的代码。 这也是确保代码将立即被保存到acccount。 然后点击这三个分享按钮之一。

你复制的代码将返回在网站上你看到的完全一样。

最后认为

SnappySnippet是一个非常方便的工具,但记得复制代码 不使用这是剽窃其他富阳网站开发人员的代码 。 无论你做复制,目的为学习目的,希望从技术学习新东西。 明目张胆的抄袭是不可容忍的,不管它是否受版权保护。 做好使用这个工具。


联系电话 400-6065-301

留言