Βήμα 2: Προσθέστε μια επικεφαλίδα

Στη συνέχεια, εισαγάγετε μια επικεφαλίδα χρησιμοποιώντας οποιαδήποτε '

' προς την '

ετικέτες '. Για παράδειγμα, '

' προσθέτει μια επικεφαλίδα.

Βήμα 3: Προσθήκη δεδομένων στη λίστα

Για να εισαγάγετε τα δεδομένα με τη μορφή λίστας, χρησιμοποιήστε το « <αυτό> Ετικέτα ':

---

---

< div τάξη = 'κατοικίδιο ζώο' >

< h1 > Κατάλογος ζώων συντροφιάς < / h1 >

< ότι > Κότα < / ότι >

< ότι > Πάπια < / ότι >

< ότι > Σκύλος < / ότι >

< ότι > Γάτα < / ότι >

< ότι > Κουνέλι < / ότι >

< / div >

Η έξοδος του παραπάνω κώδικα είναι η εξής:

Τώρα, προχωρήστε προς την ενότητα CSS για το στυλ της λίστας.

Βήμα 4: Στυλ στοιχείου '.pet-animal'.

Πρόσβαση στο '

'στοιχείο με τη βοήθεια της τάξης που έχει ανατεθεί' .κατοικίδιο-ζώο ” και εφαρμόστε τις ιδιότητες που αναφέρονται:

.κατοικίδιο-ζώο {

σύνορο : 2 εικονοστοιχεία διάσπαρτος rgb ( 230 , δεκαπέντε , δεκαπέντε ) ;

περιθώριο : 50 εικονοστοιχεία ;

χρώμα του φόντου : rgb ( 252 , 239 , 169 ) ;

}

Εδώ:

• ' σύνορο Η ιδιότητα ” χρησιμοποιείται για τον καθορισμό του ορίου γύρω από το στοιχείο.
• ' περιθώριο ” ορίζει το χώρο γύρω από το όριο του στοιχείου.
• ' χρώμα του φόντου ” εκχωρεί ένα χρώμα στο πίσω μέρος του στοιχείου.

Η εικόνα που προκύπτει δείχνει την έξοδο του παραπάνω κώδικα:

Βήμα 5: Λίστα Προστιθέμενης Στυλ 'li'

Τώρα, αποκτήστε πρόσβαση στη λίστα των ' div “κοντέινερ με κλάση” κατοικίδιο-ζώο ' χρησιμοποιώντας ' .κατοικίδιο-ζώο > λι ” και εφαρμόστε τις παρακάτω ιδιότητες:

.κατοικίδιο-ζώο > ότι {

ορατότητα : κρυμμένος ;

αδιαφάνεια : 0.2 ;

μετάβαση : ορατότητα 0s , αδιαφάνεια 0,5 δευτ γραμμικός ;

}

Εδώ:

• Ο ' ορατότητα Το CSS χρησιμοποιείται για τη ρύθμιση της ορατότητας του στοιχείου χωρίς αλλαγή της διάταξης ενός εγγράφου, όπως κρυφό ή ορατό.
• ' αδιαφάνεια ” προσδιορίζει τη διαφάνεια ενός στοιχείου.
• ' μετάβαση ” επιτρέπει στους χρήστες να αλλάζουν ομαλά τις τιμές ιδιοκτησίας για μια δεδομένη διάρκεια:

Βήμα 6: Εφαρμόστε την κλάση ψευδο 'hover'.

Τώρα, εφαρμόστε το ' φτερουγίζω ” ακίνητο στη λίστα:

.κατοικίδιο-ζώο : φτερουγίζω > ότι {

ορατότητα : ορατός ;

αδιαφάνεια : ένας ;

}

Ο ' :φτερουγίζω Το CSS είναι μια ψευδο-κλάση που κάνει αλλαγές στο χρόνο εκτέλεσης όταν ο δείκτης του ποντικιού μετακινείται πάνω από το στοιχείο. Κάντε μια λίστα ορατή χρησιμοποιώντας το ' ορατότητα ' και ορίστε τη διαφάνεια χρησιμοποιώντας το ' αδιαφάνεια ” Ιδιότητες CSS στη λίστα με το δείκτη του ποντικιού:

Μπορεί να παρατηρηθεί ότι εφαρμόσαμε με επιτυχία τη μετάβαση στο ' απεικόνιση ” ιδιοκτησία.

συμπέρασμα

Η μετάβαση CSS δεν μπορεί να εφαρμοστεί απευθείας στο ' απεικόνιση ” ιδιοκτησία. Ωστόσο, μπορεί να εφαρμοστεί με εναλλακτικό τρόπο. Για να το κάνετε αυτό, προσθέστε την ετικέτα λίστας στο έγγραφο HTML, αποκτήστε πρόσβαση στη λίστα ανά όνομα ετικέτας και εφαρμόστε ' μετάβαση », « αδιαφάνεια ', και ' ορατότητα ” Ιδιότητες CSS στη λίστα. Στη συνέχεια, χρησιμοποιήστε το ' : αιωρούνται ' ψευδοκλάση και ορίστε την τιμή ορατότητας ως ' ορατός '. Αυτή η ανάρτηση έχει εξηγήσει πώς εφαρμόζεται η μετάβαση στην ιδιότητα εμφάνισης CSS.