Σχεδιασμός μιας επιλεγμένης αναπτυσσόμενης λίστας στο Photoshop. Πρόσθετο JQuery για επιλογείς στυλ. Κώδικας HTML μετά την εκτέλεση του plugin

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

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

Από την άλλη, αυτή η προσέγγιση επιτρέπει:

1. Μην γράφετε κώδικας javascript, που θα μιμούνταν τη συμπεριφορά των επιλογέων. Όλη η λογική εξαρτάται από το πρόγραμμα περιήγησης. Υπάρχουν πολλές προσθήκες σήμερα, αλλά δεν συναντάτε συχνά μια που θα χειριζόταν όλες τις περιπτώσεις αιχμής που συναντά ο χρήστης όταν αλληλεπιδρά με αυτό το στοιχείο ελέγχου. Ένα παράδειγμα αυτού έσχατη λύσημπορεί να εξυπηρετήσει αυτόματη επιλογήθέση αναπτυσσόμενης λίστας (άνοιγμα προς τα κάτω ή προς τα πάνω).

2. Εφόσον το πρόγραμμα περιήγησης είναι υπεύθυνο για τη συμπεριφορά και το σχεδιασμό της αναπτυσσόμενης λίστας, τότε δεν χρειάζεται να γράψετε ξεχωριστή λύσηΓια κινητές συσκευές, που θα σας επιτρέψει να εργάζεστε άνετα με επιλογείς σε συσκευές αφής με μικρές οθόνες. Οι ίδιοι οι ενσωματωμένοι εγγενείς επιλογείς δέχονται ο σωστός τύπος, γιατί στις κινητές πλατφόρμεςόλα έχουν ήδη μελετηθεί. Για παράδειγμα, χρήστες iOSόταν κάνετε κλικ στον επιλογέα, δεν θα δουν την προσαρμοσμένη λίστα σας, αλλά την τυπική γνωστή. Οι χρήστες δεν θα χρειαστεί να προσαρμόσουν τη συμπεριφορά τους στον συγκεκριμένο ιστότοπό σας. Και είναι βολικό γι 'αυτόν, και για αυτόν τον λόγο δημιουργήσατε τον ιστότοπο.

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

Η κύρια ιδιότητα που θα σας επιτρέψει να αλλάξετε την εμφάνιση του επιλογέα είναι η εμφάνιση . Αναγκάζει ένα στοιχείο να γίνει αυτό που θέλετε, για παράδειγμα μπορείτε να αναγκάσετε ένα div να γίνει κουμπί. Ωστόσο, για τους σκοπούς μας, η ενδιαφέρουσα αξία δεν είναι καμία , πράγμα που σημαίνει ότι το στοιχείο δεν χρειάζεται καθόλου στυλ. Με αυτόν τον τρόπο μπορούμε να αφαιρέσουμε το χαρακτηριστικό επιλογής - το κάτω βέλος στα δεξιά.

Επιλέξτε ( -webkit-appearance: κανένας; -moz-appearance: κανένας; -ms-appearance: κανένας; εμφάνιση: κανένας !important; )

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

Επιλογή ( φόντο: διαφανές; εμφάνιση: μπλοκ; πλάτος: 100%, περίγραμμα: 1px συμπαγές #a7a7a7; χρώμα: #32353a; οικογένεια γραμματοσειράς: 16/Arial, sans-serif; μέγεθος γραμματοσειράς: 16 px; ύψος γραμμής: 1,4 font-weight: normal padding: 7px 10px: top -webkit: none

Τώρα το μόνο που μένει είναι να προσθέσετε ένα βέλος ή κάποιο άλλο εικονίδιο ως φόντο. Θα χρησιμοποιήσουμε το φόντο, καθώς ψευδοστοιχεία όπως πριν και μετά δεν θα λειτουργήσουν για τους επιλεγμένους. Για καλύτερη προβολήτοποθεσίες σε διάφορες συσκευέςμε διαφορετικές πυκνότητες pixel, στο διάφορες κλίμακεςκαι ούτω καθεξής. Είναι σύνηθες να χρησιμοποιείτε εικονίδια SVG. Επομένως, χρησιμοποιώντας έναν ηλεκτρονικό κωδικοποιητή URL για SVG, θα μετατρέψουμε το εικονίδιο σε URI δεδομένων. Είναι σημαντικό να θυμάστε ότι η ετικέτα SVG πρέπει να έχει το χαρακτηριστικό xmlns="http://www.w3.org/2000/svg".

Θα έχετε το εξής αποτέλεσμα.

%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"%3E%3Cpath fill="%23000" fill-rule ="evenodd" class="cls-1" d="M8,0L4.141,6.993,0.012,0.156Z"/%3E%3C/svg%3E%0A

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

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

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

Τα ακόλουθα στοιχεία φόρμας HTML δεν μπορούν να διαμορφωθούν πλήρως:

• αναπτυσσόμενη λίστα ;
• πλαίσιο ελέγχου ;
• διακόπτης .
• πεδίο για αποστολή αρχείου.

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

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

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

Επίδειξη του πρόσθετου

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

Πλεονεκτήματα

• Όταν η JavaScript είναι απενεργοποιημένη, εμφανίζονται οι τυπικοί επιλογείς.
• Το σενάριο είναι μικρό σε μέγεθος, περίπου 4 kilobyte.
• Λειτουργεί σε IE6+ και σε όλα τα σύγχρονα προγράμματα περιήγησης για επιτραπέζιους υπολογιστές.
• Εμφανίζεται ενσωματωμένα.
• Σχεδιάζεται εύκολα με χρήση CSS.
• Σας επιτρέπει να ορίσετε μέγιστο ύψοςγια μια αναπτυσσόμενη λίστα (ιδιότητα CSS max-height).
• Προσαρμόζει αυτόματα το πλάτος εάν δεν έχει καθοριστεί.
• Υποστηρίζει κύλιση τροχού ποντικιού.
• Έχει «έξυπνη τοποθέτηση», π.χ. δεν φεύγει ορατό μέροςσελίδες κατά το άνοιγμα της λίστας.
• Μπορεί να «πιάσει» πατώντας το πλήκτρο Tab και να αλλάξει με βέλη στο πληκτρολόγιο.
• Υποστηρίζει το χαρακτηριστικό "disabled".
• Λειτουργεί επίσης με δυναμικά προστιθέμενες/αλλαγμένες επιλογές.

Ελαττώματα

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

Κατεβάστε

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

Πρόσθετο jQuery "SelectBox Styler"

Έκδοση: 1.0.1 | Λήψεις: 11103 | Μέγεθος: 7 KB | Τελευταία ενημέρωση: 07.10.2012

Ενημερώσεις 22/09/2012 Μετατράπηκε το σενάριο σε πρόσθετο (συμπεριλαμβανομένης μιας ελαχιστοποιημένης έκδοσης) και προστέθηκε επίσης υποστήριξη για δυναμική προσθήκη/αλλαγή επιλογών. 10/07/2012 Διορθώθηκε η συμπεριφορά του σεναρίου κατά τη χρήση της μεθόδου onchange της ετικέτας. Σύνδεση του πρόσθετου

Εάν το jQuery δεν είναι ακόμα ενεργοποιημένο στον ιστότοπο, προσθέστε επόμενη γραμμήπριν την ετικέτα:

Αμέσως μετά το jQuery, συμπεριλάβετε το αρχείο με το σενάριο:

(function($) ( $(function() ( $("select").selectbox(); )) ))(jQuery)

Τοποθετήστε αυτόν τον κωδικό πριν από την ετικέτα μετά τα παραπάνω αρχεία.

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

(function($) ( $(function() ( $("button").click(function() ( $("select").find("option:nth-child(5)").attr("selected ", true); $("επιλογή").trigger("ανανέωση"); )) )) ))(jQuery)

Κώδικας HTML μετά την εκτέλεση του plugin

Η δομή του μοιάζει με αυτό:

-- Επιλέξτε --

• -- Επιλέξτε --
• Παράγραφος 1
• Σημείο 2
• Σημείο 3

-- Επιλέξτε -- Στοιχείο 1 Στοιχείο 2 Στοιχείο 3

Κλάσεις CSS που χρησιμοποιούνται για το στυλ του επιλογέα

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

.επιλογή	γονικό κοντέινερ για ολόκληρη την επιλογή
.επιλογή .επιλογή	επιλέξτε σε συμπτυγμένη κατάσταση
.selectbox.focused .select	εστίαση στην επιλογή όταν πατηθεί το πλήκτρο Tab
.selectbox .select .text	ένθετη ετικέτα για συμπτυγμένη επιλογή σε περίπτωση εισαγωγής εικόνα φόντουχρησιμοποιώντας την τεχνική της συρόμενης πόρτας
.selectbox .trigger	δεξιά πλευρά της συμπτυγμένης επιλογής (διακόπτης υπό όρους)
.selectbox .trigger .βέλος	υποετικέτα για κουμπί επιλογής (βέλος)
.selectbox .αναπτυσσόμενο	περιτύλιγμα για την αναπτυσσόμενη λίστα
.selectbox .dropdown ul	αναπτυσσόμενη λίστα
.selectbox li	επιλέξτε στοιχείο (επιλογή)
.selectbox li.επιλεγμένο	επιλεγμένο επιλεγμένο στοιχείο
.selectbox li.απενεργοποιημένο	απενεργοποιημένο (δεν είναι διαθέσιμο για επιλογή) επιλέξτε στοιχείο

συμπέρασμα

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

Συνδέω-συωδεομαι αρχείο CSSστο τμήμα κεφαλής:

.. ..

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

Εφαρμογή στυλ στο Select

Όταν χρησιμοποιείτε το EasyDropDown.js, η σήμανση παραμένει σαφής και διαισθητική. Απλά πρέπει να προσθέσετε κανονικό στοιχείοεπιλέξτε . Μπορείτε επίσης να απενεργοποιήσετε αυτό το στοιχείο, αντιστοιχίστε μια ετικέτα και ορίστε το στοιχείο που πρέπει να επιλεγεί από προεπιλογή.

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

Ρύθμιση επιλογής 1 Επιλογή 2 Επιλογή 3 Επιλογή 4 Επιλογή 5

Αυτό είναι όλο, δεν χρειάζεστε τίποτα άλλο. Τώρα το στοιχείο SELECT θα είναι πιο όμορφο.

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

... Επιλογή 2 ...

Μπορείτε επίσης να απενεργοποιήσετε ένα στοιχείο προσθέτοντας το χαρακτηριστικό απενεργοποιημένο:

...

Επιλογή θέματος

Η προσθήκη EasyDropDown.js διαθέτει 2 θέματα στυλ: Metro και Flat. Για να τα συνδέσετε, χρησιμοποιήστε το χαρακτηριστικό γνώρισμα δεδομένων HTML5.

Για να εφαρμόσετε ένα διαφορετικό θέμα, μέσα στο στοιχείο SELECT γράψτε data-settings="("wrapperClass":"theme-name")" . Η παράμετρος theme-name μπορεί να λάβει τις ακόλουθες τιμές: metro ή flat . Παραδείγματα:

...

Με την έλευση του CSS3 έγινε δυνατό να γίνει όμορφο στυλγια οποιοδήποτε στοιχείο στον ιστότοπο. Επειδή το CSS3 παρέχει ένα ευρύ φάσμα δυνατοτήτων που επιταχύνουν τη διαδικασία ανάπτυξης ενός σχεδιασμού ιστότοπου. Σήμερα θα διαμορφώσουμε το στοιχείο Select στο CSS. Για όσους δεν γνωρίζουν, αυτό το στοιχείο είναι υπεύθυνο για την αναπτυσσόμενη λίστα στον ιστότοπο. Πολλοί άνθρωποι χρησιμοποιούν τυπική όψη, αλλά μπορεί να αλλάξει για να ταιριάζει στο σχεδιασμό του ιστότοπού σας.

Δεν υπάρχει τίποτα καλύτερο από το να δείτε πώς μοιάζει η λίστα με τα μάτια σας:

Κατεβάστε

Έτσι φαίνεται αυτό το Select στο CSS:

Παρόμοια άρθρα για αυτό το θέμα:

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

1 βήμα. Συνδέουμε τα απαραίτητα αρχεία

Είναι απλό. Αφού κατεβάσουμε το αρχείο με τις πηγές από εκεί, θα χρειαστούμε 2 αρχεία (style.css και select.js - αν συνδέετε την πρώτη επιλογή της λίστας ή select_demo2.js - εάν συνδέετε τη δεύτερη επιλογή). Συνδέουμε αυτά τα δύο αρχεία μεταξύ των ετικετών:

1 2

Βήμα 2. Δομή HTMLΕπιλέξτε στοιχείο

Δεν υπάρχει τίποτα εξαιρετικά περίπλοκο στη δομή (και γιατί να υπάρχει, είναι απλώς HTML :)). Απλή φόρμα, μέσα στο οποίο υπάρχει ένα αναπτυσσόμενο μενού Επιλογή με τα στοιχεία του:

1 2 3 4 5 6 7 8 9 10 11 12

Χώρες ΗΒ: Επιλέξτε χώρα: Αγγλία Βόρεια Ιρλανδία Σκωτία Ουαλία

Βήμα 3. Προσθήκη στυλ για Select CSS

Δεν είναι πολλοί από αυτούς. Παρέχω παρακάτω τα στυλ για την πρώτη επιλογή της λίστας. Θα ήθελα να επιστήσω την προσοχή σας στα μονοπάτια προς τις εικόνες. Υπάρχουν μόνο δύο από αυτά: το πρώτο είναι για το άνοιγμα της λίστας και το δεύτερο για το κλείσιμο. Μοιάζουν με δύο βέλη «πάνω» και «κάτω» αντίστοιχα. Μπορείτε να τα κατεβάσετε από τις πηγές που βρίσκονται στην αρχή του άρθρου:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94

.dropcontainer (θέση : σχετική ; μέγεθος γραμματοσειράς : 16 εικονοστοιχεία ; χρώμα : #777 ; ) .trigger ( χρώμα : #777 ; padding : 10 px ; μέγεθος γραμματοσειράς : 16 εικονοστοιχεία , πλάτος : 50% , φόντο : #fff9 % χωρίς επανάληψη : μπλοκ : 1px -μεγέθης κουτιού ιστού : όλα τα 0,5s ease ; all 0,5s ease, transition: all 0,5s ease) .trigger: hover (χρώμα: #777; background: #f5f5f5 url (../images/select-arrow-open.png ) 98% center no-repeat ; ) . activetrigger (χρώμα: #777; πλήρωση: 10 εικονοστοιχεία; μέγεθος γραμματοσειράς: 16 εικονοστοιχεία; πλάτος: 50%; φόντο: #f5f5f5 url () 98% κέντρο χωρίς επανάληψη; οθόνη: μπλοκ; περίγραμμα: 1 εικονοστοιχείο συμπαγές #cckit--we; box-sizing : border-box; χρώμα : #777 ; ) .activetrigger :active ( background : #f5f5f5 url (../images/select-arrow-close.png ) 98% center no-repeat ; color : #777 ; ) .dropcontainer ul ( μέγεθος γραμματοσειράς : 16px , περίγραμμα: 1px στερεό #ccc : padding : 50% -webkit-box-sizing ; dropcontainer ul li ( padding : 5px ; -webkit-transition : all 0,5s ease; -moz-transition : all 0,5 s ease; -o-transition : all 0,5s ease; transition : all 0,5s ease ) .dropcontainer ul li : hover ( background : #f5f5f5 ; outline : none ; ) .dropcontainer ul li :first-child ( display : none ; ) .dropcontainer ul li :last-child ( border-bottom : none ; ) .dropdownhidden ( display : none ) .dropdownvisible (ύψος: αυτόματο;)

Στο παράδειγμα επίδειξης, τα στυλ βρίσκονται στο φάκελο css. Επομένως, όταν ορίζουμε τη διαδρομή σε ένα φάκελο με εικόνες στη διαδρομή, γράφουμε πρώτα ".." (δύο τελείες) για να ανέβουμε ένα επίπεδο προς τα πάνω. Και μετά μεταβείτε στο φάκελο εικόνων.

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

Πρέπει να αντικαταστήσετε την τελευταία αναπτυσσόμενη ιδιότητα:

1 2 3

.dropdownvisible (ύψος: αυτόματο;)

1 2 3 4

.dropdownvisible (ύψος : 200 px ; υπερχείλιση-y : κύλιση ; )

Και αν δεν ξεχάσετε να αντικαταστήσετε τα σενάρια (δείτε παραπάνω τι να αλλάξετε σε τι), θα λάβετε τα εξής:

Σε ποια προγράμματα περιήγησης λειτουργεί καλά αυτό το Select CSS (αναπτυσσόμενη λίστα);

• ✓ Firefox 24.0, Firefox 25.0, Firefox 26.0
• ✓ Chrome 29.0, Chrome 30.0, Chrome 31.0
• ✓ Opera 12.14, Opera 12.15, Opera 12.16
• ✓ IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0
• ✓ Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0
• ✓ Apple iOS– iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), ipad mini
• ✓ Android – Sony Experia X10, HTC OneΧ, Kindle Fire 2, Google Nexus

Προσθήκη στο μάθημα - δημιουργικό εφέ αιώρησης + ΒΙΝΤΕΟ

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

συμπέρασμα

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