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:
<div id="wrapper">
</div>
I vårt fall kommer wrappern att centreras på skärmen:
#wrapper {
width: 800px;
margin: 50px auto;
}
Den kommer också att ha en kant:
#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:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Låt oss lägga till innehållet i våra block:
<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:
#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:
#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:
<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>
#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.
