inuasparwil.ru

Як зробити просту навігацію на html5 і css3.

Як зробити просту навігацію на HTML5 та CSS3.

Відео: Адаптивна верстка # 4 | адаптивне меню

Всім привіт! Сьогодні ми розглянемо, як зробити просту навігацію на HTML5 та CSS3, використовуючи псевдоклас : target.


lang="En"gt;

charset="UTF-8"gt;
HTML5 CSS3 Navigation
rel="Stylesheet"href="Style.css"gt;


(Section [id = "section ;"] gt; h1gt; lipsum10 ^ p * 2gt; lipsum150) * 10

Тут буде дуже багато тексту, тому я не став вставляти вже готовий код, а прописав команду для плагіна Emmet. Якщо ви не знаєте, що це таке, то ви можете прочитати про це тут.




Після виконання команди, ви отримаєте кілька секцій, у кожній з яких свій унікальний id. Усередині кожної секції буде заголовок і текст.

Тепер пропишемо стилі для кожної секції.

Відео: CSS3 для початківців | # 10 Створення горизонтального меню

@keyframes flash {
0%{
background-color: yellow-
}
50%{
background-color: transparent-
}
}

section:target {
animation: flash 3s1 ease-in-out-
}


Усе! Тепер спробуйте ввести в адресному рядку, наприклад, # Section-10, і ви перейдете до даної секції, яка підсвітить жовтим кольором протягом 3 секунд і потім плавно згасне.

Вам залишилося лише зробити посилання, де вказати id кожної секції в атрибуті href.

Отже, а у мене на цьому все. Дякую за увагу і удачі!

Поділися в соціальних мережах:

Схожі
Як додати ефект переходу акордеону на чистому css3.Як додати ефект переходу акордеону на чистому css3.
Як зробити самостійно перегортаються текст на css3.Як зробити самостійно перегортаються текст на css3.
Перевірка підтримки нововведень html5 і css3.Перевірка підтримки нововведень html5 і css3.
Чи потрібно зараз використовувати html5 і css3Чи потрібно зараз використовувати html5 і css3
Як зробити прогрес бар на чистому css3.Як зробити прогрес бар на чистому css3.
Навіщо потрібен псевдоклас target в css3.Навіщо потрібен псевдоклас target в css3.
Як зробити прелоадер на чистому css3.Як зробити прелоадер на чистому css3.
Як зробити слайдер на чистому css3 без використання jаvascript.Як зробити слайдер на чистому css3 без використання jаvascript.
Як зробити блоки зі слайдер ефектом на чистому css3.Як зробити блоки зі слайдер ефектом на чистому css3.
Вийшов курс "html5 і css3 з нуля до гуру"Вийшов курс "html5 і css3 з нуля до гуру"
» » Як зробити просту навігацію на html5 і css3.