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

2019.09.05 富阳企业网站建设

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

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

<按钮>提交< /按钮>

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