Простыя аднакалонкавыя макеты сайтаў у CSS

У даным уроке мы будзем практыкавацца ствараць простыя аднакалонкавыя макеты сайтаў. Давайце, напрыклад, зробім вось такі макет:

Прыступім да рэалізацыі. Кожны макет як правіла пачынаецца з агульнага дыва з назвай wrapper, які змяшчае ўвесь астатні сайт:

html<div id="wrapper">
  
</div>

У нашым выпадку враппер будзе выраўнены па цэнтры экрана:

css#wrapper {
  width: 800px;
  margin: 50px auto;
}

Таксама ён будзе мець мяжу:

css#wrapper {
  width: 800px;
  margin: 50px auto;
  border: 1px solid black;
}

Давайце цяпер зробім асноўную структуру старонкі. Яна будзе складацца з меню і асноўнага змесціва - кантэнту:

html<div id="wrapper">
  <div id="menu">
    
  </div>
  <div id="content">
    
  </div>
</div>

Дадамо змесціва нашых блокаў:

html<div id="wrapper">
  <div id="menu">
    <a href="/by/">link text 1</a>
    <a href="/by/" class="active">link text 2</a>
    <a href="/by/">link text 3</a>
    <a href="/by/">link text 4</a>
    <a href="/by/">link text 5</a>
  </div>
  <div id="content">
    <h1>Proin tristique lorem</h1>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>

Цяпер можна дадаць стылі нашым блокам. Давайце дадамо стыль менюшцы:

css#menu {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  background-color: #484848;
}
#menu a {
  margin: 0 5px;
  padding: 15px 25px;
  text-decoration: none;
  color: #fff;
  font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
  color: #484848;
  background-color: #fff;
}

А цяпер дадамо стылі элементам кантэнту:

css#content {
  padding: 0 30px 20px;
}
#content h1 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
}
#content p {
  padding: 0 10px;
  margin-bottom: 5px;
  font: 18px/1.3 Arial;
  text-align: justify;
}

Можам цяпер сабраць увесь код разам:

html<div id="wrapper">
  <div id="menu">
    <a href="/by/">link text 1</a>
    <a href="/by/" class="active">link text 2</a>
    <a href="/by/">link text 3</a>
    <a href="/by/">link text 4</a>
    <a href="/by/">link text 5</a>
  </div>
  <div id="content">
    <h1>Proin tristique lorem</h1>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>

css#wrapper {
  width: 800px;
  margin: 50px auto;
  border: 1px solid black;
}

#menu {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  background-color: #484848;
}
#menu a {
  margin: 0 5px;
  padding: 15px 25px;
  text-decoration: none;
  color: #fff;
  font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
  color: #484848;
  background-color: #fff;
}

#content {
  padding: 0 30px 20px;
}
#content h1 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
}
#content p {
  padding: 0 10px;
  margin-bottom: 5px;
  font: 18px/1.3 Arial;
  text-align: justify;
}

Парада 1

Зручней за ўсё даваць водступы зверху ўніз. Напрыклад, у нас ёсць менюшка і кантэнт, а паміж імі - пустая прастора. Відавоўдна, што гэтая прастора можа быць зроблена ніжнім водступам менюшкі, верхнім водступам кантэнту, ці іх адначасовым уплывам. У гэтым выпадку лепш задаць ніжні водступ менюшцы, а кантэнту забраць верхні padding і margin па змаўчанні для h1.

Парада 2

Патомкі не павінны фарміраваць водступ паміж бацькамі. Напрыклад, у нас ёсць менюшка. Ніжні водступ гэтай менюшкі можна сфарміраваць альбо margin дыва з меню, альбо margin спасылак. Лепш выбраць першы варыянт, так як спасылкі не павінны дзейнічаць праз галаву бацькі.

Парада 3

Хай паміж двума элементамі ёсць водступ і ў даным выпадку візуальна няма розніцы, што выбраць для водступу - margin ці padding. У гэтым выпадку выбірайце margin, так як менавіта ён павінен ствараць водступы паміж элементамі.

Практычныя заданні