* Γνώση Υπολογιστών >> Προγραμματισμός > >> Γλώσσες Προγραμματισμού Υπολογιστών

Πώς να κάνει ένα Drop -Down Log -In

Οι περισσότεροι άνθρωποι συνδεθείτε σε μια ιστοσελίδα τουλάχιστον μία φορά την ημέρα . Ο χρήστης κάνει κλικ στο log-in σύνδεση , μπαίνει το όνομα χρήστη και τον κωδικό πρόσβασής του , κάνει κλικ στο " Σύνδεση " και περιμένει τη σελίδα για να φορτώσετε εκ νέου . Αυτό διαρκεί μόλις λίγα δευτερόλεπτα . Ωστόσο , όταν χρησιμοποιείτε ένα log-in drop-down στην ιστοσελίδα σας , θα εξαλείψει την ανάγκη για νέα φόρτωση της σελίδας . Μπορείτε να δημιουργήσετε μια τέτοια log-in με τη χρήση HTML , CSS και JavaScript . Αν και μπορεί να ακούγεται δύσκολο , η διαδικασία δημιουργίας ενός drop-down log -in είναι σχετικά απλή . Οδηγίες
Η 1

Δημιουργήστε μια νέα σελίδα HTML και επικόλληση του κώδικα για να δημιουργήσετε το δικό σας log-in μορφή :

< div id = " topnav " class = " topnav " > έχουν ήδη ένα λογαριασμό ;

< μέθοδο της φόρμας = "post " id = " σύνδεσής " action = " http://yourwebsite.com/sessions " > Username ή το Email < /label> < input id = " όνομα " name = "username" value = " " title = "username" tabindex = " 4 " type = "text " > < /p> < ετικέτα για = "password" > Κωδικός πρόσβασης < /label> < id εισόδου = "password " name = "password " value = " " title = "password " tabindex = " 5 " type = " password " > < /p> class="remember"> με θυμάσαι < /ετικέτα > < /p> class="forgot"> Ξεχάσατε τον κωδικό σας ; < /a> < /p>

σας Ξεχάσατε το όνομα χρήστη σας ? < /a> < /p> < /form> < /fieldset > < /div >

Αντικατάσταση " 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 ορίζει το " Είσοδος " κουμπί .
εικόνων 3

αντιγραφή και επικόλληση του κώδικα 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? Υγροτόπου Μουστού ? }
Η 4 < p > Δημιουργήστε ένα νέο αρχείο JavaScript . Χρησιμοποιήστε αυτόν τον κωδικό Javascript για να εμφανίσετε ή να αποκρύψετε το drop-down log -in box , όταν οι χρήστες κάνουν κλικ στο κουμπί " Σύνδεση" :

< script src = " javascripts /jquery.js " type = " ? . . text /javascript " . > < /script >

Προγραμματισμός

Πώς να κάνει ένα Drop -Down Log -In

Συναφής σύστασή

Τελευταία άρθρα