Embedded Files
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Pagina di Esempio</title>
<style>
/* Stile per il corpo del documento */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* Stile per l'intestazione */
header {
background-color: #333; /* Colore di sfondo grigio scuro */
color: white;
text-align: center;
padding: 20px;
}
/* Stile per il titolo principale */
h1 {
font-size: 36px;
margin-top: 0;
}
/* Stile per main */
main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
/* Stile per i collegamenti all'ancoraggio */
.indice {
text-align: right;
margin-top: -10px;
}
.collegamento {
text-decoration: none;
color: #0077cc; /* Colore del collegamento */
margin-left: 20px;
}
/* Stile per le sezioni */
.sezione {
margin-top: 40px;
}
/* Stile per le figure geometriche */
.figure-geometriche {
width: 150px;
height: 150px;
display: inline-block;
margin-right: 40px;
margin-left: 40px;
}
.quadrato {
background-color: #ffcc00; /* Colore quadrato */
}
.rettangolo {
background-color: #ff9966; /* Colore rettangolo */
width: 200px;
}
.cerchio {
background-color: #99ccff; /* Colore cerchio */
border-radius: 50%; /* Forma circolare */
}
.triangolo {
width: 0;
height: 0;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 130px solid #66ff66; /* Colore triangolo e altezza */
}
/* Stile per le formule */
.formula {
font-weight: bold;
font-style: italic;
font-size: 18px;
}
/* Stile per la linea orizzontale */
.linea {
border: none;
height: 2px;
background-color: #333; /* Colore linea orizzontale */
margin-top: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<header>
<h1>Le figure geometriche</h1>
<div class="indice">
<a class="collegamento" href="#quadrato">Quadrato</a>
<a class="collegamento" href="#cerchio">Cerchio</a>
<a class="collegamento" href="#rettangolo">Rettangolo</a>
<a class="collegamento" href="#triangolo">Triangolo</a>
</div>
</header>
<main>
<div class="sezione" id="quadrato">
<h2>Quadrato</h2>
<div class="figure-geometriche quadrato"></div>
<ul>
<li><span class="formula">Area = lato * lato</span></li>
<li><span class="formula">Perimetro = 4 * lato</span></li>
</ul>
</div>
<hr class="linea">
<div class="sezione" id="cerchio">
<h2>Cerchio</h2>
<div class="figure-geometriche cerchio"></div>
<ul>
<li><span class="formula">Area = π * raggio * raggio</span></li>
<li><span class="formula">Perimetro = 2 * π * raggio</span></li>
</ul>
</div>
<hr class="linea">
<div class="sezione" id="rettangolo">
<h2>Rettangolo</h2>
<div class="figure-geometriche rettangolo"></div>
<ul>
<li><span class="formula">Area = base * altezza</span></li>
<li><span class="formula">Perimetro = 2 * (base + altezza)</span></li>
</ul>
</div>
<hr class="linea">
<div class="sezione" id="triangolo">
<h2>Triangolo Equilatero</h2>
<div class="figure-geometriche triangolo"></div>
<ul>
<li><span class="formula">Area = (lato * altezza) / 2</span></li>
<li><span class="formula">Perimetro = 3 * lato</span></li>
</ul>
</div>
</main>
</body>
</html>
Ritorna agli Esempi
Page updated
Google Sites
Report abuse