29Απρ

Δημιουργήστε λίστες με όμορφα γραφικά με την χρήση CSS.

, 29 Απριλίου 2008 | WEB DESIGN - AUTHORING | 0 Σχόλια

Με την χρήση των CSS (Cascading Style Sheets) μπορείτε να διαμορφώσετε αρκετά στοιχεία προβολής στην ιστοσελίδα που σχεδιάζετε. Μπορείτε να εμπλουτίσετε γραφικά και διάφορα εικονίδια, ώστε να δημιουργήσετε μία πιο όμορφη και ελκυστική ιστοσελίδα χωρίς να την επιβαρύνετε με πολλές γραμμές κώδικα.

Σήμερα θα δείξουμε πως μπορείτε να δημιουργήσετε λίστες με όμορφα γραφικά με την χρήση των tag <ul> και <li>. Αναλυτικότερα:

ΚΩΔΙΚΑΣ CSS
Ορίζουμε 2 divs (layers) με διαφορετικές λίστες:

body {
line-height: 18px;
margin: 0px;
}
#list_1 {
font-family: Arial, tahoma;
font-size: 13px;
color: #000000;
padding: 10px;
}
#list_1 ul {
margin-right: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
list-style-type: none;
color: #056c86;
}
#list_1 ul li {
background-image: url(grey_arrow.gif);
background-repeat: no-repeat;
background-position: 0em 0.3em;
padding-left: 20px;
}
#list_1 ul li a {
color: #056c86;
}
#list_1 ul li a:hover {
color: #0AB9E5;
}
#list_2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
background-color: #f4f4f4;
padding: 10px;
}
#list_2 ul {
margin-right: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
list-style-type: none;
color: #FF3300;
}
#list_2 ul li {
background-image: url(red_arrow.gif);
background-repeat: no-repeat;
background-position: 0em 0.3em;
padding-left: 20px;
}
#list_2 ul li a {
color: #FF3300;
}
#list_2 ul li a:hover {
color: #333333;
}

ΔΕΙΤΕ ΤΟ ΠΑΡΑΔΕΙΓΜΑ.

(στο παράδειγμα το αρχείο CSS βρίσκεται στο πάνω μέρος του κώδικα αλλά στην κανονική ιστοσελίδα σας προτείνετε να το έχετε σε ξεχωριστό αρχείο)

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

Στα πλαίσια εκμάθησης της καλύτερης χρήσης των CSS το Web Design Blog θα δημοσιεύει άρθρα τα οποία θα πληροφορούν τους web designers πώς να εκμεταλλεύονται τα στοιχεία προβολής μίας ιστοσελίδας για να δημιουργούν ξεχωριστά designs.

ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Δημιουργήστε λίστες με όμορφα γραφικά με την χρήση CSS. γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.

Σχολιάστε

Back to top

Recent comments

  • Ευχαριστούμε για το σχόλιο Ευγενία. Δυστυχώς δεν γνωρίζουμε αν υπάρχει παρόμοια γραμματοσειρά με την ENGLAND HAND στα Ελληνικά.

    10 δωρεάν καλλιγραφικές γραμματοσειρές
  • Πολύ χρήσιμο άρθρο. Ο αλγόριθμος της Google εξελίσσεται και μαζί του και η τέχνη του seo. Θα έλεγα ότι ωθεί τους seo experts σε μια πιο ολιστική προσέγγιση της online παρουσίας των πελατών τους. Αυτο σημαίνει ότι θα πρέπει να εμπλακούν σε θέματα content strategy, branding και social media γιατί η Google συνυπολογίζει όλα αυτά όταν αποφασίζει για το ranking μιας ιστοσελίδας. Ειδικά το content είναι το κλειδί στην νέα εποχή του search engine optimization. Θα πρέπει να δημιουργείται έχοντας στο μυαλό μας κυρίως τον επισκέπτη της ιστοσελίδας μας και λιγότερο τις μηχανές αναζήτησης. Θα πρέπει να προσθέτει πραγματικό value στους αναγνώστες του και ιδεατά να έχει χαρακτηριστικά που να συμβάλλουν στη δημιουργία buzz στα social media. Με τον τρόπο αυτό θα δημιουργηθούν με φυσικό τρόπο

    Google Panda 3.3, Google Venice και 38 επιπλέον αλλαγές στον αλγόριθμο της Google

Latest From Twitter