Passaggio 2: aggiungi un'intestazione

Successivamente, inserisci un'intestazione utilizzando qualsiasi '

' a '

” tag. Ad esempio, '

” aggiunge un'intestazione.

Passaggio 3: aggiungere dati all'elenco

Per inserire i dati sotto forma di elenco utilizzare il tasto “ etichetta ':

---

---

< div classe = 'animale domestico' >

< h1 > Elenco degli animali da compagnia < / h1 >

< quello > Gallina < / quello >

< quello > Anatra < / quello >

< quello > Cane < / quello >

< quello > Gatto < / quello >

< quello > Coniglio < / quello >

< / div >

L'output del suddetto codice è il seguente:

Ora, vai avanti verso la sezione CSS per definire lo stile dell'elenco.

Passaggio 4: stile dell'elemento '.pet-animal'.

Accedi al “

” elemento con l'ausilio della classe assegnata “ .pet-animale ” e applicare le proprietà elencate:

.pet-animale {

confine : 2px punteggiato rgb ( 230 , quindici , quindici ) ;

margine : 50 pixel ;

colore di sfondo : rgb ( 252 , 239 , 169 ) ;

}

Qui:

• “ confine La proprietà ” viene utilizzata per specificare il contorno intorno all'elemento.
• “ margine ” definisce lo spazio attorno al contorno dell'elemento.
• “ colore di sfondo ” assegna un colore sul retro dell'elemento.

L'immagine risultante mostra l'output del codice precedente:

Passaggio 5: Elenco stile aggiunto 'li'

Ora, accedi all'elenco dei ' div ” contenitore avente classe “ animale domestico ' usando ' .pet-animale > li ” e applicare le seguenti proprietà:

.pet-animale > quello {

visibilità : nascosto ;

opacità : 0.2 ;

transizione : visibilità 0s , opacità 0,5 sec lineare ;

}

Qui:

• Il ' visibilità I CSS vengono utilizzati per impostare la visibilità dell'elemento senza modificare il layout di un documento, come nascosto o visibile.
• “ opacità ” specifica la trasparenza di un elemento.
• “ transizione 'consente agli utenti di modificare i valori delle proprietà senza problemi per una determinata durata:

Passaggio 6: applicare la pseudo classe 'hover'.

Ora, applica il ' librarsi ” proprietà sulla lista:

.pet-animale : librarsi > quello {

visibilità : visibile ;

opacità : uno ;

}

Il ' : al passaggio del mouse I CSS sono una pseudo-classe che apporta modifiche in fase di esecuzione quando il puntatore del mouse viene spostato sull'elemento. Rendi visibile un elenco utilizzando il ' visibilità ” e impostare la trasparenza utilizzando il “ opacità ' Proprietà CSS nell'elenco al passaggio del mouse:

Si può osservare che abbiamo applicato con successo la transizione sul ' Schermo ' proprietà.

Conclusione

La transizione CSS non può essere applicata direttamente al ' Schermo ' proprietà. Tuttavia, può essere applicato in modo alternativo. Per fare ciò, aggiungi il tag elenco sul documento HTML, accedi all'elenco tramite il nome del tag e applica ' transizione ”, “ opacità ', e ' visibilità ” Proprietà CSS nell'elenco. Quindi, utilizza il ' : librarsi ” pseudo-classe e imposta il valore di visibilità come “ visibile ”. Questo post ha spiegato come la transizione viene applicata alla proprietà di visualizzazione CSS.