Практическая работа № 55
Тема: «Создание и оформление меню»
Цель урока: научиться применять CSS-эффекты при создании и оформлении меню сайта.
Интернет-источники: https://htmlbook.ru/practical/sozdanie-menyu-s-tenyu
|
Создайте меню, показанное на рис. 1, на HTML5 с помощью тегов <ul>, <li> и с соблюдением следующих условий.
- рисунки не используются, всё оформление реализуется средствами CSS;
- меню должно корректно отображаться в современных браузерах.
- ширина меню фиксирована и равна 200px.
Рис. 1. Меню
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My work</title>
<link rel="stylesheet" type="text/css" href="Mywork.css">
</head>
<body>
<ul class="menu">
<li>Азу по-татарски</li>
<li>Зразы</li>
<li>Баранья грудинка, тушенная с картофелем</li>
<li>Бефстроганов</li>
<li>Бифштекс с яйцом</li>
</ul>
</body>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
.menu{
background: #F9E497;
list-style-type: none;
height: 150px;
width: 200px;
margin: 50px;
border: 1px solid black;
border-radius: 10px;
box-shadow: 4px 4px 0px 1px #880000;
}
ul li{
padding-left: 7px;
padding-top: 6px;
color: #880000;
|
|
Оформления пунктов меню при наведении
Оформить меню, при наведении на пункты которого меняется внешний вид (рис.2)
Рис.2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
#navbar {
margin: 0;
padding: 0;
list-style-type: none;
width: 100px;
}
#navbar li {
border-left: 10px solid #666;
border-bottom: 1px solid #666;
}
#navbar a {
background-color: #949494;
color: #fff;
padding: 5px;
text-decoration: none;
font-weight: bold;
border-left: 5px solid #33ADFF;
display: block;
}
#navbar a:hover {
background-color: #666;
border-left: 5px solid #3333FF;
}
</style>
</head>
<body>
<ul id="navbar">
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">О нас</a></li>
</ul>
</body>
</html>
Дата занятия 03.04.2020
Добрый день! На этом уроке мы научиться создавать различные эффекты к элементам веб-страниц.
Ваши задачи:
1. Повторить теоретический материал на тему: «Каскадные таблицы стилей», «Связь тегов HTML и CSS».
2. Ознакомиться с инструкционной картой.
3. Выполнить практические задания (задача 1-2).
4. Сделать скриншоты получившихся работ.
5. Ответить на контрольные вопросы.
6. Оформить отчет.
7. Скинуть преподавателю на электронную почту или в группу ВК.
Практическая работа № 56
Тема: «Создание и оформление меню (продолжение)»
Цель урока: научиться применять CSS-эффекты к спискам в меню навигации.
Интернет-источники: https://htmlbook.ru/practical/obratnaya-svyaz, картинка https://htmlbook.ru/files/feedback.jpg
|
Сделайте блок с фиксированным положением, который не будет изменять свою позицию при прокрутке страницы. Изначально блок практически полностью скрыт (рис. 1), но при наведении на него курсора мыши он плавно выезжает вправо (рис. 2). Если курсор убрать, то блок плавно возвращается в исходное положение.
Блок имеет фиксированные размеры и должен корректно отображаться в современных браузерах.
Рис. 1. Исходное положение блока
| 
Рис. 2. Положение блока при наведении на него курсора
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Обратная связь</title>
<style>
body {
margin: 0;
}
.feedback {
border-radius: 0 10px 10px 0;
width: 300px;
background: #333; /* Цвет фона */
color: #fff; /* Цвет текста */
position: fixed; /* Фиксируем на одном месте */
min-height: 100px; /* Минимальная высота */
top: 100px; left: -320px;
border-right: 20px solid #fc0; /* Оранжевая граница справа */
padding: 10px;
transition: left 1s; /* Анимация */
}
.feedback img {
float: left;
margin: 0 10px 0 0;
}
.feedback::after {
content: 'Обратная связь'; /* Выводим текст */
color: #000; /* Цвет надписи */
position: absolute; /* Абсолютное позиционирование */
right: -60px; bottom: 50px;
transform: rotate(-90deg); /* Поворачиваем текст */
-webkit-transform: rotate(-90deg);
}
.feedback:hover {
left: 0; /* При наведении сдвигаем вправо */
}
</style>
</head>
<body>
<div class="feedback">
<img src="images/feedback.jpg" alt="" width="100" height="100">
Если у вас возникли вопросы по этому коду, звоните мне по телефону:
555-3298. Звонок платный.
</div>
</body>
</html>
|
Создать собственное меню, используя эффекты анимации.
КОНТРОЛЬНЫЕ ВОПРОСЫ:
1. Как задать блоку тень?
2. С помощью каких свойств достигается эффект изменения цвета у гиперссылки?
3. Какую привязку css стилей в этой работе вы использовали?