Δημιουργία Λίστας στην HTML5
Η HTML παρέχει έναν τρόπο για τη δημιουργία τόσο μιας ταξινομημένης λίστας (με στοιχεία που μετρούν προς τα πάνω, 1, 2, 3...) όσο και μιας μη ταξινομημένης λίστας με κουκκίδες αντί για αριθμούς. Οι λίστες είναι ένας καλός τρόπος για να επισημοποιήσεις μια λίστα στοιχείων και να αφήσεις το στυλ της HTML να κάνει τη δουλειά για εσένα.
Ταξινομημένες λίστες.
Για να δημιουργίσεις μία ταξινομημένη λίστα θα χρεισιμοποιήσεις τα στοιχεία (elements) <ol>..</ol> και <li>..</li> όπως στο παρακάτω παράδειγμα.
See the Pen HTML5 - List by Moustas Lab (@Moustas-Lab) on CodePen.
Οι ταξινομημένες λίστες έχουν ένα χαρακτηριστικό το «type» το οποίο καθορίζει τη σύμβαση αρίθμησης που θα χρησιμοποιηθεί.
Για να μετρήσετε χρησιμοποιώντας αριθμούς, χρησιμοποιήστε type=«1»:
See the Pen Untitled by Moustas Lab (@Moustas-Lab) on CodePen.
Για να μετρήσετε με κεφαλαία γράμματα, χρησιμοποιήστε type=«A»:
See the Pen HTML5 - List /Ordered example 3 by Moustas Lab (@Moustas-Lab) on CodePen.
Για να μετρήσετε με πεζά γράμματα, χρησιμοποιήστε type=«a»:
See the Pen HTML5 - List /Ordered example 4 by Moustas Lab (@Moustas-Lab) on CodePen.
Για να μετρήσετε με κεφαλαίους λατινικούς αριθμούς, χρησιμοποιήστε type=«I»:
See the Pen HTML5 - List /Ordered example 5 by Moustas Lab (@Moustas-Lab) on CodePen.
Για να μετρήσετε με πεζούς λατινικούς αριθμούς, χρησιμοποιήστε type=«i»:
See the Pen HTML5 - List /Ordered example 6 by Moustas Lab (@Moustas-Lab) on CodePen.
Μη ταξινομημένες λίστες
Για να δημιουργίσεις μία μη ταξινομημένη λίστα θα χρεισιμοποιήσεις τα στοιχεία (elements) <ul>..</ul> και <li>..</li> όπως στο παρακάτω παράδειγμα
See the Pen HTML5 - List /Unordered example 1 by Moustas Lab (@Moustas-Lab) on CodePen.
Για να αλλάξουμε τα χαρακτηριστικά στυλ της λίστας, μπορούμε να χρησιμοποιήσουμε το χαρακτηριστικό CSS που ονομάζεται list-style-type. Οι διαθέσιμοι τύποι είναι οι εξής:
- disc
- circle
- square
- none
See the Pen HTML5 - List /Unordered example 2 by Moustas Lab (@Moustas-Lab) on CodePen.
Ακολουθεί ένα παράδειγμα του τύπου λίστας τύπου circle:
See the Pen HTML5 - List /unordered example 3 by Moustas Lab (@Moustas-Lab) on CodePen.
Ακολουθεί ένα παράδειγμα τύπου square λίστας:
See the Pen HTML5 - List /unordered example 4 by Moustas Lab (@Moustas-Lab) on CodePen.
Ακολουθεί ένα παράδειγμα του τύπου στυλ λίστας none:
See the Pen HTML5 - List /unordered example 5 by Moustas Lab (@Moustas-Lab) on CodePen.
Αν θέλεις να μάθεις πλήρως την HTML5 διάλεξε ένα από τα Webinars μου που τρέχουν αυτή τη στιγμή πατώντας εδώ Webinars