Enkle en-kolonne nettstedslayouter i CSS

I denne leksjonen skal vi øve på å lage enkle en-kolonne nettstedslayouter. La oss for eksempel lage en slik layout:

La oss begynne implementeringen. Hver layout starter som regel med en generell div med navnet wrapper som inneholder hele resten av nettstedet:

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

I vårt tilfelle vil wrapperen være sentrert på skjermen:

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

Den vil også ha en kant:

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

La oss nå lage hovedstrukturen til siden. Den vil bestå av en meny og hovedinnholdet:

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

La oss legge til innholdet i blokkene våre:

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>

Nå kan vi legge til stiler for blokkene våre. La oss legge til stil for menyen:

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

Og nå legger vi til stiler for innholdselementene:

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

Nå kan vi sette sammen all koden:

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

Råd 1

Det er mest praktisk å angi avstander ovenfra og ned. For eksempel har vi en meny og innhold, og mellom dem - tomt rom. Åpenbart kan dette rommet lages med bunnmargin på menyen, toppmarginen til innholdet, eller deres samtidige påvirkning. I dette tilfellet er det bedre å angi bunnmarginen til menyen, og fjerne topp padding og margin som standard for h1.

Råd 2

Underelementer skal ikke danne avstand mellom foreldreelementer. For eksempel har vi en meny. Bunnmarginen til denne menyen kan dannes enten med margin på div-en med menyen, eller margin på lenkene. Det er bedre å velge det første alternativet, siden lenkene ikke skal handle over hodet på foreldreelementet.

Råd 3

Anta at det er en avstand mellom to elementer og i dette tilfellet er det visuelt ingen forskjell på hva du velger for avstand - margin eller padding. I dette tilfellet velger du margin, siden det er denne som skal lage avstander mellom elementer.

Praktiske oppgaver