元素拷贝器

1. 使用场景

SnappySnippetEx是一个chrome插件，可轻松提出网页中元素的 HTML 和 CSS。如果使用者需要借鉴某个页面的某个元素，那么就可以使用元素拷贝器把那个元素的 HTML 和 CSS复制到wide中供我们使用。

元素拷贝器在拷贝时可以把图片也拷贝过来，使用者只需要保存发布即可。无需下载图片，这个过程是全自动的。如果没有看到图片，说明发布时使用者没有勾选“同时发布静态资源”。只有在拷贝的图片资源受到限制时，图片发布会失败，此时才需要手动拷贝（可参考图像基础）。

2. 安装

安装步骤请查看安装chrome插件。

3. 使用

首先使用chrome浏览器打开你想要模仿的网页，这里以百度首页为例。在页面中找到你需要的部分，在上面右键，点击检查。假设我需要下图中红框内的部分。

将鼠标放在红框的部分内，右键单击检查。

出现页面的代码部分，在下图红框1中鼠标移到标签元素上，在页面会出现对应元素区域。使用者使用鼠标找到所需元素后单击选中这行代码，然后单击下图红框2中的SnappySnippetEx。

会出现如下图所示页面，先为ID添加前缀,之后点击拷贝审查选中的元素;

在下面的三个框内就会出现所选元素代码，代码包括html代码和CSS代码。如下图所示：

其中最上面的HTML框内是选中元素的html代码和css代码（图中红色框1内），下面的html框和css框（图中红色框2内）是单独的html代码和css代码。将上面红色框内的html代码复制，进入页面编辑界面，然后点击编辑按钮（这里要点击灰色编辑按钮而不是黄色的编辑按钮）。如下图：

注意：使用单独的html代码和css代码可以复用代码，但是可能会出现与原有页面不同的问题，需要使用者调整，如果使用者不需要大规模使用本元素，那么请使用合在一起的html代码和css代码（上图中的1)。

直接在页面复制(ctrl+v)，即可在当前光标处插入复制后的元素（复制一次，插入一份，可多次插入），这里复制的元素会保持外观一致，但是逻辑消失了，需要自行配置其逻辑。如果出来的是源码，请确认页面编辑界面设置中禁止粘帖时格式转化没有被勾选。如下图：

由于此次借鉴的图片被网站做了限制，使用者需要手动拷贝图片。最后，发布页面，效果如下图：