Завдання 1:
Створити малюнок із зпозиційованих блоків як на зображенні
Вихідний код HTML такий:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Блочна верстка CSS</title>
<link rel="stylesheet" href="style_house.css">
</head>
<body>
<div class="wrap">
<div class="tree">
<div class="one"> </div>
<div class="two"> </div>
<div class="three"> </div>
<div class="four"></div>
</div>
<div class="scene">
<div class="roof"></div>
<div class="house">
<div class="door"></div>
</div>
</div>
</div>
</body>
</html>
Файл CSS частковий, потребує допрацювання
.wrap{ width: 700px;
margin:100px auto;
}
.tree, .scene{
/* розмістити блоки в один рядок*/
}
.tree{
width:150px;
height:250px;
/*border: 1px solid red;*/
position: ?;
}
.one{
width: 0;
height: 0;
border-style: solid;
border-width: 25px0 80px 25px;
border-color: #095205 ;
position: ?;
left:?;
}
.two{
width: 0;
height: 0;
border-style: solid;
border-width: 100px0 40px 40px;
border-color: #095205;
position: ?;
top:?px;
?:35px;
}
.three{
width: 0;
height: 0;
border-style: ?;
border-width: 0 50px 50px 120px;
border-color: #095205 ;
?: absolute;
?:100px;
?:25px;
}
.four{
width:20px;
height:30px;
background-color: 331304;
position:?;
top:?;
?: 65px;
}
.scene {
width: 350px;
height: 300px;
margin: 0 auto;
position:? ;
border:1px solid red;/* */
}
.roof {
width: 0;
height: 0;
border-style: solid;
border-width: 100px 100px;0 100px
border-color: FA6114 transparent;
position:?;
?:0;
left:?;
}
.house {
width: 200px;
height: 200px;
background-color: #92F6F7;
position:?;
?:100px;
?:70px;
}
.door {
width: 50px;
height: 100px;
position: ?;
top:100px;
?:?;
?-color: #8A2E07;
}
Завдання 2
Створити зображення світлофору:
ЧУДОВО!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1
ВідповістиВидалити