CSS για τη δημιουργία λιστών συλλογής ματιών

• Ενδέχεται 19, 2024

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

Η χρήση ετικετών και λιστών τίτλων είναι ένας πολύ καλός τρόπος για να επιτρέψετε στους χρήστες να βλέπουν εύκολα το κύριο περιεχόμενο του ιστότοπού σας. Εάν αισθάνονται ότι οι λίστες και οι υποενότητες είναι ενδιαφέρουσες, υπάρχει μεγαλύτερη πιθανότητα να παραμείνουν στον ιστότοπό σας. Αυτό φυσικά, οδηγεί σε μειωμένα ποσοστά "αναπήδησης" και συμβάλλει στη βελτίωση της αξιοπιστίας και της κατάταξης του ιστοτόπου σας στις μηχανές. Οτιδήποτε βελτιώνει την αναγνωσιμότητα, καθιστώντας ευκολότερη την απομάκρυνση των ματιών, θα ωφελήσει πάντα έναν ιστότοπο. Ένα εξαιρετικό σχέδιο διατηρεί πάντα την αναγνωσιμότητα στο μυαλό.

Το CSS είναι ένας εύκολος και πολύ αποτελεσματικός τρόπος για να δημιουργήσετε κομψούς καταλόγους με προσαρμοσμένες σφαίρες (δείκτες). Μπορείτε να συμπεριλάβετε διαφορετικά σχήματα ή απλά προσαρμοσμένα γραφικά που συνδέουν το λογότυπο, τα χρώματα ή το θέμα του ιστοτόπου σας. Για παράδειγμα, σε έναν ιστότοπο περιηγήσεων φάντασμα, δημιούργησα ένα μικρό εικονίδιο φαντασμάτων που χρησιμοποιήθηκε στην πλευρική γραμμή πλοήγησης και σε μη ταξινομημένα στοιχεία λίστας στην κύρια σελίδα. Ήταν απλό, αλλά πολύ χαριτωμένο και δεμένο στο θέμα των χώρων, κάνοντας τα στοιχεία της σελίδας να ξεχωρίζουν.

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

Ιδιότητες στυλ λίστας

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

Για να ορίσετε τη δική σας εικόνα ως δείκτη, χρησιμοποιήστε την ιδιότητα της λίστας στυλ-εικόνας ως εξής:

ul {λίστας-στυλ-εικόνα: url (imagename.jpg);
λίστα-στυλ-θέση: έξω?
}

Η διεύθυνση URL είναι σχετική με το φύλλο στυλ και θα πρέπει να δείχνει στον φάκελο όπου βρίσκεται η εικόνα σας. Σε αυτήν την περίπτωση, η εικόνα θα βρίσκεται στον ίδιο φάκελο με το αρχείο css και html. Αν τοποθετήσετε τις εικόνες σας σε ξεχωριστό φάκελο, θα συμπεριλάβετε και αυτό: url (images / imagename.jpg)

Θέσεις σήμανσης

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

Τεχνική στενογραφίας

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

ul
{
style-λίστας: διεύθυνση URL κύκλου ("image.gif");
}

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

τύπος λίστας
λίστα-στυλ-θέση (μέσα, έξω)
λίστα-στυλ-εικόνα

Δεν έχει σημασία αν παραλείψετε μια τιμή, εφόσον οι άλλοι παραμένουν στη σωστή σειρά.

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

Οδηγίες Βίντεο: Web Programming - Computer Science for Business Leaders 2016 (Ενδέχεται 2024).