Копирование всего гаджета веб-сайта

Question

Я новичок в веб-дизайне, поэтому я хотел узнать больше, посмотрев другие веб-сайты и используя их методы. Теперь я использую платформу для блогов и хочу скопировать весь гаджет из другого блога http://gmailblog.blogspot.com/. Я пытаюсь скопировать правильный плавающий гаджет боковой панели в блог.

Для этого, я думаю, мне придется скопировать коды CSS, html-коды и javascript, если они используются. Есть ли простой способ найти все эти коды и скопировать их в мои? Я попытался использовать функцию проверки элемента google chrome, но не увенчался успехом.

Любая помощь?

Answer 1

Элементы осмотра, вероятно, ваш лучший способ пойти, но для этого вам понадобится достойное понимание CSS и HTML. Включение и выключение стилей, чтобы увидеть, что происходит, - это хороший способ начать возиться с существующими решениями.

Когда речь заходит об отдельных частях JavaScript, инструменты инспекции, вероятно, не заставят вас так далеко.

Для более глубокой интроспекции вы всегда можете сохранить локальную копию всей веб-страницы, удалить биты и куски и посмотреть, в каких точках функция ломается; сохраняйте то, что кажется необходимым, и продолжайте, пока вы, кажется, не разделите сайт до минимума, чтобы ваша функция работала. Оттуда вы можете перейти, чтобы узнать, можете ли вы понять, что делают другие части оставшегося кода.

Для вашего конкретного гаджет, некоторые ключевые аспекты включают в себя:

• #gadget-dock имеет стиль position: fixed, который держит позицию элемента в месте, как прокрутка вверх и вниз страница.
• #gadget-dock имеет стиль right: -40px, который сохраняет элемент полностью, но вне поля зрения, по умолчанию.
• #gadget-dock:hover имеет стиль right: 0, который переопределяет вышеупомянутый стиль и перемещает элемент в поле зрения при наведении курсора.
• #gadget-dock также имеет много CSS3 переходы, которые определяют скользящие движения, возникающие при переходе из одного положения в другое (т. Е. Когда изменяется значение для right).