Praksis på layouter med HTML og CSS
La oss øve på å lage layouter ved å fylle dem med innhold. La oss for eksempel lage følgende layout:
La oss først lage hovedstrukturen til layouten:
<div class="wrapper">
<header>
...
</header>
<div class="container">
<aside class="left">
left
</aside>
<main>
...
</main>
<aside class="right">
right
</aside>
</div>
<footer>
site.com
</footer>
</div>
La oss nå ta for oss headeren. Som vi ser på eksempelet vil headeren inneholde nettstedets navn og en meny. Disse blokkene er plassert med samme avstand fra venstre kant. Det er logisk i dette tilfellet å gruppere dem med en felles forelder, og flytte disse blokkene som en enhet:
<div class="wrapper">
<header>
<div class="block">
<div class="sitename"></div>
<nav></nav>
</div>
</header>
</div>
La oss legge til innholdet i headerblokkene:
<div class="wrapper">
<header>
<div class="block">
<div class="sitename">site.com</div>
<nav>
<a href="#">home</a>
<a href="#" class="active">blog</a>
<a href="#">photos</a>
<a href="#">about us</a>
<a href="#">contacts</a>
</nav>
</div>
</header>
</div>
La oss nå skrive stilene for headerblokkene. Vi skal ikke sette en fast høyde på headeren - la den utvides av sitt eget innhold:
header {
border: 1px solid black;
}
.block {
margin: 20px 0 50px 220px;
}
.sitename {
margin-bottom: 10px;
font: 20px Arial;
}
nav {
display: flex;
width: 600px;
border: 1px solid black;
}
La oss skrive koden som lager tre kolonner i containeren. Vi skal ikke sette en fast høyde på innholdet - la den formes av sitt eget innhold:
.container {
display: flex;
}
main {
width: 660px;
padding: 20px;
border: 1px solid black;
}
.left {
width: 200px;
margin-right: 20px;
padding: 20px;
border: 1px solid black;
}
.right {
width: 200px;
margin-left: 20px;
padding: 20px;
border: 1px solid black;
}
La oss nå skrive de resterende stilene for layouten vår og få løsningen på oppgaven vår:
<div class="wrapper">
<header>
<div class="block">
<div class="sitename">site.com</div>
<nav>
<a href="#">home</a>
<a href="#" class="active">blog</a>
<a href="#">photos</a>
<a href="#">about us</a>
<a href="#">contacts</a>
</nav>
</div>
</header>
<div class="container">
<aside class="left">
left
</aside>
<main>
<h1>Our blog</h1>
<p>
...
</p>
<p>
...
</p>
<p>
...
</p>
<p>
...
</p>
<p>
...
</p>
</main>
<aside class="right">
right
</aside>
</div>
<footer>
site.com
</footer>
</div>
* {
box-sizing: border-box;
}
.wrapper {
width: 1100px;
margin: 30px auto;
border: 1px solid black;
}
header {
border: 1px solid black;
}
.container {
display: flex;
}
main {
width: 660px;
padding: 20px;
border: 1px solid black;
}
.left {
width: 200px;
margin-right: 20px;
padding: 20px;
border: 1px solid black;
}
.right {
width: 200px;
margin-left: 20px;
padding: 20px;
border: 1px solid black;
}
footer {
padding: 30px 0;
border: 1px solid black;
text-align: center;
}
.block {
margin: 20px 0 50px 220px;
}
.sitename {
margin-bottom: 10px;
font: 20px Arial;
}
nav {
display: flex;
width: 600px;
border: 1px solid black;
}
nav a {
padding: 10px;
color: blue;
text-decoration: none;
font: 15px Arial;
}
nav a:hover, nav a.active {
color: red;
text-decoration: underline;
}
main h1 {
font: 20px "Times New Roman";
}
main p {
margin: 10px 0;
text-align: justify;
font: 15px Arial;
}
Praktiske oppgaver
Last ned layouten fra følgende lenke 1.zip Åpne den i nettleseren og gjenskiv siden etter dette eksempelet.
Last ned layouten fra følgende lenke 2.zip Åpne den i nettleseren og gjenskiv siden etter dette eksempelet.
