розмітка HTML
У заголовку буде розміщуватися опис і навігація:
Причина, по якій така "невпорядкована" структура розміщується в кінці, полягає в тому, що навігація стає доступною за допомогою загального селектора сусідів (
) І можна встановлювати свій колір для кожного пункту.
Основна ідея полягає в використанні псевдо-класу: target для того, щоб організувати перехід до поточної секції. В описаному прикладі використовується вислизання панелей зверху. У демонстрації побудовано ще два різних ефекту переходу.
Спочатку задамо стилі для заголовка і навігації. Потрібно зберігати їх положення в одній точці, хоча все інше буде рухатися.
Всі секції, крім #home. мають клас panel. Тут буде використовуватися перехід, коли елемент отримує клас "targeted". Трюк полягає в використанні від'ємного значення для поля в класі "normal" і відмова від поля в псевдо-класі: target. Додаванням переходу ми змушуємо панель вислизати зверху, коли її вибирають:
Тепер визначимо стиль класу content:
Для того, щоб змінити колір поточного елемента навігації будемо використовувати псевдо-клас: target із загальним селектором сусідів, щоб отримати відповідний пункт:
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!