複製網站的整個小工具

Question

我是網頁設計新手，所以我想通過查看其他網站和使用他們的技術來了解更多。現在我正在使用博客平臺，並希望從另一個博客http://gmailblog.blogspot.com/複製整個小工具。我正在嘗試將正確的浮動邊欄小工具複製到博客。

爲此，我想我將不得不復制CSS代碼，html代碼和JavaScript（如果使用的話）。有沒有簡單的方法來找到所有這些代碼並將其複製到我的？我曾嘗試使用谷歌瀏覽器的檢查元素功能，但不成功。

任何幫助？

Answer 1

檢查元素可能是您最好的選擇，但需要對CSS和HTML進行恰當的掌握才能讓您着手開始。開啓或關閉樣式以查看發生的情況是啓動現有解決方案的好方法。

當談到功能的JavaScript部分時，檢測工具可能不會讓你感覺如此遙遠。

爲了更深入的反思，您可以隨時保存整個網頁的本地副本，刪除碎片，並查看該功能在哪些點中斷;保留好似需要的東西，然後繼續操作，直到您似乎已將網站剝離到最低限度以保持您的功能正常工作。從那裏你可以繼續看看你是否能夠理解剩餘代碼的不同部分。

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

• #gadget-dock有保留元素的位置在地方作爲用戶向上和向下滾動頁面的樣式position: fixed。
• #gadget-dock的風格right: -40px默認情況下，該元素保持元素幾乎不可見。
• #gadget-dock:hover的樣式爲right: 0，它覆蓋上述樣式並在徘徊時將元素移動到視線內。
• #gadget-dock也有很多CSS3 轉換，它們定義了從一個位置改變到另一個位置時（即當right的值改變時）出現​​的滑動運動。