Завдання №3
(1/1 бал)
Опис завдання:
Створити горизонтальне меню. Параметр float: left або float: right не використовувати.
Зразок
Для виконання завдання скопіюйте шаблон в робочу область та замініть коментарі на Вашу реалізацію:
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Вивчаємо CSS</title>
<style>
body{
padding: 30px;
}
nav {
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax (must be last) */
display: inline-block;
}
ul, li{
margin: 0;
padding: 0;
}
a{
color: white;
font-weight: bold;
}
li {
list-style-type: none;
padding: 10px;
border: 1px solid white;
/* додайте стилі тут */
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
</ul>
</nav>
</body>
</html>
Завдання №4
(1/1 бал)
Опис завдання:
Створити горизонтальне меню, яке реагує на наведення курсору. Колір тексту повинен змінюватись на червоний (red), а також повинно з'являтися підкреслення тексту.
Зразок
Для виконання завдання скопіюйте шаблон в робочу область та замініть коментарі на Вашу реалізацію:
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Вивчаємо CSS</title>
<style>
body{
padding: 30px;
color: white;
}
nav {
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax (must be last) */
display: inline-block;
}
ul, li{
margin: 0;
padding: 0;
}
li {
list-style-type: none;
padding: 10px;
border: 1px solid white;
display: inline-block;
}
a {
color: white;
text-decoration: none;
}
li:hover a {
/* додайте стилі тут */
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
<li><a href="#">Текст</a></li>
</ul>
</nav>
</body>
</html>