Публикуем свой сайт на GitHub Pages, чтобы домашку можно было открыть с любого устройства, и учимся ставить элементы в любое место страницы.
По инструкции создай свой сайт на GitHub Pages и добавь на него задания:
На главной странице сайта сделай ссылки на все задания — как на картинке.
🖥️ Это большое задание — делай его в VS Code на компьютере и открывай страницу в браузере. Не забудь выложить результат на свой сайт на GitHub!
Расположи четыре цветных квадрата лесенкой, как на картинке. Используй position: absolute и свойства top, left.
А потом разгадай шифр сейфа — и получи подсказку!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Тренируем позиционирование элементов</title>
<style>
.f {
position: absolute;
top: 10%;
left: 10%;
width: 10vw;
height: 10vh;
background-color: darkorange;
}
.s {
position: absolute;
top: 15%;
left: 15%;
width: 10vw;
height: 10vh;
background-color: green;
}
.t {
position: absolute;
top: 20%;
left: 20%;
width: 10vw;
height: 10vh;
background-color: blue;
}
.fo {
position: absolute;
top: 25%;
left: 25%;
width: 10vw;
height: 10vh;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="f"></div>
<div class="s"></div>
<div class="t"></div>
<div class="fo"></div>
</body>
</html>
Сделай так, чтобы шапка header прилипала к верху экрана при прокрутке: position: sticky и top: 0. Прокрути результат и проверь.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя страница</title>
<style>
body { margin: 0; }
header { background-color: #6d4aff; color: white; padding: 20px; font-size: 24px; position: sticky; top: 0; }
</style>
</head>
<body>
<header>Моя шапка</header>
<main>
<p>Абзац номер 1. Прокручивай ниже!</p>
<p>Абзац номер 2. Прокручивай ниже!</p>
<p>Абзац номер 3. Прокручивай ниже!</p>
<p>Абзац номер 4. Прокручивай ниже!</p>
<p>Абзац номер 5. Прокручивай ниже!</p>
<p>Абзац номер 6. Прокручивай ниже!</p>
<p>Абзац номер 7. Прокручивай ниже!</p>
<p>Абзац номер 8. Прокручивай ниже!</p>
<p>Абзац номер 9. Прокручивай ниже!</p>
<p>Абзац номер 10. Прокручивай ниже!</p>
<p>Абзац номер 11. Прокручивай ниже!</p>
<p>Абзац номер 12. Прокручивай ниже!</p>
<p>Абзац номер 13. Прокручивай ниже!</p>
<p>Абзац номер 14. Прокручивай ниже!</p>
<p>Абзац номер 15. Прокручивай ниже!</p>
<p>Абзац номер 16. Прокручивай ниже!</p>
<p>Абзац номер 17. Прокручивай ниже!</p>
<p>Абзац номер 18. Прокручивай ниже!</p>
<p>Абзац номер 19. Прокручивай ниже!</p>
<p>Абзац номер 20. Прокручивай ниже!</p>
<p>Абзац номер 21. Прокручивай ниже!</p>
<p>Абзац номер 22. Прокручивай ниже!</p>
<p>Абзац номер 23. Прокручивай ниже!</p>
<p>Абзац номер 24. Прокручивай ниже!</p>
<p>Абзац номер 25. Прокручивай ниже!</p>
<p>Абзац номер 26. Прокручивай ниже!</p>
<p>Абзац номер 27. Прокручивай ниже!</p>
<p>Абзац номер 28. Прокручивай ниже!</p>
<p>Абзац номер 29. Прокручивай ниже!</p>
<p>Абзац номер 30. Прокручивай ниже!</p>
</main>
</body>
</html>
Сделай красный кружок-значок с числом 3 в правом верхнем углу аватарки, как у сообщений в мессенджерах. Родителю .avatar дай position: relative, а значку .badge — position: absolute, top: 0, right: 0.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя страница</title>
<style>
.avatar { width: 120px; height: 120px; font-size: 90px; text-align: center; background-color: #eee; border-radius: 50%; position: relative; }
.badge { background-color: red; color: white; font-size: 20px; width: 34px; height: 34px; line-height: 34px; border-radius: 50%; position: absolute; top: 0; right: 0; }
</style>
</head>
<body>
<div class="avatar">
😺
<span class="badge">3</span>
</div>
</body>
</html>
Кнопка .up должна всегда висеть в правом нижнем углу экрана, даже при прокрутке: position: fixed, отступы 20px снизу и справа.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя страница</title>
<style>
.up { background-color: #ff4d8d; color: white; padding: 12px 16px; border-radius: 50%; text-decoration: none; font-size: 24px;
position: fixed; bottom: 20px; right: 20px; }
</style>
</head>
<body>
<h1 id="top">Длинная страница</h1>
<p>Строка 1</p>
<p>Строка 2</p>
<p>Строка 3</p>
<p>Строка 4</p>
<p>Строка 5</p>
<p>Строка 6</p>
<p>Строка 7</p>
<p>Строка 8</p>
<p>Строка 9</p>
<p>Строка 10</p>
<p>Строка 11</p>
<p>Строка 12</p>
<p>Строка 13</p>
<p>Строка 14</p>
<p>Строка 15</p>
<p>Строка 16</p>
<p>Строка 17</p>
<p>Строка 18</p>
<p>Строка 19</p>
<p>Строка 20</p>
<p>Строка 21</p>
<p>Строка 22</p>
<p>Строка 23</p>
<p>Строка 24</p>
<p>Строка 25</p>
<p>Строка 26</p>
<p>Строка 27</p>
<p>Строка 28</p>
<p>Строка 29</p>
<p>Строка 30</p>
<p>Строка 31</p>
<p>Строка 32</p>
<p>Строка 33</p>
<p>Строка 34</p>
<p>Строка 35</p>
<p>Строка 36</p>
<p>Строка 37</p>
<p>Строка 38</p>
<p>Строка 39</p>
<p>Строка 40</p>
<a class="up" href="#top">⬆</a>
</body>
</html>