Πώς να δημιουργήσετε μια λίστα πολλαπλών επιπέδων σε HTML

Η δημιουργία μιας λίστας πολλαπλών επιπέδων σε HTML είναι πιο δύσκολη από τη δημιουργία μιας λίστας πολλαπλών επιπέδων σε έναν επεξεργαστή κειμένου, αλλά μπορεί ακόμα να επιτευχθεί χρησιμοποιώντας HTML και CSS. Παρακάτω ακολουθούν βήματα σχετικά με τον τρόπο δημιουργίας μιας λίστας πολλαπλών επιπέδων σε HTML με τη βοήθεια του CSS.

Πριν δοκιμάσετε τα παρακάτω βήματα, συνειδητοποιήστε ότι για να δημιουργήσετε μια λίστα πολλαπλών επιπέδων σε HTML, πρέπει να τοποθετήσετε τη λίστα σε άλλο στοιχείο λίστας. Επίσης, επειδή η HTML έχει είτε μια λίστα με κουκκίδες είτε μια λίστα αριθμών, αν θέλετε να αλλάξετε τον τύπο της λίστας, πρέπει να χρησιμοποιήσετε το CSS για να δημιουργήσετε έναν νέο τύπο στυλ.

Παράδειγμα HTML

Παρακάτω είναι ένα παράδειγμα του τρόπου με τον οποίο μπορεί να γίνει μια λίστα πολλαπλών επιπέδων σε HTML χρησιμοποιώντας HTML και το στυλ CSS που ορίζεται στις ετικέτες HTML. Σε αυτό το παράδειγμα, έχουμε δύο στοιχεία λίστας και στο δεύτερο στοιχείο λίστας μια άλλη ταξινομημένη λίστα με έναν τύπο στυλ λίστας χαμηλότερης άλφα για τη δημιουργία ενός στυλ λίστας a, b, κ.λπ.

  1. Πρώτα
  2. Δεύτερος 
    1. Δευτερόλεπτο του δεύτερου
    2. Ένας άλλος
  3. Τρίτος
  4. Τέταρτος

Σημείωση: Στο παραπάνω παράδειγμα, χρησιμοποιούμε ορισμένα πρόσθετα στυλ παρεμβολής και περιθωρίων για να βοηθήσουμε στην προσαρμογή στις παγκόσμιες τιμές CSS και να δώσουμε ένα παράδειγμα για το πώς μπορείτε να προσθέσετε ή να μειώσετε το χώρο και την εσοχή.

Παράδειγμα εξόδου

  1. Πρώτα
  2. Δεύτερος
    1. Δευτερόλεπτο του δεύτερου
    2. Ένας άλλος
  3. Τρίτος
  4. Τέταρτος

Παράδειγμα CSS και HTML

Η παραπάνω λύση λειτουργεί πολύ καλά αν χρειάζεται μόνο να δημιουργήσετε μια λίστα πολλαπλών επιπέδων μερικές φορές. Ωστόσο, αν σκοπεύετε να έχετε αρκετούς καταλόγους πολλαπλών επιπέδων σε ολόκληρο τον ιστότοπό σας, θα ήταν καλύτερο να συμπεριλάβετε τον κώδικα CSS, όπως στο παρακάτω παράδειγμα, στο αρχείο CSS. Στο παράδειγμά μας, δημιουργήσαμε δύο τάξεις που ονομάζουμε "ρωμαϊκά" και "τετράγωνα" και τα καλούμε στον κώδικα HTML.

Κωδικό CSS 

 .roman {τύπος τύπου λίστας: κάτω-ρωμανικός ·}. τετράγωνο {list-style-type: square; περιθώριο-αριστερά: -2em ·}

HTML κώδικα 

  • Πρώτα
  • Δεύτερος 
    • Δευτερόλεπτο του δεύτερου
    • Ένας άλλος
  • Τρίτος
  • Τέταρτος

Παράδειγμα εξόδου

  • Πρώτα
  • Δεύτερος
    • Δευτερόλεπτο του δεύτερου
    • Ένας άλλος
  • Τρίτος
  • Τέταρτος

Διαθέσιμες τιμές τύπου στυλ λίστας CSS

Ακολουθεί μια λίστα με άλλες τιμές τύπου στυλ λίστας CSS που μπορούν να χρησιμοποιηθούν στη θέση των παραδειγμάτων που δείξαμε νωρίτερα. Περιελάβαμε επίσης μια σύντομη περιγραφή κάθε τιμής.

Σημείωση: Όχι όλες αυτές οι τιμές λειτουργούν ή εμφανίζονται οι ίδιες σε όλα τα προγράμματα περιήγησης.

δίσκος - Μικρός συμπαγής κύκλος (φαίνεται παραπάνω).

κύκλος - Μικρός κενός κύκλος (φαίνεται παραπάνω).

τετράγωνο - Στερεό πλατεία.

δεκαδικό - δεκαδικό αριθμό που αρχίζει με "1." (όπως φαίνεται παραπάνω).

δεκαδικό μηδέν - δεκαδικό αριθμό που αρχίζει με 0 (π.χ. 01, 02, 03 κ.λπ.).

κατώτερο-ρωμαϊκό - πεζά ρωμαϊκό νούμερο ξεκινώντας με "i.".

ανώτερος-ρωμαϊκός - Άγνωστος ρωμαϊκός αριθμός που αρχίζει με "Ι".

κατώτερο-ελληνικό - πεζά ελληνικά.

κατώτερη-λατινική - πεζά λατινικά

ανώτερος-λατινικός - Μεγάλων Λατινικών

Αρμενική - Παραδοσιακή αρμενική αρίθμηση

georgian - Παραδοσιακή γεωργιανή αρίθμηση

lower-alpha - πεζά αλφαβητικά γράμματα που αρχίζουν με "a." (όπως φαίνεται παραπάνω).

upper-alpha - Αλφαβητικά γράμματα κεφαλαίων που αρχίζουν με "A.".

none - Δεν δείχνει τίποτα.