Макети сайтҳои одди яксутуна дар CSS

Дар ин дарс мо бо сохтани макети сайтҳои одди яксутуна машқ мекунем. Биёед, масалан, чунин макет созем:

Ба амалӣ гардондан шурӯъ кунем. Ҳар як макет қоидаан бо як диви умумӣ бо номи wrapper оғоз меёбад, ки тамоми дигари сайтро дар бар мегирад:

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

Дар ҳолати мо, wrapper ба маркази экран мувофиқ карда мешавад:

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="#">link text 1</a>
    <a href="#" class="active">link text 2</a>
    <a href="#">link text 3</a>
    <a href="#">link text 4</a>
    <a href="#">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="#">link text 1</a>
    <a href="#" class="active">link text 2</a>
    <a href="#">link text 3</a>
    <a href="#">link text 4</a>
    <a href="#">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 -ро интихоб кунед, зеро ки айнан он бояд фосилаҳоро байни элементҳо созад.

Вазифаҳои амалӣ