CSS-de ýönekeý bir sütünli web sahypa maketleri

Bu sapakda biz ýönekeý bir sütünli web sahypa maketlerini döretmekde çalışarys. Geliň, mysal üçin, şeýle bir maket dözeteliň:

Amala aşyrmaga başlaýaly. Her bir maket, adatça, galan ähli web sahypany öz içine alýan wrapper atly umumy div bilen başlanýar:

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

Bizim ýagdaýymyzda wrapper ekranyň merkezine deňelener:

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

Onuň hem araçägi bolýar:

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

Geliň indi sahypanyň esasy gurluşyny düzeliň. Ol menýu we esasy mazmun – kontentden ybarat bolar:

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

Bloklarymyzyň mazmunyny goşalyň:

html<div id="wrapper">
  <div id="menu">
    <a href="#">baglanyşyk teksti 1</a>
    <a href="#" class="active">baglanyşyk teksti 2</a>
    <a href="#">baglanyşyk teksti 3</a>
    <a href="#">baglanyşyk teksti 4</a>
    <a href="#">baglanyşyk teksti 5</a>
  </div>
  <div id="content">
    <h1>Proin tristique lorem</h1>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>

Indi bloklarymyza stili goşup bilersiňiz. Geliň menýu üçin stili goşalyň:

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;
}

Indi bolsa kontent elementlerine stili goşalyň:

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;
}

Indi ähli kody bilelikde ýygnap bileris:

html<div id="wrapper">
  <div id="menu">
    <a href="#">baglanyşyk teksti 1</a>
    <a href="#" class="active">baglanyşyk teksti 2</a>
    <a href="#">baglanyşyk teksti 3</a>
    <a href="#">baglanyşyk teksti 4</a>
    <a href="#">baglanyşyk teksti 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;
}

Maslahat 1

Boşluklary ýokardan aşak beriş iň amatlydyr. Mysal üçin, bizde menýu we kontent bar, we olaryň arasynda – boş meýdan. Bu meýdanyň menýunyň aşaky boşlugy, kontentyň ýokarky boşlugy bilen ýa-da olaryň birwagtly täsiri bilen düzülip biljekdigi aýdyň. Bu ýagdaýda menýu üçin aşaky boşluk, kontent üçin bolsa h1 üçin başlangyç boýunça bolan padding we margin aýyrmak has gowy.

Maslahat 2

Warislar ata-eneleriň arasyndaky boşlugy döretmemeli. Mysal üçin, bizde menýu bar. Bu menýunyň aşaky boşlugyny ýa-da margin menýu bilen div, ýa-da baglanyşyklaryň margin-i bilen düzüp bilersiňiz. Birinji warianty saýlamak has gowy, sebäbi baglanyşyklar atanyň başyndan geçip işlemeli däl.

Maslahat 3

Iki element arasynda boşluk bardyr we bu ýagdaýda boşluk üçin näme saýlamaly – margin ýa-da padding görünişi üçin tapawudy ýok. Bu ýagdaýda margin-i saýlaň, sebäbi elementleriň arasynda boşluk döretmeli bolan şonyň özi.

Amaly wezipeler