复制网站的整个小工具

时间:2012-03-02 14:18:01

标签: javascript html css blogger

我是网页设计的新手,所以我想通过查看其他网站并使用他们的技术来了解更多信息。现在我正在使用博客平台,并希望从另一个博客http://gmailblog.blogspot.com/复制整个小工具。我正在尝试通过博客复制正确的浮动侧边栏小工具。

为此,我想我必须复制CSS代码,html代码和javascript(如果使用的话)。有没有一种简单的方法可以找到所有这些代码并将其复制到我的代码中?我确实尝试使用谷歌浏览器的inspect元素功能,但没有成功。

任何帮助?

1 个答案:

答案 0 :(得分:1)

检查元素可能是您最好的方法,但是需要对CSS和HTML进行适当的掌握才能开始。打开和关闭样式以查看发生的情况是开始探索现有解决方案的好方法。

当谈到功能的JavaScript部分时,检查工具可能无法让你到目前为止。

对于更深入的内省,您可以随时保存整个网页的本地副本,删除碎片,并查看该功能在哪些点上断开;保留似乎需要的东西,并继续,直到你似乎已将网站剥离到最低限度,以保持您的功能正常工作。从那里,您可以继续查看是否可以理解剩余代码的不同部分。

对于您的特定小工具,一些关键方面包括:

  • #gadget-dock具有样式position: fixed,可在用户向上和向下滚动页面时保持元素的位置。
  • #gadget-dock具有样式right: -40px,默认情况下会将元素保持在视线之外。
  • #gadget-dock:hover的样式right: 0会覆盖上述样式,并在悬停时将元素移动到视线中。
  • #gadget-dock还有很多CSS3 过渡,用于定义从一个位置更改为另一个位置时出现的滑动动作(即right的值更改时)