Як швидко відкрити код сторінки в браузері, навіть якщо заборонено копіювання. Розпакування та розшифровка скриптів JavaScript Як розшифрувати html код сторінки

Ця стаття – доповнення до статті про деобфускацію скриптів. Тут будуть розглянуті основні принципи шифрування та упаковки, слабкі місцязахистів, способи ручного зняття, а також універсальні інструменти для автоматичного зняття пакувальників та навісного захисту зі скриптів JavaScript. Останнім часом все частіше вихідний кодскриптів шифрується або пакується. Цим почали захоплюватися Яндекс, DLE та інші популярні проекти, а красиві байки про "турботу про користувачів", "економію трафіку" та іншу нісенітницю виглядають дуже смішно. Що ж, якщо комусь є що приховувати, то наше завдання вивести їх на чисту воду.

Почнемо з теорії. Через особливості виконання JavaScript всі шифрувальники та пакувальники, незважаючи на їх різноманітність, мають всього два варіанти алгоритму:або як варіант:Другий спосіб найчастіше використовується для захисту вихідного html-коду сторінки, а також різними троянами для впровадження в сторінку шкідливого коду, наприклад, прихованого кадру. Обидва алгоритми можуть комбінуватися, "навороченість" і заплутаність розшифровувача може бути будь-яким, незмінним залишається лише сам принцип.

В обох випадках виходить, що функцій eval()і document.write()передаються повністю розшифровані дані. Як їх перехопити? Спробуйте замінити eval()на alert(), і в MessageBox", що відкрилося, ви відразу побачите розшифрований текст. Деякі браузери дозволяють копіювати текст з MessageBox"ів, але краще скористатися таким ось напівавтоматичним декодером:

  1. < html >
  2. < head >< title >JavaScript Decoder
  3. < body >
  4. < script type = "text/javascript" >
  5. // Функція запису в лог результатів розшифровки
  6. функція decoder (str ) (
  7. document. getElementById ("decoded"). value += str + "\n";
  10. < textarea id = "decoded" style = "width:900px; height:500px;" >
  11. < script type = "text/javascript" >

Наприклад візьмемо який-небудь скрипт з Яндекса, подивившись вихідний код бачимо щось хворе:

Eval (function (p, a, c, k, e, r) (e = function (c) (return (c) c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36)));if(!
"".replace(/^/,String))(while(c--)r=k[c]||e(c);k=)];e=function()(return"\w+"); c=1);while(c--)if(k[c])
p=p.replace(new RegExp("b"+e(c)+"b","g"),k[c]);return p)("$.1e
.18=8(j)(3 k=j["6-9"]||"#6-9";3 l=j["6-L"]||".u-L";3 m=j ["6-L-17"]
||"";3 n=j["1d"]||0;$(5).2(".6-9").14("7");$(5).2(".6 -9").Z("7",8(
)(3 a=$(5).x();3 o=$(5).x();3 h=$(5).B("C");$(5).v("g -4 "); $ (5). 16 (
$(k).q());3 t=$(o).2("15");3 c=$(o).2(".b-r");3 d=$(o).2 (". b-12");
[решта така ж маячня відрізана]

Відразу скажу, що цей скрипт оброблений JavaScript Compressor, його легко впізнати за сигнатурою - характерною назвою фукнції на початку скрипту. Копіюємо вихідний текст скрипта, замінюємо перший evalна decoder, вставляємо в декодер і зберігаємо його як html-сторінку. Радіти поки що рано, в ньому прибрано всі переноси рядків і форматування коду. Як із цим боротися написано у статті про деобфускацію.

Другий приклад. Ось html-сторінка, накрита програмою HTML Protector. Це сторінка, що демонструє можливості програми, тому там задіяні всі опції: блокування виділення та копіювання тексту, заборона правої кнопки миші, захист картинок, приховування рядка стану, шифрування HTML-коду і т.д. Відкриваємо вихідний код, дивимось. У верху вже знайомий нам document.write і зашифрований скрипт. Запускаємо його через декодер, отримуємо функцію розшифрування основного вмісту:

Code (JavaScript) :

  1. hp_ok = true ;function hp_d01 (s )( ... вирізано ... o = ar . join ("" )+ os ; document . write (o )

Замінюємо в функції останній document.write на decoder і вставляємо після неї всі три зашифрованих скрипта, що залишилися:

  1. < script type = "text/javascript" >
  2. // Сюди вставити зашифрований скрипт, попередньо
  3. // замінити всі виклики eval() і document.write() на decoder().
  4. hp_ok = true ;function hp_d01 (s )( .... o = ar . join ( " " )+ os ; decoder (o );
  5. hp_d01 (unescape ("QAPKRV%22NCLEWC ....)
  6. hp_d01 (unescape ( ">QAPKRV%22NCLEWCEG? HctcQa ...
  7. hp_d01 (unescape ( ">'mf(%22`eamnmp? !DDDDDD %22v ...

Для зручності у статті скрипти наводяться не повністю, ви повинні копіювати їх повністю. Відкриваємо декодер у браузері та бачимо захисні скрипти, додані програмою, та розшифрований вихідний текст сторінки. Для зручності можна розшифровувати лише третій скрипт, який містить html-код сторінки. Ось і весь захист. Як бачите, нічого складного. Аналогічно знімаються інші захисту html-сторінок.

Від ручного розшифрування перейдемо до автоматичного. Для зняття захисту першого типу я трохи модифікував вже відомий вам скрипт Beautify Javascript і відкомпілював його в exe-файл. Він без проблем справляється з більшістю бачених мною захистів та пакувальників JavaScript.

Eval.JavaScript.Unpacker.1.1-PCL.rar (12,124 bytes)


Для складніших випадків доведеться пускати у хід важку артилерію. Це безкоштовний проект, призначений для дослідження троянів та іншого шкідливого коду. Оскільки всі програми, призначені для захисту авторського права, є шкідливими, Malzilla допоможе нам у боротьбі з ними. Качаємо (на сьогоднішній день це 1.2.0), розпаковуємо, запускаємо. Відкриваємо другу вкладку Decoder, у верхнє вікно вставляємо код зашифрованого скрипту, натискаємо кнопку Run script.



В папці eval_tempскладаються всі результати виконання функцій eval(), зокрема і проміжні. Їх можна переглянути, натиснувши на кнопку Show eval() resultsтекст відкриється в нижньому вікні. Його можна скопіювати, вставити у верхнє вікно і відразу відформатувати натисканням кнопки Format code. Крім декодера Malzilla має ще безліч інструментів та налаштувань, що дозволяють легко зняти будь-який захист зі скриптів JavaScript.



Також можна звернути увагу на ще один безкоштовний інструмент для роботи із зашифрованими скриптами - FreShow. Функцій у ньому менше, але цілком має місце бути. З офсайту можна завантажити демонстраційний ролик, який показує приклад роботи з програмою.

Як бачите, немає нічого складного у знятті захисту зі скриптів JavaScript та з html-сторінок. Ви все ще продовжуєте захищати свої погані афтарські права? Тоді ми йдемо до вас!

Під усіма красивими зображеннями, досконалою друкарнею, та чудово розміщеними закликами до дії, розташований вихідний код вашого сайту.

Щодня, цей код ваш браузер перетворює на вражаючі сторінки для ваших відвідувачів та клієнтів.

Google та інші пошукові системи «читають» цей код, щоб визначити, де ваші веб-сторінки повинні з'явитися в їх індексах для цього пошукового запиту.

Отже, дуже велике значення для пошукової оптимізації(SEO) має те, що знаходиться у вихідному коді.

Це короткий посібник, продемонструє вам, як читати вихідний код вашого сайту для того, щоб ви були впевнені, у правильності SEO і щоб навчити вас перевіряти ваші умови SEO.

Також розглянемо кілька інших ситуацій, коли знання, як переглянути та вивчити головні частини вихідного коду, допоможуть в інших маркетингових дослідженнях.

Як переглянути вихідний код.

Перший крок у перевірці вихідного коду вашого сайту, це переглянути реальний вихідний код. Будь-який веб-браузер дозволяє зробити це просто.

Нижче наведені клавіатурні команди для перегляду вихідного коду вашої веб-сторінки для PCі Mac.

  • Firefox - CTRL + U (Утримуючи натиснутою клавішу CTRL, натисніть клавішу "U") Крім того, ви можете піти в меню "Firefox", потім натисніть "Web Developer", а потім "Вихідний код сторінки".
  • Internet Explorer- CTRL + U. Або клацніть правою кнопкоюмиші та виберіть «View Source».
  • Хром - CTRL + U. Ви можете натиснути на зображення ключа з трьома горизонтальними лініями у верхньому правому кутку. Потім натисніть «Інструменти» та виберіть «View Source».
  • Опера - CTRL + U. Ви також можете клацнути правою кнопкою на веб-сторінці і вибрати "Перегляд вихідного коду сторінки."

Макінтош

  • Safari — поєднання клавіш Option+Command+U. Ви також можете клацнути правою кнопкою на веб-сторінці та виберіть «Показати Page Source».
  • Firefox — Ви можете клацнути правою кнопкою і виберіть пункт «Початковий текст» або ви можете переміщатися в меню «Сервіс», виберіть Web Developer і натисніть Page Source. Поєднання клавіш Ctrl+U.
  • Хром — Перейдіть до «Перегляду», потім натисніть «розробник», а потім «View Source». Ви також можете клацнути правою кнопкою та вибрати пункт «Перегляд вихідного коду сторінки». Поєднання клавіш Option+Command+U.

Після того, як ви знаєте, як переглянути вихідний код, ви повинні знати, як здійснити пошук у ньому.

Як правило, одні й ті самі функції пошуку, які ви використовуєте під час нормального перегляду веб-сторінок, застосовуються і до пошуку у вихідному коді.

Команди, CTRL + F (ЗНАЙТИ) допоможе Вам швидко переглянути вихідний код важливих елементів SEO.

Мітки заголовків.

Тег заголовка є найголовнішим елементом SEO. Це найголовніше у вихідному коді.

Якщо ви збираєтеся взяти одну лише цінну річ із цієї статті, зверніть увагу на це:

Ви знаєте, ці результати Google надає, коли ви шукаєте щось.

Усі ці результати беруться із тегів заголовків веб-сторінок. Отже, якщо у вас немає тегів заголовків у вихідному коді, ви можете не з'явитися в Google (або будь-якій іншій пошуковій системі).

Чи вірите чи ні, я насправді бачив веб-сайти без тегів заголовків. Давайте спробуємо зробити швидкий пошук у Google для терміна « Marketing Guides«. Що ми бачимо:

Ви можете бачити перший результат пошуку для блогу KISSmetricsрозділ Marketing Guides.

Якщо ми перейдемо за посиланням першого результату пошуку і переглянемо вихідний код сторінки, можна побачити в заголовку тег:

Тег заголовка позначається таким тегом: </b>. і закінчується закриваючим тегом: <b></ <i>title</i>> </b>. Тег заголовка, як правило, розташований у верхній частині вихідного коду в розділі <b><head> </b>. </i></p> <p>І ми бачимо, що зміст всередині тега заголовка відповідає тому, що використовується в заголовку результату <a href="https://bakep.ru/uk/kak-vyiti-iz-akkaunta-v-prilozhenii-gmail-kak-na-androide-vyiti-iz-google-akkaunta-gmail.html">пошуку Google</a>.</p> <p>Але не тільки теги заголовків необхідні для того, щоб бути включеними до результатів пошуку Google.</p> <p>Google ще й ідентифікує слова в тегах заголовків як важливі ключові слова, які, на його думку, актуальні для пошуку користувачів.</p> <p>Так що якщо ви хочете отримати певне ранжування веб-сторінки для конкретної теми, то вам краще переконатися, що слова, які описують предмет, включені в тег заголовок.</p> <p>Існує ціла низка онлайнових ресурсів, де ви можете дізнатися більше про те, як <a href="https://bakep.ru/uk/a-set-of-tags-for-video-with-animals-how-to-learn-and-add-keywords-tags-for-youtube-in-video-per-channel.html">ключові слова</a>і теги заголовків відіграють важливу роль у спільній архітектурі вашого сайту.</p> <p>Ось деякі важливі пункти, які дозволять вам пам'ятати про важливість ваших тег заголовків:</p> <ul><li>Переконайтеся, що у вас є лише один тег заголовка на веб-сторінці.</li> <li>Переконайтеся, що кожна веб-сторінка на сайті має свій тег заголовок.</li> <li>Переконайтеся, що кожен тег заголовок на сайті є унікальним. Ніколи не дублюйте вміст певного тега заголовка.</li> </ul><h3></h3> <p>Наступний <a href="https://bakep.ru/uk/pesnya-dlya-roditelei-na-svadbe-pesnya-ot-roditelei-na-svadbe.html">важливий елемент</a>головною частиною вашої веб-сторінки є мета-тег опису.</p> <p>Це фрагмент вашого контенту зі 160 символів, який відображається під вашим заголовком у пошукових системах.</p> <p><img src='https://i0.wp.com/infobiz-tools.com/wp-content/uploads/2014/02/read-website.png' height="511" width="500" loading=lazy loading=lazy></p> <p>Я бачив сотні веб-сайтів, які повністю ігнорують цей тег. Його дуже легко знайти у вихідному коді:</p> <p><img src='https://i0.wp.com/infobiz-tools.com/wp-content/uploads/2014/02/how-read1.png' width="100%" loading=lazy loading=lazy></p> <p>Таким чином, перевірте та переконайтеся, що цей тег присутній на всіх веб-сторінках вашого сайту. Що ще важливіше, переконайтеся, що ви не дублюєте його на кількох сторінках.</p> <p>Дублювання мета-тег опису не є пінальті для пошукової системи, але це дуже велика маркетингова помилка.</p> <p>Багато хто ігнорує мета тег опису, але ви дійсно повинні попрацювати в цьому напрямі, тому що він зчитується <a href="https://bakep.ru/uk/tendencii-razvitiya-poiskovyh-sistem-poiskovye-sistemy-interneta-kakie.html">пошуковою системою</a>.</p> <p>Подумайте про те, що мета-тег опису буде залучити більше відвідувачів і збільшити цільові переходи на сайт.</p> HTML код це по суті і є сама ваша сторінка, він вказує на те, як саме ваш сайт будуватиметься і відображатиметься на дисплеї користувача. Як правило, цей код відкритий, тобто будь-який користувач може безперешкодно його побачити та прочитати. Якщо ж ви з тих чи інших причин не бажаєте того, щоб будь-хто <b>мав доступ до вашого коду</b>, Ви можете . Це передбачає створення особливого алгоритму, який <b>кодує ваш код</b>, тобто ховає його первинний вигляд, роблячи недоступним користувачам сайту. <h2>Коли і кому це знадобиться?</h2>Зробити таке шифрування може будь-який веб-майстер або власник сайту. Питання в тому, наскільки це обґрунтовано та потрібно. Наприклад, якщо у вас звичайна лендинг-сторінка, зроблена за шаблоном, і яка не відрізняється від інших, немає сенсу займатися кодуванням, оскільки такий шаблон і є загальнодоступним. У такому разі навряд чи хтось займатиметься копіюванням та вивченням вашого коду. А от якщо у вас сайт, який має унікальний дизайн, ви довго і ретельно над ним працювали, або заплатили за це чималі гроші, то про код все ж варто подумати. Дуже часті випадки, коли власник має сайт, в який було вкладено чимало сил, часу і грошей, і через деякий час тим чи іншим чином виявляє такий самий сайт, з таким же дизайном і структурою, але на іншому домені та хостингу. Найчастіше власникам сайтів про це говорять у коментарях самі користувачі. У цьому випадку можна сміливо зробити висновок, що хтось просто <b>скопіював HTML код</b>вашого сайту та запустив його на своєму. <h2>Що ж робити, щоб убезпечити себе?</h2>Від ситуацій копіювання та використання без дозволу чужого HTML коду не так просто себе убезпечити. Та й взагалі якщо людина вже побачила ваш сайт, вона навіть без коду зможе її дублювати, за умови наявності певних знань у сфері веб-розробки. Але, що стосується самого HTML коду, його можна зашифрувати. Працює це на основі спеціального JavaScript-скрипту. За допомогою нашого інструменту ви. При цьому створюється спеціальний скрипт, призначений для розшифровки. Працює це досить просто: коли відвідувач переходить на ваш сайт, завантажується зашифрований код, зрозуміти який він не зможе. У цей момент запускається створений javascript, який розшифровує код і відображає сайт на екрані користувача. При цьому сам відвідувач не може побачити справжній код. Однак у цьому методі є і невеликий недолік. Є користувачі в браузерах яких заборонено запуск javascript на сайті, у такому разі скрипт не запуститься, відповідно HTML код не розшифрується та сайт не буде відображено. Але, засмучуватися не варто, таке налаштування браузерів зустрічається дуже рідко, можна сказати, що на 99% браузерах дозволено запуск javascript. <h2>Як це зробити?</h2>Робиться це дуже просто за допомогою нашого інструменту. Все, що вам потрібно це вставити ваш HTML код в поле на цій сторінці, і натиснути на кнопку для запуску шифрування. В результаті, в іншому полі ви отримаєте зашифрований код, який вже можна використовувати безпосередньо на вашому сайті. 1 голос <p>Доброго часу доби, шановні читачі мого блогу. Буває знаходиш на сайті якусь гарну фішку і починає мучити питання, як же творець досяг такого цікавого ефекту.</p> <p>Виявляється, знайти відповідь досить просто. А якщо ви маєте деякі навички, то можете назбирати безліч таких фішок і за короткий час створити свій унікальний сайт.</p> <p>Сьогодні ми поговоримо про те, як відкрити код сторінки, певного елемента та навчитися використовувати цю навичку собі на благо.</p> <h2><span>Базові знання про код</span></h2> <p>Мій сайт призначений для новачків і спочатку мені хотілося б у двох словах розповісти про сайти і код в цілому.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/cit1-75-537x292.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Щоб намалювати картинку, потім розрізати її на дрібні частини, написати код, завдяки якому браузер знову збере всі елементи в єдине ціле. Здається все дуже складно? Зовсім ні, та й сумувати з цього приводу не варто.</p> <p>Якісні сайти створюються саме так. Хочете - влазьте в цю справу і вивчайте, немає бажання - ніхто не може вас змусити.</p> <p>Скажу тільки одне… немає нічого приємнішого, ніж бачити, як незрозумілі слова, написані тобою, перетворюються на єдине ціле і оживають: посилання працюють, кнопки рухаються, картинки рухаються, текст повзе. Думаю, що я знаю, як почував себе Віктор Франкенштейн.</p> <p>Коли ви почнете осягати таємну мову і бачити, що все насправді значно простіше, ніж здавалося спочатку, ви не можете не вірити у власні сили та можливості мозку. Це дуже круто.</p> <p>Як роблять сайти? В ідеалі, спершу. Він просто малює картинку. Наприклад, як показано на малюнку нижче. Поки що це лише зображення, фотографія. Не працюють посилання, при натисканні ви нікуди не переходите, пошук не здійснюється.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_1-46.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>По цьому малюнку. Подивіться на скріншот унизу. Вам може здатися, що це безглуздий та дуже складний набір символів. Насправді все не так вже й складно, є певний алгоритм.</p> <p>Існує всього близько 150 тегів і кожен з них відповідає за певну дію: посилання, перенесення, виділення жирним, колір, заголовок і таке інше. Розібратися в них не так вже й складно, якщо є бажання і не шкода часу.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_2-43.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Завдяки знанням цих атрибутів можна вирішити практично будь-яке завдання. Ось тільки шляхи задля досягнення мети кожен розробник знаходить свої.</p> <p>Досвідчені творці відразу бачать як досягти результату, а іншим доводиться думати, шукати відповіді у статтях чи вихідному коді конкурентів. Вони просто беруть необхідну частину на сторонньому сайті та редагують під себе. Це значно скорочує процес роботи.</p> <p>Трохи пізніше я покажу вам <a href="https://bakep.ru/uk/zarabatyvayut-li-bloggery-na-yutube-i-skolko-skolko-mozhno-zarabotat-na.html">конкретний приклад</a>.</p> <h2>Перегляд коду</h2> <p>Отже, давайте я спочатку покажу як діяти, якщо вам потрібно дізнатися чужий html. Потім ми докладніше розглянемо всі інші питання.</p> <h3><span>Найкращий спосіб</span></h3> <p>Метод, який я опишу першим, трохи складний для новачків, але як ознайомлення – піде, читайте. Відкриваєте сторінку та натискаєте на праву клавішу миші. Вибираєте пункт «Зберегти як…»</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_2-1-1.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Зберігайте веб-сторінку повністю. Як можете побачити на скріншоті, я вже все завантажив заздалегідь. Тут у нас дві папки.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_2-2-1.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Тут є все, що потрібно. Кожен елемент. Якщо знаєте на цьому, то зможете швидко отримати все необхідне. Але таке завдання все частіше стає нездійсненним. Закачування не здійснюється. Що робити, якщо заборонено копіювати сторінку?</p> <h3><span>Це ж Гугль хром</span></h3> <p>Як ви вже напевно могли помітити, я найчастіше використовую <a href="https://bakep.ru/uk/ispolzuem-google-cloud-print-bez-google-chrome-chto-takoe-virtualnyi-printer.html">Google Chrome</a>і дізнатися чужий код у цьому браузері простіше простого. Як у принципі, і в будь-якому іншому. Схема буде не те що схожа, а ідентична. Відкриваємо сторінку, код якої хочемо дізнатися, та клацаємо у будь-якому місці правою клавішею миші. У вікні, що з'являється, клацаємо «Подивитися код сторінки».</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_3-40.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>У новому вікні відкриється простирадло коду, в якому досить складно розібратися новачкові. Але, не лякайтеся раніше.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_4-36.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Якщо вам потрібно дізнатися код лише одного елемента, достатньо навести на нього мишею та клацнути правою клавішею. Вибираємо іншу функцію хрому: "Перегляд коду елемента".</p> <p>Мені, наприклад, може бути цікаво, яким чином зроблено логотип, при використанні картинки або мови програмування? Адже намалювати квадрат можна за <a href="https://bakep.ru/uk/how-to-align-the-right-edge-of-the-html-align-text-with-padding-css.html">допомоги css</a>. Багато фахівців радять якнайбільше інформації прописувати кодом. Як працюють на популярних сайтах?</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_5-33.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Ось і з'явилася потрібна інформація. Зверху html, внизу CSS. Це дві мови. Перший відповідає за текстову складову, а другий – за дизайн. Якби не було css, то вам довелося б щоразу прописувати колір, розмір шрифту. Для кожної сторінки це дуже довго. Але якби не було html, то ми не мали б текстів. Грубо пояснив, але загалом усе так і є.</p> <p>До речі, якщо вас зацікавило як тут влаштований, то можете знизу подивитися посилання на картинку. Ось вам і відповідь.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_6-33.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <h3>Mozilla Firefox</h3> <p>Якщо ви любите працювати в мазилі, то все буде так само. Відкриваєте сторінку та натискаєте на праву кнопку миші. "Вихідний код сторінки" якщо хочете побачити весь код повністю.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_7-32.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>При наведенні на елемент з'являється можливість відкрити його код.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_8-29.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Тут дані відображаються в нижній частині екрану, а в іншому все так само.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_9-29.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <h3>Яндекс браузер</h3> <p>В Яндекс браузері все так само, як і в попередніх двох варіантах, відкриваємо сторінку, права клавіша миші, подивитися код сторінки.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_10-27.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Наводимо курсор на елемент, якщо хочемо дізнатися саме його код.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_11-27.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Відображається все тут так само, як і в хромі.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_12-25.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <h3>Опера</h3> <p>Ну і насамкінець Opera.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_13-24.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>До речі, можливо, ви помітили, що не обов'язково користуватися мишею. Для відкриття коду є швидке поєднання клавіш і для всіх браузерів воно однакове: <b>CTRL+U</b>.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_14-24.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Для елементів: Ctrl+Shift+C.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_15-22.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Ось так виглядає результат.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_16-23.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <h2><span>Це буде цікаво новачкам</span></h2> <p>А тепер дивіться, як усе працює. Знаходьте сайт і дуже вам подобається якийсь елемент. Наприклад, ось цей. Як відкрити код елемента, ви вже знаєте.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_17-20.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Тепер копіюєте його.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_18-19.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Я користуюся , вставляю цей код у новий html файл, у тег body (тіло англійською).</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_19-18.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Тепер подивимося, як це все виглядатиме у браузері.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_20-16.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Готово. Щоб текст був вирівняний по краях і отримав зелений колір необхідно підключити до цього документа css і скопіювати інший код з того веб-сайту, з якого ми тирали цей.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_21-16.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Зараз я не цим займатимуся. На це потрібно більше часу: і мого, і вашого. Думаю, всі подробиці я опишу у своїх майбутніх публікаціях. Підписуйтесь на розсилку та дізнаєтеся про появу статті першим.</p> <p>Якщо ж терпіти немає сил, а дізнатися більше про html і css хочеться вже зараз, то можу за традицією порекомендувати безкоштовні навчальні курси.</p> <p>Тут 33 уроки, які дозволять освоїти <i><b><span>«Безкоштовний курс з HTML»</span> </b> </i>.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_22-16-537x476.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>А тут повна інформація про css. <i><b><span>«Безкоштовний курс з CSS (45 відеоуроків!)»</span> </b> </i>.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_23-15.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Тепер ви знаєте трохи більше. Бажаю вам успіхів у ваших починаннях. До нових зустрічей!</p> <p><a href="https://bakep.ru/uk/istoriya-sozdaniya-i-razvitiya-brauzera-mozilla-firefox-istoriya.html">Mozilla FireFox</a>розкрийте в меню розділ «Вигляд» та клацніть пункт «Вихідний код». Такий самий пункт є і в <a href="https://bakep.ru/uk/redaktirovanie-kontekstnogo-menyu-podrobnyi-razbor-variantov.html">контекстному меню</a>, який , якщо клацнути правою кнопкою миші текст сторінки. Можна використовувати і поєднання клавіш CTRL + U. Mozilla FireFox при цьому не використовує зовнішніх програм – вихідний код сторінки з підсвічуванням синтаксису буде відкрито в окремому вікні браузера.</p> <p>У браузері Internet Explorer клацніть у меню розділ "Файл" і виберіть "Правити в Блокнот". Замість назви Блокнот може бути написана інша, ви призначили в налаштуваннях браузера для перегляду вихідного коду. По клацанню сторінки правою кнопкою миші випадає контекстне меню, у якому також є пункт, що дозволяє відкрити вихідний код сторінки у зовнішній програмі – «Перегляд HTML-коду».</p> <p><img src='https://i1.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95df96052552b95df9bd.jpg' height="669" width="663" loading=lazy loading=lazy></p> <p>У <a href="https://bakep.ru/uk/how-to-add-an-express-panel-in-chrome-transferring-bookmarks-from-the-opera-browser.html">браузері Opera</a>відкрийте меню, перейдіть в розділ «Сторінка» і ви матимете можливість вибрати в підрозділі «Засоби розробки» пункт «Вихідний код» або пункт «Вихідний код кадру». Такому вибору призначені гарячі клавіші CTRL+U та CTRL+SHIFT+U відповідно. У контекстному меню, прив'язаному до клацання сторінки правою кнопкою миші, також є пункт «Початковий код». Opera відкриває вихідну сторінку у зовнішній програмі, яка призначена в ОС або в налаштуваннях браузера для редагування HTML-файлів.</p> <p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95eb30952552b95eb346.jpg' width="100%" loading=lazy loading=lazy></p> <p><a href="https://bakep.ru/uk/required-settings-in-google-chrome-the-most-important-settings-for-the-google-chrome-browser.html">Браузер Google</a> Chrome без сумніву має кращу організацію перегляду вихідного коду. Клацнувши сторінку правою кнопкою миші, ви можете вибрати пункт «Перегляду коду сторінки» і тоді вихідний підсвічування синтаксису буде відкрито на окремій вкладці. А можете вибрати в тому ж меню рядок "Перегляд коду елемента" і браузер у цій же вкладці відкриє два додаткові кадри, в яких ви можете перевіряти HTML-і CSS-код будь-якого елемента сторінки. Браузер буде реагувати на переміщення курсору рядками коду, підсвічуючи на сторінці елементи, що відповідають цій ділянці HTML-коду.</p> <p><img src='https://i1.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b9603c4652552b9603c84.jpg' width="100%" loading=lazy loading=lazy></p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <footer> <div class="td-post-source-tags"> </div> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://bakep.ru/kak-bystro-otkryt-kod-stranicy-v-brauzere-dazhe-esli-kopirovanie-zapreshcheno.html" content="https://bakep.ru/kak-bystro-otkryt-kod-stranicy-v-brauzere-dazhe-esli-kopirovanie-zapreshcheno.html" /><span style="display: none;"><span style="display: none;"><meta itemprop="url" content="/assets/logo.svg"></span> <meta itemprop="name" content="Как быстро открыть код страницы в браузере, даже если копирование запрещено. Распаковка и расшифровка скриптов JavaScript Как расшифровать html код страницы"> </span> <meta itemprop="headline " content="Сбербанк Копилка онлайн"><span style="display: none;" itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="https://i2.wp.com/manhunter.ru/upload/1a/87/1a870b5012697202749e9805fa585605.jpg"> <meta itemprop="width" content="366"><meta itemprop="height" content="262"></span> </footer> </article> <style> .ads-border { overflow: hidden; } .ads-content { width: 930px; display: block; } @media(max-width: 1140px) { .ads-content { width: 910px; } } @media(max-width: 1018px) { .ads-content { width: 970px; } } @media (max-width: 767px) { .ads-content { width: 134%; } } @media (max-width: 479px) { .ads-content { width: 100%; height: 490px; } } </style> <div class="ads-block"> <h4 class="td-related-title"><span class="td-related-left td-cur-simple-item">ПОХОДЖЕННЯ СТАТТІ</span></h4> <div class="ads-border"> <div class="ads-content"> </div> </div> </div> <style> #mc-container { padding: 10px; } </style> <dblock></dblock> </div> </div> <div class="td-pb-span4 td-main-sidebar" role="complementary"> <div class="td-ss-main-sidebar"> <aside class="widget widget_text" id="text-23"> <div class="block-title"><span>Корисне</span></div> <div class="textwidget" align="center"></div> </aside> <aside class="widget widget_text" id="text-24"> <div class="block-title"><span>Реклама</span></div> <div class="textwidget" align="center"></div> </aside> <aside class="widget widget_text" id="text-25"> <div class="textwidget"> <p style="text-align: center;"> </p> </div> </aside> <aside class="widget rpwe_widget recent-posts-extended" id="rpwe_widget-4"> <div class="block-title"><span>Нове</span></div> <dblock></dblock> <div class="rpwe-block "> <ul class="rpwe-ul"> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/uk/pereustanovit-vindovs-7-maksimalnaya-na-kompyuter-ustanovka-windows-s.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/ustanovkaos.ru/wp-content/uploads/2017/06/05-klyuch-OS.png" alt="Установка Windows з вінчестера без флешки та диска" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/uk/pereustanovit-vindovs-7-maksimalnaya-na-kompyuter-ustanovka-windows-s.html" title="Установка Windows з вінчестера без флешки та диска" rel="bookmark">Установка Windows з вінчестера без флешки та диска</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/uk/portirovanie-proshivok-qualcomm-portirovanie-proshivok-android-kak.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/protabletpc.ru/wp-content/uploads/2016/03/android-portirovanie-podgotovka.jpg" alt="Портування прошивок Android" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/uk/portirovanie-proshivok-qualcomm-portirovanie-proshivok-android-kak.html" title="Портування прошивок Android" rel="bookmark">Портування прошивок Android</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/uk/koordinaty-v-gugl-maps-koordinaty-v-google-earth.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/deus1.com/images/interesoe-sekrety/let-obekt-300x188.jpg" alt="Координати у Google Earth" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/uk/koordinaty-v-gugl-maps-koordinaty-v-google-earth.html" title="Координати у Google Earth" rel="bookmark">Координати у Google Earth</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/uk/kak-sbrosit-zavodskie-nastroiki-na-samsung-s3370-kak-sbrosit-nastroiki-na.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/syl.ru/misc/i/ai/376086/2345526.jpg" alt="Як скинути налаштування на «Самсунгу" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/uk/kak-sbrosit-zavodskie-nastroiki-na-samsung-s3370-kak-sbrosit-nastroiki-na.html" title="Як скинути налаштування на «Самсунгу" rel="bookmark">Як скинути налаштування на «Самсунгу</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/uk/gde-nahoditsya-podsvetka-na-noutbuke-kak-vklyuchit-podsvetku.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/ledjournal.info/wp-content/uploads/2018/06/msi.jpg" alt="Як увімкнути підсвічування клавіатури на ноутбуці Asus" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/uk/gde-nahoditsya-podsvetka-na-noutbuke-kak-vklyuchit-podsvetku.html" title="Як увімкнути підсвічування клавіатури на ноутбуці Asus" rel="bookmark">Як увімкнути підсвічування клавіатури на ноутбуці Asus</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/uk/operatory-yandeks-vordstat-kak-bystro-utochnit-chastotnost-zaprosov-v-wordstat.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/znet.ru/wp-content/uploads/2017/04/Screenshot_5-3.png" alt="Як швидко уточнити частотність запитів у Wordstat Частотність запитів до вордстату" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/uk/operatory-yandeks-vordstat-kak-bystro-utochnit-chastotnost-zaprosov-v-wordstat.html" title="Як швидко уточнити частотність запитів у Wordstat Частотність запитів до вордстату" rel="bookmark">Як швидко уточнити частотність запитів у Wordstat Частотність запитів до вордстату</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/uk/reiting-sistem-upravleniya-kontentom-kakaya-cms-luchshe-mister.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/web-optimizator.com/wp-content/uploads/2018/01/1.png" alt="Рейтинг систем керування контентом" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/uk/reiting-sistem-upravleniya-kontentom-kakaya-cms-luchshe-mister.html" title="Рейтинг систем керування контентом" rel="bookmark">Рейтинг систем керування контентом</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/uk/gde-lezhat-vidzhety-v-android-kak-ustanovit-vidzhety-na-smartfon-xiaomi-po-vneshnemu.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/protabletpc.ru/wp-content/uploads/2015/02/vidget-na-android.jpg" alt="Як встановити віджети на смартфон Xiaomi" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/uk/gde-lezhat-vidzhety-v-android-kak-ustanovit-vidzhety-na-smartfon-xiaomi-po-vneshnemu.html" title="Як встановити віджети на смартфон Xiaomi" rel="bookmark">Як встановити віджети на смартфон Xiaomi</a> </li> <li class="rpwe-li rpwe-clearfix"> <a class="rpwe-img" href="https://bakep.ru/uk/chto-takoe-apdeit-i-apdeity-yandeksa-chto-takoe-apdeit-i-apdeity-yandeksa-byl.html" rel="bookmark"> <img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/raskruty.ru/img/apdeity/apdeit-tic.png" alt="Що таке апдейт і апдейти яндекса Був останній апдейт яндексу" loading=lazy loading=lazy></a> <a style="color: #169c4c; font-size:14px; font-weight:600;" href="https://bakep.ru/uk/chto-takoe-apdeit-i-apdeity-yandeksa-chto-takoe-apdeit-i-apdeity-yandeksa-byl.html" title="Що таке апдейт і апдейти яндекса Був останній апдейт яндексу" rel="bookmark">Що таке апдейт і апдейти яндекса Був останній апдейт яндексу</a> </li> </ul> </div> </aside> </div> </div> </div> </div> </div> <div class="td-footer-wrapper td-footer-template-3"> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span12"> </div> </div> <div class="td-pb-row"> <div class="td-pb-span3 logo-footer"> <div class="td-footer-info"> <div class="footer-logo-wrap"><a href="https://bakep.ru/uk/"><img class="td-retina-data" src="/img/logo.png" data-retina="/img/logo.png" alt="Комп'ютерні підказки для користувачів-початківців" title="Комп'ютерні підказки для користувачів-початківців" / loading=lazy loading=lazy></a></div> <div class="footer-text-wrap"></div> <div class="footer-social-wrap td-social-style-2"></div> </div> <aside class="widget widget_text" id="text-16"> <div class="textwidget"> <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="//yastatic.net/share2/share.js"></script> <span class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter"></span></div> </aside> </div> <div class="td-pb-span9 footer-discription"> <aside class="widget widget_text" id="text-5"> <div class="textwidget"> <p> <font size="2" color="grey"> </font> </p>© Комп'ютерні підказки для користувачів-початківців, 2024</div> </aside> </div> </div> </div> </div> <div class="td-sub-footer-container"> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span12 td-sub-footer-menu"> <div class="td-sub-footer-main"> <div class="menu-foot-container"><ul id="menu-foot" class="td-subfooter-menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-first td-menu-item td-normal-menu"><a href="https://bakep.ru/uk/feedback.html">Зворотній зв'язок</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="https://bakep.ru/uk/sitemap.xml">Карта сайту</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="">Про сайт</a></li> </ul></div> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> jQuery(document).ready(function () { jQuery("span.ancored").replaceWith(function () { $this = jQuery(this); href = $this.attr("title"); text = $this.html(); return '<a href="' + href + '">' + text + '</a>'; } ) } ) </script> <link rel='stylesheet' id='font-awesome-css' href='//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css?ver=4.4.0' type='text/css' media='all' /> <link rel='stylesheet' id='su-content-shortcodes-css' href='/assets/content-shortcodes.css' type='text/css' media='all' /> <link rel='stylesheet' id='su-box-shortcodes-css' href='/assets/box-shortcodes.css' type='text/css' media='all' /> <script type='text/javascript' src='/assets/jquery.form.min.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var _wpcf7 = { "recaptcha":{ "messages":{ "empty":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0440\u043e\u0431\u043e\u0442."} },"cached":"1"} ; /* ]]> */ </script> <script type='text/javascript' src='/assets/scripts.js'></script> <script type='text/javascript' src='/assets/front.min.js'></script> <script type='text/javascript' src='/assets/imagesloaded.min.js'></script> <script type='text/javascript' src='/assets/masonry.min.js'></script> <script type='text/javascript' src='/assets/jquery.masonry.min.js'></script> <script type='text/javascript' src='/assets/rsvp.js'></script> <script type='text/javascript' src='/assets/tagdiv_theme.js'></script> <script type='text/javascript' src='/assets/comment-reply.min.js'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "td-default", "margin_top" : 25, "margin_bottom" : 320, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-13'] } ; </script> <script type='text/javascript' src='/assets/q2w3-fixed-widget.min.js'></script> <script type='text/javascript' src='/assets/wp-embed.min.js'></script> <style type='text/css'> /*** Shortcodes Ultimate - box elements ***/ /* Common styles ---------------------------------------------------------------*/ .su-clearfix:before, .su-clearfix:after { display: table; content: " "; } .su-clearfix:after { clear: both; } /* Tabs + Tab ---------------------------------------------------------------*/ .su-tabs { margin: 0 0 1.5em 0; padding: 3px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: #eee; } .su-tabs-nav span { display: inline-block; margin-right: 3px; padding: 10px 15px; font-size: 13px; min-height: 40px; line-height: 20px; -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topright: 3px; border-top-right-radius: 3px; color: #333; cursor: pointer; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .su-tabs-nav span:hover { background: #f5f5f5; } .su-tabs-nav span.su-tabs-current { background: #fff; cursor: default; } .su-tabs-nav span.su-tabs-disabled { opacity: 0.5; filter: alpha(opacity=50); cursor: default; } .su-tabs-pane { padding: 15px; font-size: 13px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-bottomright: 3px; border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; background: #fff; color: #333; } .su-tabs-vertical:before, .su-tabs-vertical:after { content: " "; display: table; } .su-tabs-vertical:after { clear: both; } .su-tabs-vertical .su-tabs-nav { float: left; width: 30%; } .su-tabs-vertical .su-tabs-nav span { display: block; margin-right: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; } .su-tabs-vertical .su-tabs-panes { float: left; width: 70%; } .su-tabs-vertical .su-tabs-pane { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .su-tabs-nav, .su-tabs-nav span, .su-tabs-panes, .su-tabs-pane { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; } /* Styles for screens that are less than 768px */ @media only screen and (max-width: 768px) { .su-tabs-nav span { display: block; } .su-tabs-vertical .su-tabs-nav { float: none; width: auto; } .su-tabs-vertical .su-tabs-panes { float: none; width: auto; } } /* Spoiler + Accordion ---------------------------------------------------------------*/ .su-spoiler { margin-bottom: 1.5em; } .su-spoiler .su-spoiler:last-child { margin-bottom: 0; } .su-accordion { margin-bottom: 1.5em; } .su-accordion .su-spoiler { margin-bottom: 0.5em; } .su-spoiler-title { position: relative; cursor: pointer; min-height: 20px; line-height: 20px; padding: 7px 7px 7px 34px; font-weight: bold; font-size: 13px; } .su-spoiler-icon { position: absolute; left: 7px; top: 7px; display: block; width: 20px; height: 20px; line-height: 21px; text-align: center; font-size: 14px; font-family: FontAwesome; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; *margin-right: .3em; } .su-spoiler-content { padding: 14px; -webkit-transition: padding-top .2s; -moz-transition: padding-top .2s; -o-transition: padding-top .2s; transition: padding-top .2s; -ie-transition: padding-top .2s; } .su-spoiler.su-spoiler-closed > .su-spoiler-content { height: 0; margin: 0; padding: 0; overflow: hidden; border: none; opacity: 0; } .su-spoiler-icon-plus .su-spoiler-icon:before { content: "\f068"; } .su-spoiler-icon-plus.su-spoiler-closed .su-spoiler-icon:before { content: "\f067"; } .su-spoiler-icon-plus-circle .su-spoiler-icon:before { content: "\f056"; } .su-spoiler-icon-plus-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f055"; } .su-spoiler-icon-plus-square-1 .su-spoiler-icon:before { content: "\f146"; } .su-spoiler-icon-plus-square-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0fe"; } .su-spoiler-icon-plus-square-2 .su-spoiler-icon:before { content: "\f117"; } .su-spoiler-icon-plus-square-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f116"; } .su-spoiler-icon-arrow .su-spoiler-icon:before { content: "\f063"; } .su-spoiler-icon-arrow.su-spoiler-closed .su-spoiler-icon:before { content: "\f061"; } .su-spoiler-icon-arrow-circle-1 .su-spoiler-icon:before { content: "\f0ab"; } .su-spoiler-icon-arrow-circle-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0a9"; } .su-spoiler-icon-arrow-circle-2 .su-spoiler-icon:before { content: "\f01a"; } .su-spoiler-icon-arrow-circle-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f18e"; } .su-spoiler-icon-chevron .su-spoiler-icon:before { content: "\f078"; } .su-spoiler-icon-chevron.su-spoiler-closed .su-spoiler-icon:before { content: "\f054"; } .su-spoiler-icon-chevron-circle .su-spoiler-icon:before { content: "\f13a"; } .su-spoiler-icon-chevron-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f138"; } .su-spoiler-icon-caret .su-spoiler-icon:before { content: "\f0d7"; } .su-spoiler-icon-caret.su-spoiler-closed .su-spoiler-icon:before { content: "\f0da"; } .su-spoiler-icon-caret-square .su-spoiler-icon:before { content: "\f150"; } .su-spoiler-icon-caret-square.su-spoiler-closed .su-spoiler-icon:before { content: "\f152"; } .su-spoiler-icon-folder-1 .su-spoiler-icon:before { content: "\f07c"; } .su-spoiler-icon-folder-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f07b"; } .su-spoiler-icon-folder-2 .su-spoiler-icon:before { content: "\f115"; } .su-spoiler-icon-folder-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f114"; } .su-spoiler-style-default { } .su-spoiler-style-default > .su-spoiler-title { padding-left: 27px; padding-right: 0; } .su-spoiler-style-default > .su-spoiler-title > .su-spoiler-icon { left: 0; } .su-spoiler-style-default > .su-spoiler-content { padding: 1em 0 1em 27px; } .su-spoiler-style-fancy { border: 1px solid #ccc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #fff; color: #333; } .su-spoiler-style-fancy > .su-spoiler-title { border-bottom: 1px solid #ccc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #f0f0f0; font-size: 0.9em; } .su-spoiler-style-fancy.su-spoiler-closed > .su-spoiler-title { border: none; } .su-spoiler-style-fancy > .su-spoiler-content { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .su-spoiler-style-simple { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } .su-spoiler-style-simple > .su-spoiler-title { padding: 5px 10px; background: #f0f0f0; color: #333; font-size: 0.9em; } .su-spoiler-style-simple > .su-spoiler-title > .su-spoiler-icon { display: none; } .su-spoiler-style-simple > .su-spoiler-content { padding: 1em 10px; background: #fff; color: #333; } /* Quote ---------------------------------------------------------------*/ .su-quote-style-default { position: relative; margin-bottom: 1.5em; padding: 0.5em 3em; font-style: italic; } /*.su-quote-style-default.su-quote-has-cite { margin-bottom: 3em; } */ .su-quote-style-default:before, .su-quote-style-default:after { position: absolute; display: block; width: 20px; height: 20px; background-image: url('../images/quote.png'); content: ''; } .su-quote-style-default:before { top: 0; left: 0; background-position: 0 0; } .su-quote-style-default:after { right: 0; bottom: 0; background-position: -20px 0; } .su-quote-style-default .su-quote-cite { display: block; text-align: right; font-style: normal; } .su-quote-style-default .su-quote-cite:before { content: "\2014\0000a0"; } .su-quote-style-default .su-quote-cite a { text-decoration: underline; } /* Pullquote ---------------------------------------------------------------*/ .su-pullquote { display: block; width: 30%; padding: 0.5em 1em; } .su-pullquote-align-left { margin: 0.5em 1.5em 1em 0; padding-left: 0; float: left; border-right: 5px solid #eee; } .su-pullquote-align-right { margin: 0.5em 0 1em 1.5em; padding-right: 0; float: right; border-left: 5px solid #eee; } /* Row + Column ---------------------------------------------------------------*/ .su-row { clear: both; zoom: 1; margin-bottom: 1.5em; } .su-row:before, .su-row:after { display: table; content: ""; } .su-row:after { clear: both; } .su-column { display: block; margin: 0 4% 0 0; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .su-column-last { margin-right: 0; } .su-row .su-column { margin: 0 0 0 4%; } .su-row .su-column.su-column-size-1-1 { margin-left: 0; margin-right: 0; } .su-row .su-column:first-child { margin-left: 0; } .su-column-centered { margin-right: auto !important; margin-left: auto !important; float: none !important; } .su-column img, .su-column iframe, .su-column object, .su-column embed { max-width: 100%; } @media only screen { [class*="su-column"] + [class*="su-column"]:last-child { float: right; } } .su-column-size-1-1 { width: 100%; } .su-column-size-1-2 { width: 48%; } .su-column-size-1-3 { width: 30.66%; } .su-column-size-2-3 { width: 65.33%; } .su-column-size-1-4 { width: 22%; } .su-column-size-3-4 { width: 74%; } .su-column-size-1-5 { width: 16.8%; } .su-column-size-2-5 { width: 37.6%; } .su-column-size-3-5 { width: 58.4%; } .su-column-size-4-5 { width: 79.2%; } .su-column-size-1-6 { width: 13.33%; } .su-column-size-5-6 { width: 82.66%; } /* Styles for screens that are less than 768px */ @media only screen and (max-width: 768px) { .su-column { width: 100% !important; margin: 0 0 1.5em 0 !important; float: none !important; } .su-row .su-column:last-child { margin-bottom: 0 !important; } } /* Service ---------------------------------------------------------------*/ .su-service { position: relative; margin: 0 0 1.5em 0; } .su-service-title { display: block; margin-bottom: 0.5em; color: #333; font-weight: bold; font-size: 1.1em; } .su-service-title img { position: absolute; top: 0; left: 0; display: block !important; margin: 0 !important; padding: 0 !important; border: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } .su-service-title i { position: absolute; top: 0; left: 0; display: block !important; width: 1em; height: 1em; text-align: center; line-height: 1em; } .su-service-content { line-height: 1.4; } /* Box ---------------------------------------------------------------*/ .su-box { margin: 0 0 1.5em 0; border-width: 2px; border-style: solid; } .su-box-title { display: block; padding: 0.5em 1em; font-weight: bold; font-size: 1.1em; } .su-box-content { background-color: #fff; color: #444; padding: 1em; } .su-box-style-soft .su-box-title { background-image: url('../images/styles/style-soft.png'); background-position: 0 0; background-repeat: repeat-x; } .su-box-style-glass .su-box-title { background-image: url('../images/styles/style-glass.png'); background-position: 0 50%; background-repeat: repeat-x; } .su-box-style-bubbles .su-box-title { background-image: url('../images/styles/style-bubbles.png'); background-position: 0 50%; background-repeat: repeat-x; } .su-box-style-noise .su-box-title { background-image: url('../images/styles/style-noise.png'); background-position: 0 0; background-repeat: repeat-x; } /* Note ---------------------------------------------------------------*/ .su-note { margin: 0 0 1.5em 0; border-width: 0px; border-style: solid; } .su-note-inner { padding: 1em; border-width: 0px; border-style: solid; box-shadow: 3px 3px 6px #d0d0d0; } /* Expand ---------------------------------------------------------------*/ .su-expand { margin: 0 0 1.5em 0; } .su-expand-content { overflow: hidden; } .su-expand-link { margin-top: 0.5em; cursor: pointer; } .su-expand-link:hover { opacity: 0.7; filter: alpha(opacity=70); } .su-expand-link a, .su-expand-link a:hover, .su-expand-link a:active, .su-expand-link a:visited, .su-expand-link a:focus { display: inline; text-decoration: none; background: transparent; border: none; } .su-expand-link-style-default .su-expand-link a, .su-expand-link-style-default .su-expand-link a:hover { text-decoration: none; } .su-expand-link-style-underlined .su-expand-link span { text-decoration: underline; } .su-expand-link-style-dotted .su-expand-link span { border-bottom: 1px dotted #333; } .su-expand-link-style-dashed .su-expand-link span { border-bottom: 1px dashed #333; } .su-expand-link-style-button .su-expand-link a { display: inline-block; margin-top: 0.2em; padding: 0.2em 0.4em; border: 2px solid #333; } .su-expand-link-more { display: none; } .su-expand-link-less { display: block; } .su-expand-collapsed .su-expand-link-more { display: block; } .su-expand-collapsed .su-expand-link-less { display: none; } .su-expand-link i { display: inline-block; margin: 0 0.3em 0 0; vertical-align: middle; color: inherit; } .su-expand-link img { display: inline-block; width: 1em; height: 1em; margin: 0 0.3em 0 0; vertical-align: middle; } /* Lightbox content ---------------------------------------------------------------*/ .su-lightbox-content { position: relative; margin: 0 auto; } .mfp-content .su-lightbox-content, #su-generator .su-lightbox-content { display: block !important; } .su-lightbox-content-preview { width: 100%; min-height: 300px; background: #444; overflow: hidden; } .su-lightbox-content h1, .su-lightbox-content h2, .su-lightbox-content h3, .su-lightbox-content h4, .su-lightbox-content h5, .su-lightbox-content h6 { color: inherit; } /* Common margin resets for box elements ---------------------------------------------------------------*/ .su-column-inner > *:first-child, .su-accordion > *:first-child, .su-spoiler-content > *:first-child, .su-service-content > *:first-child, .su-box-content > *:first-child, .su-note-inner > *:first-child, .su-expand-content > *:first-child, .su-lightbox-content > *:first-child { margin-top: 0; } .su-column-inner > *:last-child, .su-tabs-pane > *:last-child, .su-accordion > *:last-child, .su-spoiler-content > *:last-child, .su-service-content > *:last-child, .su-box-content > *:last-child, .su-note-inner > *:last-child, .su-expand-content > *:last-child, .su-lightbox-content > *:last-child { margin-bottom: 0; } </style> <script> (function(){ var html_jquery_obj = jQuery('html'); if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) { var path = '/assets/style2.css'; jQuery.get(path, function(data) { var str_split_separator = '#td_css_split_separator'; var arr_splits = data.split(str_split_separator); var arr_length = arr_splits.length; if (arr_length > 1) { var dir_path = '/wp-content/themes/Newspaper'; var splited_css = ''; for (var i = 0; i < arr_length; i++) { if (i > 0) { arr_splits[i] = str_split_separator + ' ' + arr_splits[i]; } //jQuery('head').append('<style>' + arr_splits[i] + '</style>'); var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) { return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm,''); } ); splited_css += "<style>" + formated_str + "</style>"; } var td_theme_css = jQuery('link#td-theme-css'); if (td_theme_css.length) { td_theme_css.after(splited_css); } } } ); } } )(); </script> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html>