Enkla enkelsidiga webbplatslayouter i CSS

I den här lektionen kommer vi att öva på att skapa enkla enkelsidiga webbplatslayouter. Låt oss, till exempel, göra en layout som ser ut så här:

Låt oss börja med implementationen. Varje layout börjar vanligtvis med en generell div med namnet wrapper, som innehåller hela resten av webbplatsen:

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

I vårt fall kommer wrappern att centreras på skärmen:

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

Den kommer också att ha en kant:

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

Låt oss nu skapa sidans grundläggande struktur. Den kommer att bestå av en meny och huvudinnehållet - content:

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

Låt oss lägga till innehållet i våra block:

html<div id="wrapper">
  <div id="menu">
    <a href="#">länktext 1</a>
    <a href="#" class="active">länktext 2</a>
    <a href="#">länktext 3</a>
    <a href="#">länktext 4</a>
    <a href="#">länktext 5</a>
  </div>
  <div id="content">
    <h1>Proin tristique lorem</h1>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>

Nu kan vi lägga till stilar för våra block. Låt oss lägga till stil för menyn:

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

Och nu lägger vi till stilar för innehållselementen:

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

Nu kan vi sätta ihop all kod:

html<div id="wrapper">
  <div id="menu">
    <a href="#">länktext 1</a>
    <a href="#" class="active">länktext 2</a>
    <a href="#">länktext 3</a>
    <a href="#">länktext 4</a>
    <a href="#">länktext 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 är mest bekvämt att ange marginaler från topp till botten. Till exempel, vi har en meny och innehåll, och mellan dem - tomt utrymme. Uppenbarligen, kan detta utrymme skapas av menyns nedre marginal, innehållets övre marginal, eller deras samtidiga påverkan. I det här fallet är det bättre att sätta nedre marginal för menyn, och för innehållet ta bort standard padding och margin för h1.

Råd 2

Barn bör inte skapa marginal mellan föräldrar. Till exempel, vi har en meny. Den nedre marginalen för denna meny kan skapas antingen med margin för div:en med menyn, eller margin för länkarna. Det är bättre att välja det första alternativet, eftersom länkar inte bör agera över förälderns huvuden.

Råd 3

Låt det finnas ett mellanrum mellan två element och i det här fallet finns det visuellt ingen skillnad, vad man ska välja för mellanrum - margin eller padding. I det här fallet välj margin, eftersom det är den som ska skapa mellanrum mellan element.

Praktiska uppgifter