Практичні завдання по темі "Блокова верстка"

Завдання 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 коментар:

  1. ЧУДОВО!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1

    ВідповістиВидалити