Sfida di riepilogo
Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 16 di 43.
Sfida
FacileDefinisci lo stile di una pagina di galleria usando le pseudo-classi strutturali. La tua sfida è:
- Aggiungere un bordo 3px solid rgb(0, 0, 255) alla prima immagine della galleria.
- Aggiungere una didascalia speciale con testo rosso alla ultima immagine della galleria.
- Usare
:nth-childper assegnare uno sfondo grigio (rgba(153, 153, 153, 1)) a ogni contenitore di immagini in posizione dispari.
Provalo tu
<!DOCTYPE html>
<html>
<head>
<title>Photo Gallery</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.gallery {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}
.image-container {
width: 200px;
padding: 10px;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
.caption {
margin-top: 8px;
font-size: 14px;
}
/* Write your CSS rules here */
</style>
</head>
<body>
<h1>My Photo Gallery</h1>
<div class="gallery">
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Sunrise_at_Newell_Beach%2C_2004.jpg" alt="Image 1">
<p class="caption">Sunrise at the beach</p>
</div>
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/db/Mt_Herschel%2C_Antarctica%2C_Jan_2006.jpg" alt="Image 2">
<p class="caption">Mountain landscape</p>
</div>
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/80/NYC_wideangle_south_from_Top_of_the_Rock.jpg" alt="Image 3">
<p class="caption">City skyline</p>
</div>
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/D%C3%BClmen%2C_Rorup%2C_NSG_Roruper_Holz_--_2021_--_8187-91.jpg" alt="Image 4">
<p class="caption">Forest trail</p>
</div>
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Mesquite_Sand_Dunes_in_Death_Valley.jpg" alt="Image 5">
<p class="caption">Desert sunset</p>
</div>
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Pressure_ridge_at_Cape_Columbia.jpg" alt="Image 6">
<p class="caption">Arctic wilderness</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 riepilogoEsercitati da solo: Playground Web