Παράδειγμα περιγραφής Css μιας λίστας με κουκκίδες. HTML: Λίστα με αρίθμηση και κουκκίδες

- 4,5 από 5 με βάση 2 ψήφους

Πολύ συχνά, ορισμένες πληροφορίες σε έναν ιστότοπο πρέπει να παρουσιάζονται με τη μορφή λιστών.

Οι λίστες σάς επιτρέπουν να οργανώσετε και να συστηματοποιήσετε διάφορες πληροφορίες και να τις παρουσιάσετε στον επισκέπτη σε μια βολική μορφή.

Οι λίστες σε HTML διατίθενται σε τρεις ποικιλίες: λίστες με κουκκίδες, αριθμημένες λίστες και λίστες ορισμών. Ας δούμε πώς να τα δημιουργήσουμε με τη σειρά.

Λίστα με κουκκίδες.

Αυτός ο τύπος λίστας χρησιμοποιείται συχνότερα. Η λίστα με κουκκίδες σε HTML δημιουργείται χρησιμοποιώντας ετικέτες

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

  Ο κωδικός της λίστας με κουκκίδες θα μοιάζει με αυτό:

  • Αυτή η επιλογή είναι
  • Αυτή η επιλογή
  • Αυτό το είδος επιλογής

  Μπορείτε να προσπαθήσετε να δημιουργήσετε μια σελίδα HTML χρησιμοποιώντας αυτόν τον κώδικα και για εσάς, το αποτέλεσμα θα είναι η ακόλουθη λίστα:

  

  Όπως μπορείτε να δείτε, κάθε στοιχείο λίστας τοποθετείται σε μια νέα γραμμή, με ορισμένες εσοχές να δημιουργούνται στα αριστερά, πάνω και κάτω. Κάθε στοιχείο λίστας αρχίζει με ένα δείκτη, ο δείκτης μπορεί να είναι ένας γεμάτος κύκλος (χρησιμοποιείται από προεπιλογή), ένας κύκλος ή ένα τετράγωνο. Στην ετικέτα

  Υπάρχει ένα χαρακτηριστικό type, το οποίο χρησιμοποιείται για να ορίσετε το στυλ του δείκτη. Αυτό το χαρακτηριστικό έχει τις ακόλουθες έννοιες:
  • δίσκος - κύκλος?
  • κύκλος - κύκλος?
  • τετράγωνο - τετράγωνο.

  Η τιμή του δίσκου είναι η προεπιλεγμένη.

  Ένα παράδειγμα δημιουργίας λίστας με κουκκίδες με δείκτες κύκλων:

  • Αυτή η επιλογή είναι
  • Αυτή η επιλογή
  • Αυτό το είδος επιλογής

  Ως αποτέλεσμα, η λίστα θα έχει την ακόλουθη μορφή:

  

  Δημιουργία λίστας με κουκκίδες με τετράγωνους δείκτες:

  • Αυτή η επιλογή είναι
  • Αυτή η επιλογή
  • Αυτό το είδος επιλογής

  Η λίστα θα μοιάζει με:

  

  Το χαρακτηριστικό type μπορεί να εφαρμοστεί σε περισσότερα από μια ετικέτα

  , αλλά και στην ετικέτα
  • . Με αυτόν τον τρόπο μπορείτε να δημιουργήσετε μια λίστα με μια ποικιλία από κουκκίδες.
    • Αυτή η επιλογή είναι
    • Αυτή η επιλογή
    • Αυτό το είδος επιλογής

    Το αποτέλεσμα θα είναι το εξής:

    

    Αριθμημένες λίστες.

    Οι αριθμημένες λίστες σε HTML είναι λίστες στις οποίες κάθε στοιχείο έχει έναν σειριακό αριθμό, δημιουργούνται αριθμημένες λίστες χρησιμοποιώντας μια ετικέτα

    και φωλιάζει στις ετικέτες του

    1. 1. Πρώτη γραμμή
       2. Δεύτερη γραμμή
       3. Τρίτη γραμμή

       Η λίστα μοιάζει με αυτό:

       

       Από προεπιλογή, η αρίθμηση είναι με αραβικούς αριθμούς. Αλλά η ετικέτα

       Υπάρχει μια ιδιότητα τύπου, χρησιμοποιώντας τις τιμές της οποίας μπορείτε να κάνετε αρίθμηση με κεφαλαία (type="A") ή πεζά (type="a") με λατινικά γράμματα, λατινικούς αριθμούς στους πάνω (type="I" ) και χαμηλότερο (type="i" ) καταχωρητή.

       Παρακάτω παρατίθενται συντομευμένες εκδόσεις του κώδικα και ο τύπος αρίθμησης που μπορεί να είναι σε μία ή την άλλη περίπτωση.

       Προβολή λίστας:

       Προβολή λίστας:

       

       Αρίθμηση με πεζά γράμματα του λατινικού αλφαβήτου:

       Προβολή λίστας:

       

       Προβολή λίστας:

       

       Προβολή λίστας:

       

       Λίστα ορισμών σε HTML.

       Ένας ειδικός τύπος λίστας είναι οι λίστες ορισμού. Διαφέρουν στο ότι κάθε στοιχείο λίστας αποτελείται από δύο στοιχεία, έναν όρο και ένα κείμενο που αποκαλύπτει το νόημά του. Αυτές οι λίστες δημιουργούνται χρησιμοποιώντας ετικέτες

       . Ετικέτα

       δημιουργεί ένα κοντέινερ για τη λίστα, ετικέτα

       ορίζει τον όρο και την ετικέτα

       περιγραφή ή ορισμός ενός όρου.

       Αυτή η λίστα είναι γραμμένη ως εξής:

       Όρος 1

       Ορισμός 1

       Όρος 2

       Ορισμός του όρου 2

       Όρος 3

       Ορισμός 3

       Το αποτέλεσμα θα είναι η παρακάτω λίστα:

       

       Όπως μπορείτε να δείτε, αυτό δημιουργεί την κατάλληλη εσοχή για τον όρο και το κείμενο ορισμού.

       Ένθετες ή πολυεπίπεδες λίστες σε HTML.

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

       Για παράδειγμα, εδώ είναι ο κώδικας που ενσωματώνει αριθμημένες λίστες μέσα σε στοιχεία λίστας με κουκκίδες.

       • Αυτή η επιλογή είναι
         1. Πρώτη γραμμή
         2. Δεύτερη γραμμή
         3. Τρίτη γραμμή
       • Αυτή η επιλογή
         1. Πρώτη γραμμή
         2. Δεύτερη γραμμή
         3. Τρίτη γραμμή
       • Αυτό το είδος της επιλογής
         1. Πρώτη γραμμή
         2. Δεύτερη γραμμή
         3. Τρίτη γραμμή

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

       Στυλ λίστας κουκκίδων CSS.

       λίστα-στυλ-τύπου

       list-style-type:δίσκος | κύκλος | πλατεία | δεκαδικό | κατώτερο ρωμαϊκό | άνω-ρωμαϊκός | κατώτερο-άλφα | άνω-άλφα | κανένα ;

       Σημασία:

       δίσκος – λίστα με κουκκίδες με τη μορφή γεμάτου κύκλου

       κύκλος – λίστα με κουκκίδες με τη μορφή μη συμπληρωμένου κύκλου

       τετράγωνο – μια λίστα με κουκκίδες με τη μορφή γεμάτου τετραγώνου

       δεκαδική – αριθμημένη λίστα με αραβικούς αριθμούς (1,2,3, κ.λπ.)

       ανώτερο-ρωμαϊκό – αριθμημένη λίστα με μεγάλους ρωμαϊκούς αριθμούς (I, II, III, IV, κ.λπ.)

       κατώτερη ρωμαϊκή – αριθμημένη λίστα με μικρούς λατινικούς αριθμούς (i,ii,iii,iv, κ.λπ.)

       άνω άλφα – αριθμημένη λίστα με κεφαλαία γράμματα (Α, Β, Γ, κ.λπ.)

       πεζό άλφα – αριθμημένη λίστα με πεζά γράμματα (a,b,c, κ.λπ.)

       κανένας – κανένας δείκτης.

       Παράδειγμα:

       • Πίστεψε στο καλύτερο, περίμενε το χειρότερο.
       • Η ζωή είναι μια ασθένεια, με μοιραία έκβαση.
       • Ποτε μην λεσ ποτε.

       
       
       

       Αποτέλεσμα:

       Υπάρχουν περιπτώσεις που η εμφάνιση ενός δείκτη στη λίστα πρέπει να αφαιρεθεί. Για να το κάνετε αυτό, γράψτε στον κώδικα CSS

       list-style-type:κανένας;

       Παράδειγμα:

       • Πίστεψε στο καλύτερο, περίμενε το χειρότερο.
       • Ποτε μην λεσ ποτε.

       
       
       

       Αποτέλεσμα:

       

       Μπορείτε να αντικαταστήσετε τους συνήθεις δείκτες στη λίστα με τις δικές σας εικόνες. Αυτό μπορεί να γίνει χρησιμοποιώντας την ιδιότητα list-style-image.

       λίστα-στυλ-εικόνα

       λίστα-στυλ-εικόνα: url(image.png);

       Παράδειγμα:

       • Πίστεψε στο καλύτερο, περίμενε το χειρότερο.
       • Η ζωή είναι μια ασθένεια με θανατηφόρο κατάληξη.
       • Ποτε μην λεσ ποτε.

       
       
       

       Αποτέλεσμα:

       

       Μπορείτε επίσης να ορίσετε την απόσταση της λίστας με κουκκίδες από το κείμενο. Αυτό μπορεί να γίνει χρησιμοποιώντας την ιδιότητα padding-left στον επιλογέα li.

       Παράδειγμα:

       • Πίστεψε στο καλύτερο, περίμενε το χειρότερο.
       • Η ζωή είναι μια ασθένεια με θανατηφόρο κατάληξη.
       • Ποτε μην λεσ ποτε.

       
       
       

       Αποτέλεσμα:

       

       Η επόμενη εργασία είναι να αλλάξετε το χρώμα του δείκτη χωρίς να αλλάξετε το χρώμα του κειμένου. Πώς είναι αυτό δυνατόν; Το χρώμα του δείκτη μπορεί να αλλάξει προσθέτοντας μια ετικέτα στη δοκιμή .
       Μοιάζει με αυτό:

       κείμενο

       Παράδειγμα:

       • Πίστεψε στο καλύτερο, περίμενε το χειρότερο.
       • Η ζωή είναι μια ασθένεια με θανατηφόρο κατάληξη.
       • Ποτε μην λεσ ποτε.

       
       
       

       Αποτέλεσμα:

       

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

       Παράδειγμα:

       • Πιστέψτε στο καλύτερο, περιμένετε το χειρότερο σημείο 1
       • Η ζωή είναι μια θανατηφόρα ασθένεια
       • Ποτέ μην λες ποτέ
       • Μόνο αυτό ήξερα. Σημείο 4

       
       
       

       Αποτέλεσμα:

       

       Αυτό το θέμα έφτασε στο τέλος του.

       23.02.2017

       Οχι ακόμα

       
       

       Γεια σε όλους!
       Στο σημερινό σεμινάριο, θα μιλήσω για το πώς μπορείτε να ελέγξετε την εμφάνιση στο CSS, δηλαδή, να δημιουργήσετε λίστες με κουκκίδες και αριθμημένες λίστες, να σχεδιάσετε λίστες κουκκίδων με μια εικόνα και επίσης, εάν είναι απαραίτητο, να αφαιρέσετε εντελώς τον προσδιορισμό της λίστας με κουκκίδες.
       Θα προσπαθήσω να μην καθυστερήσω αυτό το μάθημα και να μην γράψω πολλές πληροφορίες. Αλλά θα προσπαθήσω να δω πώς θα πάει.

       Τύπος δείκτη στη λίστα
       

       Ιδιότητα "LIST-STYLE-TYPE"
       Χρησιμοποιώντας τον κανόνα "τύπος λίστας", μπορείτε να ορίσετε τον τύπο του δείκτη, για παράδειγμα, να εμφανίζει αριθμούς, γράμματα, τετράγωνα, κύκλους κ.λπ.

       Ιδιοκτησία:

       • κανένας – χωρίς μαρκαδόρο

       - λίστες με κουκκίδες:

       • δίσκος- ένας δείκτης με τη μορφή ενός γεμάτου κύκλου.
       • κύκλος- ένας δείκτης με τη μορφή ανοιχτού κύκλου.
       • τετράγωνο- ένας δείκτης με τη μορφή ενός γεμάτου τετραγώνου.

       - αριθμημένες λίστες:

       • δεκαδικός– συνηθισμένοι δεκαδικοί αριθμοί (1,2,3,4,5 κ.λπ.)
       • ανώτερο-ρωμαϊκό– μεγάλοι λατινικοί αριθμοί (I, II, III, IV, V, κ.λπ.)
       • κατώτερο ρωμαϊκό– μικροί λατινικοί αριθμοί (i, ii, iii, iv, v, κ.λπ.)
       • άνω-άλφα– κεφαλαία γράμματα (Α, Β, Γ, Δ, Ε κ.λπ.)
       • κατώτερο-άλφα– μικρά γράμματα (α, β, γ, δ, ε κ.λπ.)

       Li (τύπος λίστας: κύκλος, /* Μαρκάρισμα με τη μορφή ανοιχτού κύκλου */ )

       Πλήρες παράδειγμα:

       • κείμενο Νο 1
       • κείμενο Νο 2

       
       
       

       Αποτέλεσμα:

       

       Εάν πρέπει να αφαιρέσετε έναν δείκτη από τη λίστα, χρησιμοποιήστε την ιδιότητα "none":

       Li (τύπος λίστας: κανένα; /* Αφαίρεση δεικτών */ )

       Αποτέλεσμα:

       

       Θέση δείκτη στη λίστα
       

       ιδιοκτησία"ΛΙΣΤΑ-ΣΤΥΛ-ΘΕΣΗ »
       Ο κανόνας "list-style-position" μπορεί να χρησιμοποιηθεί για τον καθορισμό της θέσης του δείκτη.

       Ιδιοκτησία:

       • εξω απο– έξω από το κύριο μπλοκ της λίστας·
       • μέσα– μέσα στο κύριο μπλοκ της λίστας.

       

       Li ( θέση-στυλ λίστας: μέσα, /* θέση δείκτη */ )

       Χρώμα δείκτη λίστας
       

       ιδιοκτησία"ΧΡΩΜΑ »
       Γνωρίζετε ήδη τον κανόνα "χρώμα", με τον οποίο μπορείτε όχι μόνο να αλλάξετε το χρώμα του κειμένου, αλλά και το χρώμα του δείκτη. Ρίξε μια ματιά.

       • Κείμενο Νο 1
       • Κείμενο Νο 2

       
       
       

       Αποτέλεσμα:

       

       Εικόνα αντί για δείκτη στη λίστα
       

       ιδιοκτησία"ΛΙΣΤΑ-ΣΤΥΛ-ΕΙΚΟΝΑ »
       Εάν δεν σας αρέσει η τυπική εμφάνιση των λιστών με αρίθμηση ή κουκκίδες, μπορείτε να χρησιμοποιήσετε τον κανόνα "λίστα-στυλ-εικόνα" και να χρησιμοποιήσετε κουκκίδες εικόνας αντί για κανονικές κουκκίδες.

       Σύνταξη:

       List-style-image: url(image.png);

       LI ( list-style-image: url("marker1.png"); /* εικόνα δείκτη */ )

       "marker1.png" είναι η εικόνα του δείκτη.

       Αποτέλεσμα:

       

       Εσοχή δείκτη λίστας
       

       Ιδιοκτησία "PADDING-LEFT"
       Εάν πρέπει να κάνετε εσοχή στην κουκκίδα από το κείμενο, χρησιμοποιήστε τον κανόνα "padding-left".

       Li ( padding-αριστερά: 30 px; /* Εσοχή από το δείκτη στο κείμενο */ )

       Αποτέλεσμα:

       

       ΕΝΑ ΔΩΡΟ ΓΙΑ ΟΣΟΥΣ ΔΙΑΒΑΣΑΝ ΜΕΧΡΙ ΤΕΛΟΣ

       Αρίθμηση της λίστας από οποιονδήποτε αριθμό
       Δεν χρειάζεται να το ξέρετε αυτό, αλλά αποφάσισα να κάνω ένα δώρο για όσους διαβάζουν μέχρι εδώ. Εάν πρέπει να αριθμήσετε τη λίστα όχι από το 1, αλλά, για παράδειγμα, από το 6, μπορείτε να κάνετε τα εξής:

       Li ( list-style-type: none; /* Αφαιρέστε την αρχική αρίθμηση από τη λίστα */ ) ul ( counter-reset: list 5; /* Initiate the counter */ ) ul li:before ( counter-increment: list; /* Αύξηση τιμής μετρητή */ περιεχόμενο: μετρητής(λίστα) "." /* Εξαγωγή του αριθμού */ )

       Αποτέλεσμα:

       

       Ανυπομονώ να σας δω στα επόμενα μαθήματα! Μην ξεχάσετε να εγγραφείτε!

       Προηγούμενη ανάρτηση
       Επόμενη καταχώρηση
       

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

       Στον πίνακα 1 παραθέτει τις ιδιότητες των στοιχείων που προορίζονται για τη δημιουργία και την αλλαγή λιστών.

       Τραπέζι 1. Ιδιότητες CSS για τον έλεγχο της εμφάνισης της λίστας

       Ιδιοκτησία	Εννοια	Περιγραφή	Παράδειγμα
       λίστα-στυλ-τύπου	δίσκος κύκλος τετράγωνο δεκαδικός κατώτερο ρωμαϊκό ανώτερος-ρομαντικός κατώτερο-άλφα άνω-άλφα κανένας	Τύπος δείκτη. Τα τρία πρώτα χρησιμοποιούνται για τη δημιουργία μιας λίστας με κουκκίδες και τα υπόλοιπα τρία για τη δημιουργία μιας αριθμημένης λίστας.	LI (λίστα-στυλ-τύπος: κύκλος) LI (τύπος λίστας: upper-alpha)
       λίστα-στυλ-εικόνα	κανένας URL	Ορίζει οποιαδήποτε εικόνα ως σύμβολο δείκτη.	LI (list-style-image: url(check.gif))
       λίστα-στυλ-θέση	εξω απο μέσα	Επιλογή της θέσης του δείκτη σε σχέση με το μπλοκ γραμμών κειμένου.	LI (λίστα-στυλ-θέση: μέσα)
       στιλ λίστας		Μια καθολική ιδιότητα που περιλαμβάνει ταυτόχρονα όλες τις παραπάνω ιδιότητες.

       Από την ετικέτα

       κληρονομεί τις ιδιότητες στυλ της ετικέτας

       ή
       που λειτουργεί ως γονέας του, μπορείτε να στυλ και τον επιλογέα UL και τον επιλογέα LI. Έτσι, στο παράδειγμα 1, χρησιμοποιείται ο επιλογέας UL και έχουν οριστεί παράμετροι στυλ για αυτόν.

       Παράδειγμα 1: Δημιουργήστε μια λίστα με κουκκίδες

       
       
       

       Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 1. Χρησιμοποιούνται τετραγωνικοί δείκτες και η εξωτερική τους τοποθέτηση σε σχέση με το κείμενο.

       Ρύζι. 1. Τροποποιημένη προβολή λίστας με χρήση στυλ

       Για να ορίσετε τη δική σας εικόνα ως δείκτη, χρησιμοποιήστε την ιδιότητα list-style-image, όπως φαίνεται στο Παράδειγμα 2.

       Παράδειγμα 2: Χρήση εικόνων ως δείκτες

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

       Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 2. Μια μικρή εικόνα χρησιμοποιείται ως δείκτες.

       

       Ρύζι. 2. Εικόνες ως δείκτες

       Μερικά παραδείγματα δημιουργίας διαφόρων λιστών δίνονται στον πίνακα. 2.

       Τραπέζι 2. Πιθανοί τύποι λιστών

       Κώδικας HTML	Παράδειγμα
       	Όλοι οι σύνδεσμοι λειτουργούν υποστήριξη για διαφορετικά προγράμματα περιήγησης αναγνωσιμότητα κειμένου
       	Πράγματα που πρέπει να λάβετε υπόψη κατά τη δοκιμή ενός ιστότοπου: Όλοι οι σύνδεσμοι λειτουργούν υποστήριξη για διαφορετικά προγράμματα περιήγησης αναγνωσιμότητα κειμένου
       	Πράγματα που πρέπει να λάβετε υπόψη κατά τη δοκιμή ενός ιστότοπου: Όλοι οι σύνδεσμοι λειτουργούν υποστήριξη για διαφορετικά προγράμματα περιήγησης αναγνωσιμότητα κειμένου
       	Αριθμημένη λίστα με αραβικούς αριθμούς: πρώτα δεύτερος τρίτος
       	Αριθμημένη λίστα με πεζούς λατινικούς αριθμούς: πρώτα δεύτερος τρίτος
       	Αριθμημένη λίστα με κεφαλαίους ρωμαϊκούς αριθμούς: πρώτα δεύτερος τρίτος
       	Αριθμημένη λίστα με πεζά λατινικά γράμματα: πρώτα δεύτερος τρίτος
       	Αριθμημένη λίστα με κεφαλαία γράμματα του λατινικού αλφαβήτου: πρώτα δεύτερος τρίτος

       Καλημέρα σε όλους, αγαπητοί μου φίλοι και αναγνώστες. Χθες γιόρτασα και θέλω να πω ότι όλα πήγαν καλά, όπως είχε προγραμματιστεί - στον οικογενειακό κύκλο. Λοιπόν, έτσι έπρεπε να είναι. Παρόλα αυτά, καθίσαμε στον οικογενειακό κύκλο. Λοιπόν, θα γιορτάσω τις 19 Ιουνίου με φίλους, οπότε θα υπάρξει συνέχεια του συμποσίου. Αλλά σήμερα μπορούμε επιτέλους να επιστρέψουμε στην καθημερινή δουλειά (αν και είμαι σε διακοπές) και να συνεχίσουμε να μαθαίνουμε τη γλώσσα html.

       Ξέρεις; Χθες, η γυναίκα μου και εγώ φτιάχναμε μια λίστα με αυτά που χρειαζόμασταν να αγοράσουμε για το σπίτι, για γενέθλια, για διακοπές, και μόλις μου πέρασε από το μυαλό: «Ω. Και θα αφιερώσω το επόμενο άρθρο σε λίστες σε html." Γενικά, υπάρχουν δύο κύριοι τύποι, γι' αυτό ήθελα να αφιερώσω ένα ξεχωριστό άρθρο σε κάθε τύπο. Και σήμερα θα μελετήσουμε τη λίστα με κουκκίδες html.

       Τι είναι μια λίστα με κουκκίδες; Αυτή είναι μια ειδική λίστα που δεν περιέχει διατεταγμένες ενέργειες, αλλά περιέχει στοιχεία που έχουν παρόμοια σημασία. Και τέτοιες λίστες επισημαίνονται με κάποιο είδος εικονιδίων, για παράδειγμα, δείκτες, παύλες κ.λπ. Εδώ στο blog μου παρουσιάζονται με τη μορφή δείκτη και το χρησιμοποιώ όταν παραθέτω κάτι. Ας δούμε ένα παράδειγμα.

       Εξαρτήματα υπολογιστή:

       • Μητρική πλακέτα
       • ΕΜΒΟΛΟ
       • HDD
       • Κάρτα βίντεο
       • Και τα λοιπά.

       Ας δούμε τώρα πώς να αναπαράγουμε όλα αυτά σε html

       Για να δημιουργήσουμε τέτοιες λίστες, θα χρειαστεί να χρησιμοποιήσουμε δύο ζεύγη .

       • - μη τακτοποιημένη λίστα. Αυτή η ετικέτα τοποθετείται στην αρχή της λίστας και κλείνει στο τέλος. Μας λέει ότι μια λίστα χωρίς κουκκίδες θα πάει εδώ.
         • — στοιχείο λίστας (στοιχείο λίστας). Αυτές οι ετικέτες περιέχουν κάθε στοιχείο της λίστας.

         Στην πραγματικότητα, η διαδικασία δημιουργίας μιας λίστας με κουκκίδες είναι πολύ εύκολη και θα σας δείξω με ένα παράδειγμα:

         • Peugeot
         • Opel

         Όταν αποθηκεύσετε το έγγραφο και το ανοίξετε στο πρόγραμμα περιήγησης, η λίστα θα μοιάζει με αυτό. Δείτε μόνοι σας, δοκιμάστε το.

         

         Γνωρίσματα

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

         Το χαρακτηριστικό type έχει οριστεί για να αλλάξει ο τύπος του δείκτη, αλλά όπως είπα, στις σημερινές πραγματικότητες δεν είναι πλέον συνηθισμένο να το ορίζετε, αν και εξακολουθεί να λειτουργεί.

         

         • — αυτή η τιμή είναι η προεπιλεγμένη, επομένως δεν έχει νόημα να την καθορίσετε καθόλου. Οι δείκτες μοιάζουν με μαύρους κύκλους.
           • — χάρη σε αυτήν την τιμή, ο δείκτης θα παραμείνει στρογγυλός, αλλά δεν θα συμπληρώνεται πλέον.
             • - σε αυτήν την περίπτωση, οι δείκτες θα μετατραπούν σε μικρά μαύρα τετράγωνα.

               Προσπαθήστε να δείτε μόνοι σας πώς λειτουργεί και θα δείτε όλες τις αλλαγές.

               

               Ένθετη λίστα

               Υπάρχουν φορές που δεν θα είστε ικανοποιημένοι με μια ενιαία λίστα και, στη συνέχεια, χρειάζεται απλώς να δημιουργήσουμε μια ένθετη λίστα για να κατανεμηθούν τα πάντα σωστά. Ας πάρουμε το παράδειγμα των αυτοκινήτων. Στα προηγούμενα παραδείγματα, απλώς έφτιαξα μια λίστα με αυτοκίνητα, αλλά τώρα ας προσθέσουμε πολλά ακόμη μοντέλα σε κάθε μάρκα.

               Είναι απολύτως εύκολο να το κάνετε, απλώς μεταβείτε σε αυτήν την ετικέτα

             • , το οποίο θέλουμε να επεκτείνουμε, προσθέστε ένα νέο κοντέινερ λίστας
               και εισάγετε ήδη ένα άλλο σύνολο ετικετών εκεί
               • μεταξύ των οποίων θα αναγράφονται μοντέλα αυτοκινήτων. Ολα ΕΝΤΑΞΕΙ; Αν όχι, τότε ας δούμε πώς φαίνεται στον κώδικα.

                 

                 Τώρα αποθηκεύουμε και τρέχουμε το όλο θέμα στο πρόγραμμα περιήγησης. Δείτε τι πήραμε: τώρα υπάρχει μια άλλη νέα λίστα σε κάθε στοιχείο λίστας. Αυτό προσπαθούσαμε. Και αν προσέξατε, οι προεπιλεγμένοι δείκτες ρυθμίζονται διαφορετικά από τους γονικούς. Αυτό γίνεται επίτηδες για να αποφευχθεί η σύγχυση, αλλά μπορείτε να βάλετε το επιθυμητό χαρακτηριστικό και να επιλέξετε τον δείκτη σας. Νομίζω ότι όλα πρέπει να είναι ξεκάθαρα εδώ.

                 

                 Αλλά στο μέλλον θα μελετήσουμε το CSS και θα κάνουμε τα πάντα σύμφωνα, όπως θα έπρεπε. Χάρη στα στυλ, μπορείτε να βελτιώσετε σημαντικά την εμφάνιση της λίστας και ακόμη και να δημιουργήσετε τον δικό σας δείκτη. Βλέπετε το μενού στο ιστολόγιό μου (Αρχική σελίδα, Όλα τα άρθρα, Σχετικά με τον συγγραφέα κ.λπ.); Και γενικά, μπορείτε να μεταβείτε σε σχεδόν οποιοδήποτε ιστότοπο και να δείτε ένα παρόμοιο μενού. Έτσι, όλα αυτά τα στοιχεία μενού είναι στοιχεία λίστας, μόνο που υποβάλλονται σε επεξεργασία μέσω CSS.

                 

                 Λοιπόν, γενικά, νομίζω ότι καταλαβαίνεις το νόημα. Αλλά αν θέλετε να είστε καλά γνώστες HTML και CSS, τότε συνιστώ ανεπιφύλακτα να παρακολουθήσετε το μάθημα " HTML5 και CSS3 από την αρχή στο pro". Χάρη σε αυτό το μάθημα, θα μάθετε εύκολα όλα τα βασικά της html και του css, καθώς και πώς να δημιουργείτε μόνοι σας διάφορους τύπους ιστότοπων: ιστότοπους επαγγελματικών καρτών, ιστολόγια, ηλεκτρονικά καταστήματα, ακόμη και σελίδες προορισμού. Το μάθημα είναι πραγματικά εκπληκτικό .

                 Με εκτίμηση, Dmitry Kostin.