Крок 4
- У Firebug розгорніть тег , щоб відобразити тег .</li>
<li>Клацніть на значення тегу <title> (тобто "Ласкаво просимо: Mercury Tours") і вставте його в поле Target у редакторі.</li>
</ul>
</td>
</tr>
<tr> <td><strong>Крок 5</strong>
<ul>
<li>Щоб створити третю команду, натисніть на третій порожній рядок у редакторі та введіть "type" у текстовому полі Command.</li>
<li>У Firebug натисніть на кнопку "Перевірити".</li>
</ul>
</td>
</tr>
<tr> <td>Клацніть на текстове поле Ім'я користувача. Зверніть увагу, що Firebug автоматично показує вам HTML-код для цього елемента.</td>
</tr>
<tr> <td><strong>Крок 6</strong>
<p>Зверніть увагу, що в текстовому полі Ім'я користувача немає ідентифікатора, але він має атрибут NAME. Тому ми будемо використовувати його ІМЯ як локатор. Скопіюйте значення NAME і вставте його в поле Target у IDEI Selenium.</p>
<p>Досі в текстовому полі Цільова префікс "userName" з "name =", вказуючи, що Selenium IDE повинен націлюватись на елемент, атрибут NAME якого "userName".</p>
<p>Введіть "invalidUN" у текстовому полі Значення Selenium IDE. Тепер ваш тестовий сценарій повинен виглядати як на малюнку нижче. Ми закінчили з третьою командою. Примітка: Замість invalidUN, ви можете ввести будь-який інший текстовий рядок. Але Selenium IDE чутливий до регістру, і ви вводите значення / атрибути точно так, як у програмі.</p>
</td>
</tr>
<tr> <td><strong>Крок 7</strong>
<ul>
<li>Щоб створити четверту команду, введіть "type" у текстовому полі Command.</li>
<li>Знову ж таки, використовуйте кнопку Firebug "Перевірити", щоб отримати локатор для текстового поля "Пароль".</li>
</ul>
<ul>
<li>
<p>Вставте атрибут NAME ("пароль") у поле Ціль і поставте перед ним префікс "name ="</p>
</li>
<li>
<p>Введіть "invalidPW" у поле Значення в ID середовища Selenium. Тепер ваш тестовий сценарій повинен виглядати як на малюнку нижче.</p>
</li>
</ul>
</td>
</tr>
<tr> <td><strong>Крок 8</strong>
<ul>
<li>Для п’ятої команди введіть "clickAndWait" у текстовому полі Команда в Selenium IDE.</li>
<li>Використовуйте кнопку Firebug «Перевірити», щоб отримати локатор для кнопки «Увійти».</li>
</ul>
<ul>
<li>Вставте значення атрибута NAME ("логін") у текстове поле Target і поставте перед ним префікс "name =".</li>
<li>Тепер ваш тестовий сценарій повинен виглядати як на малюнку нижче.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<p><strong>Крок 9:</strong> Збережіть тестовий приклад так само, як і в попередньому розділі.</p>
<a id="menu-6"></a>
<h2>Використання кнопки пошуку</h2>
<p><strong>Кнопка "Знайти" в ID середовища Selenium використовується, щоб перевірити, чи те, що ми помістили в текстове поле Target, є справді правильним елементом інтерфейсу.</strong></p>
<p>Давайте скористаємося тестом Invalid_login, який ми створили в попередніх розділах. Клацніть на будь-яку команду з цільовим записом, скажімо, третю команду.</p>
<p>Клацніть на кнопку Знайти. Зверніть увагу, що текстове поле Ім'я користувача на сторінці Mercury Tours стає виділеним на секунду.</p>
<p>Це вказує на те, що програма IDE Selenium змогла правильно виявити очікуваний елемент і отримати до нього доступ. Якщо кнопка "Знайти" виділила інший елемент або його взагалі не було, то у вашому сценарії має бути щось не так.</p>
<a id="menu-7"></a>
<h2>Виконати команду</h2>
<p><strong>Це дозволяє виконувати будь-яку окрему команду, не запускаючи весь тест</strong> . Просто натисніть на рядок, який ви хочете виконати, а потім натисніть "Дії> Виконати цю команду" в рядку меню або просто натисніть "X" на клавіатурі.</p>
<p><strong>Крок 1.</strong> Переконайтеся, що ваш браузер знаходиться на домашній сторінці Mercury Tours. Клацніть на команду, яку ви хочете виконати. У цьому прикладі натисніть рядок "type | userName | invalidUN".</p>
<p><strong>Крок 2.</strong> Натисніть "X" на клавіатурі.</p>
<p><strong>Крок 3.</strong> Зверніть увагу, що текстове поле для імені користувача заповнюється текстом "invalidUN"</p>
<p><strong>Виконання команд таким чином сильно залежить від сторінки, яку Firefox відображає в даний час</strong> . Це означає, що якщо ви спробуєте наведений вище приклад із домашньою сторінкою Google, яка відображається замість Mercury Tours, тоді ваш крок не вдасться, оскільки на домашній сторінці Google немає текстового поля з атрибутом "userName".</p>
<a id="menu-8"></a>
<h2>Початкова точка</h2>
<p><strong>Точка початку - це індикатор, який повідомляє Selenium IDE, з яких ліній розпочнеться виконання</strong> . <strong>Клавіша швидкого доступу - "S".</strong></p>
<p>У наведеному вище прикладі відтворення розпочнеться з третього рядка (введіть | пароль | invalidPW). <strong>Ви можете мати лише одну початкову точку в одному тестовому сценарії.</strong></p>
<p>Початкова точка подібна до команди "Виконати", оскільки вона залежить від поточної сторінки. Точка початку не вдасться, якщо ви опинитеся не на тій сторінці.</p>
<a id="menu-9"></a>
<h2>Точки зупинки</h2>
<p>Точки зупинку - це показники, які вказують Selenium IDE, де автоматично зупинити тест. <strong>Клавіша швидкого доступу - "B".</strong></p>
<p>Жовте виділення означає, що поточний крок очікує на розгляд. Це доводить, що Selenium IDE призупинила виконання на цьому кроці. <strong>Ви можете мати кілька точок зупинки в одному тестовому випадку.</strong></p>
<a id="menu-10"></a>
<h2>Крок</h2>
<p>Це дозволяє виконувати наступні команди по черзі після паузи тесту. Давайте скористаємося сценарієм у попередньому розділі "Точки зупинки".</p>
<table>
<tbody>
<tr> <td width="50%"> </td> <td>
<p><strong>Перш ніж натиснути "Крок".</strong></p>
<p>Тестовий випадок призупиняється у рядку "clickAndWait | login".</p>
</td>
</tr>
<tr> <td width="50%"> </td> <td>
<p><strong>Після натискання кнопки "Крок".</strong></p>
<p>Запущений рядок "clickAndWait | login" та призупинення до наступної команди (verifyTitle | Sign-on: Mercury Tours).</p>
<p>Зверніть увагу, що наступний рядок призупинено, хоча там немає точки зупинки. Це головне призначення функції «Крок» - вона виконує наступні команди по черзі, щоб дати вам більше часу для перевірки результату після кожного кроку.</p>
</td>
</tr>
</tbody>
</table>
<a id="menu-11"></a>
<h2>Важливі речі, на які слід звернути увагу при використанні інших форматів у поданні джерела</h2>
<p><strong>Селен IDE добре працює лише з HTML - інші формати все ще перебувають у експериментальному режимі</strong> . Це <strong>НЕ рекомендується</strong> створювати і редагувати тести з використанням інших форматів в Source View , тому що є ще багато роботи , необхідно , щоб зробити її більш стабільною. Нижче наведені відомі помилки станом на версію 1.9.1.</p>
<ul>
<li>Ви не зможете виконати відтворення або повернутися до перегляду таблиці, якщо не повернетесь до HTML.</li>
<li>Єдиний спосіб безпечного додавання команд у вихідний код - це їх запис.</li>
<li>При зміні вихідного коду вручну весь його буде втрачено при переході на інший формат.</li>
<li>Хоча ви можете зберегти свій тестовий приклад, перебуваючи у режимі перегляду джерел, Selenium IDE не зможе його відкрити.</li>
</ul>
<p><strong>Рекомендований спосіб конвертувати тести Selenese - використовувати опцію "Експортувати тест як ..." у меню Файл, а не через подання джерела.</strong></p>
<a id="menu-12"></a>
<h2>Резюме</h2>
<ul>
<li>Тестові сценарії можна створити або записавши, або ввівши команди та параметри вручну.</li>
<li>При створенні сценаріїв вручну Firebug використовується для отримання локатора.</li>
<li>Кнопка Знайти використовується для перевірки можливості команди отримати доступ до правильного елемента.</li>
<li>Табличний вигляд відображає тестовий сценарій у табличній формі, тоді як Source View відображає його у форматі HTML.</li>
<li>Зміна подання джерела на формат, який не є HTML, досі експериментальний.</li>
<li>Не використовуйте Source View для створення тестів в інших форматах. Натомість використовуйте функції експорту.</li>
<li>Параметри не потрібні постійно. Це залежить від команди.</li>
<li>Існує три типи команд:</li>
<ul>
<li>Дії - безпосередньо взаємодіє з елементами сторінки</li>
<li>Accessors - "зчитує" властивість елемента і зберігає його у змінній</li>
<li>Твердження - порівнює фактичне значення з очікуваним</li>
</ul>
<li>Твердження мають три типи:</li>
<ul>
<li>Стверджувати - при відмові наступні кроки більше не виконуються</li>
<li>Перевірка - при відмові наступні кроки все ще виконуються.</li>
<li>WaitFor - проходить, якщо зазначена умова стає істинною протягом періоду очікування; інакше він зазнає невдачі</li>
</ul>
<li>Найпоширеніші команди:</li>
<ul>
<li>відчинено</li>
<li>click / clickAndWait</li>
<li>type / typeKeys</li>
<li>verifyTitle / assertTitle</li>
<li>verifyTextPresent</li>
<li>verifyElementPresent</li>
<li>verifyTable</li>
<li>waitForPageToLoad</li>
<li>waitForElementPresent</li>
</ul>
</ul>
</div>
</article>
<div id="container-5533149ee6411a5f99b370c693e87966"></div> </div>
</div>
</div>
</div>
</div>
<aside class="col-lg-4 sidebar sidebar--right">
<div class="widget widget-popular-posts">
<h2 class="widget-title">Популярні Пости</h2>
<ul class="post-list-small">
<li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__img-holder">
<div class="thumb-container thumb-100"><a href="/8225115-postgresql-data-types-character-numeric-binary-boolean" title="Типи даних PostgreSQL: Символ - Числові - Двійкові - Логічна" rel="bookmark"><img src="https://cdn.css-code.org/1845903/postgresql_data_types_character_numeric_binary_boolean.png.webp" loading="lazy" alt="Типи даних PostgreSQL: Символ - Числові - Двійкові - Логічна" title="Типи даних PostgreSQL: Символ - Числові - Двійкові - Логічна" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
</div>
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8225115-postgresql-data-types-character-numeric-binary-boolean" title="Типи даних PostgreSQL: Символ - Числові - Двійкові - Логічна" rel="bookmark">Типи даних PostgreSQL: Символ - Числові - Двійкові - Логічна 2025</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__img-holder">
<div class="thumb-container thumb-100"><a href="/8225116-how-to-create-and-drop-table-in-postgresql-examples" title="Як створити & Скинути таблицю в PostgreSQL (приклади)" rel="bookmark"><img src="https://cdn.css-code.org/3300914/how_to_create_ampamp_drop_table_in_postgresql_examples.png.webp" loading="lazy" alt="Як створити & Скинути таблицю в PostgreSQL (приклади)" title="Як створити & Скинути таблицю в PostgreSQL (приклади)" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
</div>
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8225116-how-to-create-and-drop-table-in-postgresql-examples" title="Як створити & Скинути таблицю в PostgreSQL (приклади)" rel="bookmark">Як створити & Скинути таблицю в PostgreSQL (приклади) 2025</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__img-holder">
<div class="thumb-container thumb-100"><a href="/8225117-distinct-in-postgresql-select-order-by-and-limit-examples" title="ВИЗНАЧЕННЯ в PostgreSQL: Виберіть - Замовити за & Обмеження (приклади)" rel="bookmark"><img src="https://cdn.css-code.org/5801901/distinct_in_postgresql_select_order_by_ampamp_limit_examples.png.webp" loading="lazy" alt="ВИЗНАЧЕННЯ в PostgreSQL: Виберіть - Замовити за & Обмеження (приклади)" title="ВИЗНАЧЕННЯ в PostgreSQL: Виберіть - Замовити за & Обмеження (приклади)" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
</div>
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8225117-distinct-in-postgresql-select-order-by-and-limit-examples" title="ВИЗНАЧЕННЯ в PostgreSQL: Виберіть - Замовити за & Обмеження (приклади)" rel="bookmark">ВИЗНАЧЕННЯ в PostgreSQL: Виберіть - Замовити за & Обмеження (приклади) 2025</a></h3>
</div>
</div>
</li>
</ul>
</div>
<div class="widget widget-popular-posts">
<h2 class="widget-title">Кращі огляди за місяць</h2>
<ul class="post-list-small">
<li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8224721-fibonacci-series-program-in-java-using-loops-and-recursion" title="Програма серії Фібоначчі на Java за допомогою циклів & Рекурсія" rel="bookmark">Програма серії Фібоначчі на Java за допомогою циклів & Рекурсія</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8224722-palindrome-program-in-java-check-number-is-palindrome-or-not" title="Програма Palindrome на Java: номер перевірки - Palindrome чи ні" rel="bookmark">Програма Palindrome на Java: номер перевірки - Palindrome чи ні</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8224723-bubble-sort-program-in-java-sorting-algorithm-example" title="Програма сортування міхурів на Java: Алгоритм сортування ПРИКЛАД" rel="bookmark">Програма сортування міхурів на Java: Алгоритм сортування ПРИКЛАД</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8224724-how-to-reverse-a-string-in-java-using-recursion" title="Як змінити рядок на Java за допомогою рекурсії" rel="bookmark">Як змінити рядок на Java за допомогою рекурсії</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8224725-selection-sorting-in-java-program-with-example" title="Сортування виділень у програмі Java на прикладі" rel="bookmark">Сортування виділень у програмі Java на прикладі</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8224726-difference-between-comparable-and-comparator-in-java" title="Різниця між порівнянним та порівняльним у Java" rel="bookmark">Різниця між порівнянним та порівняльним у Java</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8224727-java-vs-scala-what-is-the-difference" title="Java проти Scala: у чому різниця?" rel="bookmark">Java проти Scala: у чому різниця?</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8224728-top-100-java-interview-questions-and-answers-download-pdf" title="Топ 100 запитань та відповідей на інтерв’ю Java (Завантажити PDF)" rel="bookmark">Топ 100 запитань та відповідей на інтерв’ю Java (Завантажити PDF)</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8224729-top-80-java-collections-interview-questions-and-answers" title="80 найкращих колекцій Java - запитання для інтерв’ю & Відповіді" rel="bookmark">80 найкращих колекцій Java - запитання для інтерв’ю & Відповіді</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8224730-insertion-sort-algorithm-in-java-program-with-example" title="Алгоритм сортування вставки в програмі Java з прикладом" rel="bookmark">Алгоритм сортування вставки в програмі Java з прикладом</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8224733-top-22-groovy-interview-questions-and-answers" title="Найпопулярніші 22 запитання щодо інтерв’ю Groovy & Відповіді" rel="bookmark">Найпопулярніші 22 запитання щодо інтерв’ю Groovy & Відповіді</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8224734-top-25-jms-java-message-service-interview-questions-and-answers" title="25 найкращих JMS (Java Message Service) запитань щодо інтерв’ю & Відповіді" rel="bookmark">25 найкращих JMS (Java Message Service) запитань щодо інтерв’ю & Відповіді</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8224735-top-22-java-design-patterns-interview-questions-and-answers" title="Найпопулярніші 22 шаблони дизайну Java Питання для співбесіди & Відповіді" rel="bookmark">Найпопулярніші 22 шаблони дизайну Java Питання для співбесіди & Відповіді</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8224736-13-best-java-ide-2021-update" title="13 НАЙКРАЩИХ Java IDE (оновлення 2021 р.)" rel="bookmark">13 НАЙКРАЩИХ Java IDE (оновлення 2021 р.)</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8224737-java-tutorial-pdf-basics-pdf-for-beginners-download-now" title="Підручник з JAVA PDF: Основи PDF для початківців (Завантажити зараз)" rel="bookmark">Підручник з JAVA PDF: Основи PDF для початківців (Завантажити зараз)</a></h3>
</div>
</div>
</li>
</ul>
</div>
<div id="container-5533149ee6411a5f99b370c693e87966"></div> <div class="widget widget-popular-posts">
<h2 class="widget-title">Кращі Статті</h2>
<ul class="post-list-small">
<li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__img-holder">
<div class="thumb-container thumb-100"><a href="/8003846-insert-element-between-other-elements" title="Вставити елемент між іншими елементами - CSS-хитрощі" rel="bookmark"><img src="https://cdn.css-code.org/7964443/insert_element_between_other_elements_css-tricks.png.webp" loading="lazy" alt="Вставити елемент між іншими елементами - CSS-хитрощі" title="Вставити елемент між іншими елементами - CSS-хитрощі" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
</div>
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8003846-insert-element-between-other-elements" title="Вставити елемент між іншими елементами - CSS-хитрощі" rel="bookmark">Вставити елемент між іншими елементами - CSS-хитрощі 2025</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__img-holder">
<div class="thumb-container thumb-100"><a href="/8003847-jquery-json-getting-with-error-catching" title="JQuery JSON отримання з помилкою лову - CSS-хитрощі" rel="bookmark"><img src="https://cdn.css-code.org/1398450/jquery_json_getting_with_error_catching_css-tricks.png.webp" loading="lazy" alt="JQuery JSON отримання з помилкою лову - CSS-хитрощі" title="JQuery JSON отримання з помилкою лову - CSS-хитрощі" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
</div>
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8003847-jquery-json-getting-with-error-catching" title="JQuery JSON отримання з помилкою лову - CSS-хитрощі" rel="bookmark">JQuery JSON отримання з помилкою лову - CSS-хитрощі 2025</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div class="post-list-small__entry clearfix">
<div class="post-list-small__img-holder">
<div class="thumb-container thumb-100"><a href="/8003848-jquery-plugin-template" title="Шаблон плагіна jQuery - CSS-хитрощі" rel="bookmark"><img src="https://cdn.css-code.org/4083601/jquery_plugin_template_css-tricks.png.webp" loading="lazy" alt="Шаблон плагіна jQuery - CSS-хитрощі" title="Шаблон плагіна jQuery - CSS-хитрощі" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div>
</div>
<div class="post-list-small__body">
<h3 class="post-list-small__entry-title"><a href="/8003848-jquery-plugin-template" title="Шаблон плагіна jQuery - CSS-хитрощі" rel="bookmark">Шаблон плагіна jQuery - CSS-хитрощі 2025</a></h3>
</div>
</div>
</li>
</ul>
</div>
</aside> </div>
</div>
<footer class="footer footer--dark">
<div class="container">
<div class="footer__widgets">
<div class="row">
<div class="col-lg-4">
<div class="widget">
<h2 class="widget-title">Популярні Пости</h2>
<ul class="post-list-small">
<li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8003734-go-back-button" title="Кнопка "Назад" - CSS-хитрощі" rel="bookmark">Кнопка "Назад" - CSS-хитрощі</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8003735-inject-new-css-rules" title="Введіть нові правила CSS - CSS-хитрощі" rel="bookmark">Введіть нові правила CSS - CSS-хитрощі</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8003736-inject-html-from-a-string-of-html" title="Введіть HTML із рядка HTML - CSS-хитрощі" rel="bookmark">Введіть HTML із рядка HTML - CSS-хитрощі</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8003737-intervals" title="Інтервали - CSS-хитрощі" rel="bookmark">Інтервали - CSS-хитрощі</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8003738-input-with-disappearing-background-image" title="Введення з фоном, що зникає - CSS-хитрощі" rel="bookmark">Введення з фоном, що зникає - CSS-хитрощі</a></h3>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="widget">
<h2 class="widget-title">Вибір Редакції</h2>
<ul class="post-list-small">
<li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8004275-30-creating-and-sending-html-email" title="# 30: Створення та надсилання електронної пошти HTML - CSS-хитрощі" rel="bookmark"># 30: Створення та надсилання електронної пошти HTML - CSS-хитрощі</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8004276-38-basics-and-tips-on-designing-for-the-iphone" title="# 38: Основи та поради щодо проектування для iPhone - CSS-хитрощі" rel="bookmark"># 38: Основи та поради щодо проектування для iPhone - CSS-хитрощі</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8004277-39-how-to-use-sifr-3" title="# 39: Як користуватися sIFR 3 - CSS-хитрощі" rel="bookmark"># 39: Як користуватися sIFR 3 - CSS-хитрощі</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8004278-3-converting-a-photoshop-mockup-part-3-of-3" title="№3: Перетворення макета Photoshop (частина 3 з 3) - CSS-хитрощі" rel="bookmark">№3: Перетворення макета Photoshop (частина 3 з 3) - CSS-хитрощі</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8004279-44-hodgepodge-of-wordpress-tricks" title="# 44: Hodgepodge з трюків WordPress - CSS-хитрощі" rel="bookmark"># 44: Hodgepodge з трюків WordPress - CSS-хитрощі</a></h3>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="widget">
<h2 class="widget-title">Кращі Статті</h2>
<ul class="post-list-small">
<li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8003803-check-if-jquery-is-loaded" title="Перевірте, чи завантажено jQuery - CSS-хитрощі" rel="bookmark">Перевірте, чи завантажено jQuery - CSS-хитрощі</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8003804-clear-a-file-input" title="Очистити вхідний файл - CSS-хитрощі" rel="bookmark">Очистити вхідний файл - CSS-хитрощі</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8003806-clear-default-search-string-on-focus" title="Очистити рядок пошуку за замовчуванням у фокусі - CSS-хитрощі" rel="bookmark">Очистити рядок пошуку за замовчуванням у фокусі - CSS-хитрощі</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8003807-click-once-and-unbind" title="Клацніть один раз і скасувати - CSS-хитрощі" rel="bookmark">Клацніть один раз і скасувати - CSS-хитрощі</a></h3>
</div>
</div>
</li><li class="post-list-small__item">
<div>
<div>
<h3 class="post-list-small__entry-title"><a href="/8003809-combine-slide-and-fade-functions" title="Поєднання функцій слайдів та вицвітання - CSS-хитрощі" rel="bookmark">Поєднання функцій слайдів та вицвітання - CSS-хитрощі</a></h3>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<p>© Copyright uk.css-code.org, 2025 Вересень |
<a href="https://uk.css-code.org/about-site" title="Про сайт">Про сайт</a> |
<a href="https://uk.css-code.org/contacts" title="Контакти">Контакти</a> |
<a href="https://uk.css-code.org/privacy-policy" title="Політика конфіденційності">Політика конфіденційності</a>.
</p>
</div>
</div>
</footer>
<link href="https://css-code.org/template/css/style.min.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" /> </body>
</html>
|
