Paraqitje të thjeshta një-kolone të faqeve në CSS

Në këtë mësim do të praktikojmë krijimin e paraqitjeve të thjeshta një-kolone të faqeve. Le të bëjmë, për shembull, një paraqitje si kjo:

Le të fillojmë zbatimin. Çdo paraqitje zakonisht fillon me një div të përgjithshëm me emrin wrapper, që përmban të gjithë faqen e mbetur:

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

Në rastin tonë, wrapper do të rreshtohet në qendër të ekranit:

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

Gjithashtu do të ketë një kufi:

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

Tani le të bëjmë strukturën kryesore të faqes. Ajo do të përbëhet nga menuja dhe përmbajtja kryesore - content:

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

Le të shtojmë përmbajtjen e blloqeve tona:

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>

Tani mund t'u shtojmë stilet blloqeve tona. Le të shtojmë stil menysë:

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

Dhe tani le të shtojmë stilet elementeve të përmbajtjes:

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

Tani mund të mbledhim të gjithë kodin së bashku:

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

Këshilla 1

Është më e përshtatshme të jepen hapësirat nga lart poshtë. Për shembull, ne kemi një menu dhe përmbajtje, dhe midis tyre - hapësirë të lirë. Natyrisht, kjo hapësirë mund të bëhet nga hapësira e poshtme e menusë, hapësira e sipërme e përmbajtjes, ose ndikimi i njëkohshëm i tyre. Në këtë rast është më mirë të caktohet hapësira e poshtme e menusë, dhe përmbajtjes të hiqet padding dhe margin sipas parazgjedhjes për h1.

Këshilla 2

Pasardhësit nuk duhet të formojnë hapësirë midis prindërve. Për shembull, ne kemi një menu. Hapësira e poshtme e kësaj menu mund të formohet ose nga margin i div-it me menu, ose nga margin i lidhjeve. Është më mirë të zgjidhet varianti i parë, pasi që lidhjet nuk duhet të veprojnë përmes kokës së prindit.

Këshilla 3

Le të themi se midis dy elementeve ka hapësirë dhe në këtë rast vizualisht nuk ka ndryshim, çfarë të zgjidhet për hapësirë - margin ose padding. Në këtë rast zgjidhni margin, pasi është pikërisht ai që duhet të krijojë hapësira midis elementeve.

Detyra praktike