Layout di siti web a colonna singola semplici in CSS
In questa lezione ci eserciteremo a creare layout di siti web a colonna singola semplici. Facciamo, ad esempio, un layout come questo:
Iniziamo l'implementazione. Ogni layout di solito
inizia con un div generale chiamato
wrapper, che contiene l'intero resto del sito:
<div id="wrapper">
</div>
Nel nostro caso il wrapper sarà centrato rispetto allo schermo:
#wrapper {
width: 800px;
margin: 50px auto;
}
Avrà anche un bordo:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Ora creiamo la struttura principale della pagina. Consisterà in un menu e nel contenuto principale:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Aggiungiamo il contenuto dei nostri blocchi:
<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>
Ora possiamo aggiungere gli stili ai nostri blocchi. Aggiungiamo lo stile al menu:
#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;
}
E ora aggiungiamo gli stili agli elementi del contenuto:
#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;
}
Ora possiamo mettere insieme tutto il codice:
<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>
#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;
}
Suggerimento 1
È più conveniente dare i margini dall'alto verso il basso.
Ad esempio, abbiamo un menu e un contenuto,
e tra di loro - uno spazio vuoto. Ovviamente,
questo spazio può essere creato dal margine inferiore
del menu, dal margine superiore del contenuto,
o dalla loro influenza simultanea. In questo caso
è meglio impostare il margine inferiore al menu, e al contenuto
rimuovere padding e margin di default
per h1.
Suggerimento 2
Gli elementi figlio non dovrebbero formare margini tra
gli elementi genitore. Ad esempio, abbiamo un menu.
Il margine inferiore di questo menu può essere formato
o dal margin del div con il menu, o dal margin
dei link. È meglio scegliere la prima opzione, poiché
i link non dovrebbero agire oltre la testa
del genitore.
Suggerimento 3
Supponiamo che tra due elementi ci sia un margine
e in questo caso visivamente non c'è differenza
in cosa scegliere per il margine - margin o padding.
In questo caso scegli margin, poiché
è proprio lui che dovrebbe creare margini tra
gli elementi.
