復制網站的整個小工具

Question

我是Web設計的新手，所以我想通過查看其他網站並使用他們的技術來學習更多。 現在，我目前正在使用博客平台，並希望從另一個博客http://gmailblog.blogspot.com/復制整個小工具。 我正在嘗試通過博客將右側的浮動側邊欄小工具復制到。

為此，我認為如果使用CSS代碼，html代碼和javascript，則必須將其復制。 是否有找到所有這些代碼並將其復制到我的簡單方法？ 我確實嘗試過使用Google Chrome瀏覽器的inspect元素功能，但未成功。

有什么幫助嗎？

Answer 1

檢查元素可能是您最好的方法，但是要使您開始對此有所了解，需要對CSS和HTML有一定的了解。 切換樣式以查看發生了什么是開始研究現有解決方案的好方法。

當涉及到功能的JavaScript部分時，檢查工具可能無法幫助您。

為了進行更深入的自省，您始終可以保存整個網頁的本地副本，刪除零碎的片段，然后查看功能中斷的時間； 保留似乎需要的內容，然后繼續進行，直到您似乎已將網站剝離到最低限度以保持功能正常運行為止。 從那里可以繼續看是否可以理解其余代碼的不同部分的功能。

對於您的特定小工具，一些關鍵方面包括：

• #gadget-dock具有樣式position: fixed ，可在用戶上下滾動頁面時將元素的位置保持在適當的位置。
• #gadget-dock的樣式right: -40px ，默認情況下使元素幾乎不可見。
• #gadget-dock:hover的樣式right: 0 ，它會覆蓋上述樣式，並將元素懸停在視線范圍內。
• #gadget-dock還具有許多CSS3 過渡 ，這些過渡定義了從一個位置更改為另一位置時（即，當right的值更改時）出現的滑動運動。