Завдання із блогу Оксани Коваленко
Блокова модель CSS
Увага!
Під час роботи з комп'ютером дотримуйтеся правил безпеки та
санітарно-гігієнічних норм.
Завдання. Навчитись використовувати блокову
модель.
Хід виконання
Тренувальна вправа
1
1.
Створіть теку site-block. Відкрийте редактор коду та створіть у новій
теці файл index.html. Запишіть наступний
код:
<!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>
2.
Збережіть та перегляньте результат.
3.
Замініть згенерований рядок на 1-2 згенеровані абзаци «Lorem ipsum». Проаналізуйте
отриманий результат
Тренувальна вправа
2
1.
Замініть код на наступний
<!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>
2.
Перегляньте отриманий результат.
3.
Перемістіть згенерований абзац усередину тега <div class="inner"> Перегляньте
отриманий результат
4.
Скопіюйте згенерований
абзац усередину тега <div
class="main"> Перегляньте отриманий результат
5.
Проаналізуйте результати другої тренувальної вправи
Тренувальна вправа
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%;
margin-top: 50px;
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="сhild"> Проаналізуйте отриманий результат
Немає коментарів:
Дописати коментар