вівторок, 15 квітня 2025 р.

Створення меню в CSS

 

Приклад стилю для меню

body {
font-family: Arial, San-Serif;
font-size: 100%;
background-color: #F6F2FF;
}

h1,h2,footer, nav {
color: #E07BE0;

text-align: center;
}

p {
font-size: 20px;
line-height: 1.3em;
margin-top: 2.1em;
margin-bottom: 1;
margin-left: 10%;
margin-right: 10%;

color: #420039;
}
li {
display: inline-block;
}
li a {
  color: white;
  text-align: center;
 padding: 14px 16px;
  text-decoration: none;
}

#menu {
display: inline-block;
}
#menu a {
margin-right: 5px;
margin-left: 30%;
padding: 10px;
font: 15px Arial;
text-decoration: none;
color: #1437AD;
border: 1px solid #1437AD;
background-color: white;
}
#menu a:hover, #menu a.active {
color: blue;
background: yellow;
border: 1px solid red;
background-color: #F5F6FA;
}

Створення меню в CSS

У цьому уроці ми будемо практикуватися створювати меню сайтів. Давайте для прикладу зробимо наступне меню:



Для початку нам необхідно зробити HTML частину. Зробимо див, розмістивши в ньому посилання нашого меню:

<div id="menu"> <a href="#">link text 1</a> <a href="#">link text 2</a> <a href="#">link text 3</a> <a href="#">link text 4</a> <a href="#">link text 5</a> </div>

Як ви бачите на зразку, одне із посилань меню виділяється. Вона символізує те, що ми знаходимося на сторінці сайту, яка відповідає цьому пункту меню. Такі сторінки прийнято виділяти за допомогою класу active:

<div id="menu"> <a href="#">link text 1</a> <a href="#" class="active">link text 2</a> <a href="#">link text 3</a> <a href="#">link text 4</a> <a href="#">link text 5</a> </div>

Давайте тепер розмістимо наші посилання в ряд:

#menu { display: flex; }

Напишемо стилі наших посилань:

#menu a { margin-right: 5px; padding: 10px; font: 15px Arial; text-decoration: none; color: #1437AD; border: 1px solid #1437AD; background-color: white; }

Зробимо реакцію посилань на наведення:

#menu a:hover { color: blue; border: 1px solid blue; background-color: #F5F6FA; }

Вигляд активного посилання збігається з видом посилання наведення. Об'єднаємо ці стилі разом:

#menu a:hover, #menu a.active { color: blue; border: 1px solid blue; background-color: #F5F6FA; }

Зберемо код разом і отримаємо код для нашого меню:

<div id="menu"> <a href="#">link text 1</a> <a href="#" class="active">link text 2</a> <a href="#">link text 3</a> <a href="#">link text 4</a> <a href="#">link text 5</a> </div>li { display: inline-block;}li a { color: white; text-align: center; padding: 14px 16px; text-decoration: none; }#menu { display: flex; } #menu a { margin-right: 5px; padding: 10px; font: 15px Arial; text-decoration: none; color: #1437AD; border: 1px solid #1437AD; background-color: white; } #menu a:hover, #menu a.active { color: blue; border: 1px solid blue; background-color: #F5F6FA; }

четвер, 2 січня 2025 р.

Тиждень безпеки в Інтернеті

6 клас

1) Повторення правил безпеки в Інтернеті (презентація)

Безпечний інтернет.pptx

https://youtu.be/VWKWM23fdg0?si=qiUiCGyfEelOPzm-

2) Виконання інтерактивних вправ на знання безпеки в Інтернеті

Вправа-пазл 

Вікторина "Безпечний Інтернет"     

переглянути відео та записати відповіді на питання

безпечно або ні


Понеділок, 3 лютого, 2 урок 6-А  та 4 урок 6-Б, 25 кабінет

7 клас

1) "Шахраям це подобається" (відео)

https://drive.google.com/drive/folders/1t1czW_rpxe4z8U2gNcDuRLEOUZH-xP6u

Після перегляду відео дайте відповідь на запитання: що саме подобається шахраям і чому?

2) Виконання вправ на знання безпеки в Інтернеті

Колекція вправ: ttps://learningapps.org/display?v=ppsyqihit20

Вівторок, 4 лютого, 2 урок 7-В, 4 урок 7-Б, 6 урок 7-А 25 кабінет, 15 кабінет (Сидорчук В.В., Аністратенко Т.В.)

8 клас гра "Майстер кібербезпеки"

Монетка

Секрети створення паролів від Ремуса Люпина

Інтерактивна вікторина "Дізнайся, хто ти у світі Гарі Потера" 

Середа, 5 лютого, 3 урок 8-Б, 25 кабінет (Сидорчук В.В., Аністратенко Т.В.)

9 клас

Кросворд від Гарі Потера

загрози Інтернет

Середа, 5 лютого, 7 урок 9-Б, 15, 25 кабінет (Сидорчук В.В., Аністратенко Т.В.)

10 клас


Вікторина Kahoot “Алогомора чи Протего” від Герміони 

Середа, 5 лютого -1-2 уроки 10-Б, 10-А - кабінет 25 (Аністратенко Т.В.)

11 клас

1) Магічний ритм фінансових операцій - ці звуки мають свою ритмічну гармонію, що супроводжує наші покупки та заощадження

Адвент-календар чарівника з платіжної безпеки

https://app.myadvent.net/calendar?id=r5egrzqsylaltypr01f3y659gty9eww7&door=0

Четвер, 6 лютого,  7 урок 11-Б, кабінет 25, Аністратенко Т.В.

понеділок, 30 грудня 2024 р.

Вітаю з перемогою в обласному конкурсі "Інформатик"

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

Польський Данііл та Холоменюк Кіра, 10-А клас - ІІІ місцев номінації "Веб-дизайн".

Ксенія Примаченко-Каланча, 9-А клас - ІІІ місце в номінації "3D графіка. Blender".

Бажаю вам здоров'я та щастя, нехай збуваються ваші мрії і наша спільна мрія, подальших успіхів вам у відкритті світу ІТ.



Створення меню в CSS

  Приклад стилю для меню body { font-family: Arial, San-Serif; font-size: 100%; background-color: #F6F2FF; } h1,h2,footer, nav { color: #E07...