Οι περισσότεροι άνθρωποι συνδεθείτε σε μια ιστοσελίδα τουλάχιστον μία φορά την ημέρα . Ο χρήστης κάνει κλικ στο log-in σύνδεση , μπαίνει το όνομα χρήστη και τον κωδικό πρόσβασής του , κάνει κλικ στο " Σύνδεση " και περιμένει τη σελίδα για να φορτώσετε εκ νέου . Αυτό διαρκεί μόλις λίγα δευτερόλεπτα . Ωστόσο , όταν χρησιμοποιείτε ένα log-in drop-down στην ιστοσελίδα σας , θα εξαλείψει την ανάγκη για νέα φόρτωση της σελίδας . Μπορείτε να δημιουργήσετε μια τέτοια log-in με τη χρήση HTML , CSS και JavaScript . Αν και μπορεί να ακούγεται δύσκολο , η διαδικασία δημιουργίας ενός drop-down log -in είναι σχετικά απλή . Οδηγίες
Η 1
Δημιουργήστε μια νέα σελίδα HTML και επικόλληση του κώδικα για να δημιουργήσετε το δικό σας log-in μορφή :
Αντικατάσταση " yourwebsite.com " με τον τομέα σας . Η "
" ετικέτα εμφανίζει τη φόρμα και να αλλάξετε οποιοδήποτε από τα πεδία κειμένου για να ταιριάζει στις ανάγκες σας . 2 αντιγραφή και επικόλληση του κώδικα CSS στο αρχείο CSS σας ή να το προσθέσετε στο η ιστοσελίδα όπου μπορείτε να ορίσετε τα στυλ :
# δοχείο { width : 780px ? περιθώριο : 0 auto? θέση : σχετική? }
# περιεχομένου { width : 520px ? min-height : 500px ? } a: link , a : επισκέφθηκε {color : # 27b ? text-decoration : none ? } ένα : hover { text-decoration : υπογραμμίζουν ? } { img ένα σύνορα πλάτος : 0 ? } # { topnav padding : 10px 0px 12px ? font-size: 11px ? line-height : 23px ? text- align: right ? } # topnav a.signin {background : # 88bbd4 ? padding : 6px 4px url ( " images /σύνδεσής - nav - bg - ie.png " ) δεν υπάρχει-επαναλαμβάνω 0 0 ? * padding : 12px 4px 6px ? } # topnav a.signin : hover {background : # 59Β ? * φόντο : διαφανές url ( " images /σύνδεσής - nav -bg - hover - ie.png " ) δεν -επαναλαμβάνω 0 0 ? * padding : 12px 4px 6px ? } # topnav a.signin , # topnav a.signin : hover { * υπόβαθρο-θέση : 0 3px σημαντικό? }
a.signin { θέση : σχετική? περιθώριο - αριστερά : 3px ? } a.signin διάρκεια 50 % ? Padding : 16px 4px 6px 0 ? } # Topnav A.MENU ανοικτή {background : # ddeef6 σημαντικό? Color: # 666 σημαντικό? Περίγραμμα : none ? } # Small_signup {display : inline ? Float : κανένας? Γραμμή -height: 23px ? περιθώριο : 25px 0 0 ? width : 170px ? } a.signin.menu ανοικτή έκταση {background - image : url ( " images /toggle_up_dark.png " ) ? color: # 789 ? }
Αυτός ο κωδικός CSS ορίζει το " Είσοδος " κουμπί .
αντιγραφή και επικόλληση του κώδικα CSS στο αρχείο CSS σας ή στην ιστοσελίδα όπου μπορείτε να ορίσετε τα στυλ για τον καθορισμό το log -in μορφή :
# signin_menu διαφανή ? text-align : αριστερά? padding : 12px ? κορυφή : 24.5px ? δεξιά: 0px? margin-top : 5px? περιθώριο δεξιά : 0px? * περιθώριο δεξιά : - 1px? color: # 789 ? font-size : 11px ? }
# signin_menu εισόδου [ type = text] , # signin_menu εισόδου [ type = password] { display: block ? - moz - σύνορα - ακτίνα: 4px ? - webkit - σύνορα - ακτίνα: 4px ? σύνορα : 1px solid # ACE ? font-size: 13px ? περιθώριο : 0 0 5px? padding : 5px? width : 203px ? } # signin_menu p {margin : 0 ? } # signin_menu ένα { χρώμα : # 6AC ? } # { ετικέτα signin_menu font-weight : normal ? } # signin_menu p.remember { padding : 10px 0 ? } # signin_menu p.forgot , # signin_menu p.complete { σαφής: τα δύο? περιθώριο : 5px 0 ? } # signin_menu pa {color : # 27Β ! σημαντικό? } # signin_submit { - moz - σύνορα - ακτίνα: 4px ? - webkit - σύνορα - ακτίνα: 4px ? background: # 39δ url ( images /bg- btn - blue.png » ) επανάληψη-x scroll 0 0 ? σύνορα : 1px solid # 39D ? color: # fff ? text-shadow : 0 - 1px 0 # 39d ? padding : 10px 4px 5px? font-size: 11px ? περιθώριο : 0 0 0 5px ? font - weight: bold ? } # signin_submit :: - moz - εστίαση - εσωτερική { padding : 0 ? σύνορα : 0 ? } # signin_submit : hover , # signin_submit : εστίαση { υπόβαθρο-θέση : 0 - 5px? Υγροτόπου Μουστού ? }
Δημιουργήστε ένα νέο αρχείο JavaScript . Χρησιμοποιήστε αυτόν τον κωδικό Javascript για να εμφανίσετε ή να αποκρύψετε το drop-down log -in box , όταν οι χρήστες κάνουν κλικ στο κουμπί " Σύνδεση" :