ЗАВДАННЯ: навчитися використовувати блокову модель.
Вправа №1
1.
Створіть теку site-block.
2.
Відкрийте редактор коду й створіть у
теці файл index.html.
3.
Запишіть код:
<!DOCTYPE html>
<html>
<head>
<title> ONE
BLOCK </title>
</head>
<body>
<style
type="text/css">
.one{
width: 70%;
background: yellow;
margin-top: 10%;
margin-left: 15%;
}
</style>
<div
class="one">
ДОДАЙТЕ ЗГЕНЕРОВАНИЙ РЯДОК
"Lorem Ipsum"
</div>
</body>
</html>
4.
Збережіть файл і перегляньте
результат.
5.
Замініть згенерований рядок на
один-два згенерованих абзаци Lorem Ipsum.
6.
Проаналізуйте отриманий результат.
Вправа №2
1.
Замініть код на поданий нижче.
Перегляньте отриманий результат.
2.
Перемістіть згенерований абзац
усередину тега <div class =
«inner»>. Перегляньте отриманий результат.
<!DOCTYPE
html>
<html>
<head>
<title> INNER
</title>
<meta charset="utf-8">
</head>
<body>
<style type="text/css">
body {
margin: 0;
}
.main {
margin-top: 110px;
width: 80%;
height: 600px;
margin-left: 10%;
background: lightgreen;
}
.inner{
width: 60%;
height: 400px;
background: yellow;
margin-left: 20%;
}
.header{
width: 100%;
height: 100px;
background-color: violet;
position: fixed;
top: 0;
}
</style>
<div class="header" > </div>
<div class="main">
<div class="inner> </div>
</div>
ДОДАЙТЕ
ЗГЕНЕРОВАНИЙ РЯДОК "Lorem Ipsum"
</body>
</html>
3.
Скопіюйте згенерований абзац
усередину тега <div
class="main">. Перегляньте
отриманий результат
4.
Проаналізуйте результати
тренувальної вправи № 2.
Вправа №3
1. Замініть
код на поданий:
<!DOCTYPE html>
<html>
<head>
<title> Parent-child </title>
</head>
<body>
<style type="text/css">
body {
margin: 0;
}
.parent{
width: 80%;
background: yellow;
margin-left: 10%;
position: relative;
}
.child{
width: 50%;
height: 200px;
background: lightgreen;
position: absolute;
bottom: 20px;
right: 20px;
left: auto;
top: auto;
z-index: 9000;
}
</style>
<div class="child" > </div>
<div class="parent">
ДОДАЙТЕ ЗГЕНЕРОВАНИЙ РЯДОК
"Lorem Ipsum"
</div>
</body>
</html>
2.
Збережіть і перегляньте результат.
3.
Скопіюйте згенерований абзац
усередину тега <div class="child">. Проаналізуйте
отриманий результат.
4.
Запишіть здійснений вами аналіз
результатів трьох тренувальних вправ у текстовий документ і надішліть.