Layout a griglia per schede
Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 42 di 43.
Sfida
FacileCrea un semplice layout a 2 colonne per le schede usando CSS Grid.
- Le schede devono essere visualizzate in due colonne uguali.
- Deve esserci un po' di spazio tra le schede.
Provalo tu
<html>
<head>
<title>Grid Card Layout</title>
<style>
.card {
background-color: #0252c9;
padding: 16px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* Add your styles here */
</style>
</head>
<body>
<div class="card-container">
<div class="card">
<h3>Card 1</h3>
<p>This is the first card with some text.</p>
</div>
<div class="card">
<h3>Card 2</h3>
<p>This is the second card with more content.</p>
</div>
</div>
</body>
</html>
Tutte le lezioni di Padronanza di CSS
1Padronanza dei selettori – Combinazioni
IntroduzioneSelettore discendenteSelettore figlioSelettore fratello adiacenteSelettore fratello generaleSfida di ripasso2Pseudo-classi interattive
Pseudo-classiEffetti al passaggio del mouseEffetti di focusStili attiviSfida di riepilogo3Classi pseudo-strutturali
Classi pseudo-strutturaliSelezionare il primo figlioSelezionare l'ultimo figlioIl potere degli schemi: usare nth-childSfida di riepilogo6Pagina di destinazione
Stilizzare la sezione dell’intestazioneStilizzare il pulsanteLayout delle sezioniLayout delle schedeAggiungere gli ultimi ritocchi9Sfide finali
Evidenziare il menu attivoRighe alternate nella tabellaEffetto hover sul pulsanteLayout a griglia per schedeImmagine hero sfocataEsercitati da solo: Playground Web