* počítačové znalosti >> Programovanie >> Počítač Programovacie jazyky >> .

Ako si vyrobiť Drop - Down Log - In

Väčšina ľudí sa prihlásiť do webovej stránky aspoň raz za deň . Používateľ klikne na prihlásenie v odkaze , zadá svoje užívateľské meno a heslo , klikne na " Prihlásiť sa " a čaká na stránku znova načítať . To trvá len niekoľko sekúnd . Avšak , ak používate rozbaľovací log- in na vaše webové stránky , eliminovať potrebu znovu načítať stránku . Môžete vytvoriť taký log - in pomocou HTML , CSS a JavaScript . Aj keď to môže znieť ťažké , proces vytvárania drop - down log - in je pomerne jednoduchý . Pokyny dovolená 1

Vytvorenie novej stránky HTML a vložte tento kód vytvoriť si prihlásenie v tvare :

< div id = " topnavi " class = " topnavi " > Máte už svoj účet ?

< forma = " post " id = " signin " action = " http://yourwebsite.com/sessions " > užívateľské meno alebo e - mail < /label > < input " type = " id = " užívateľské meno " name = " meno " value = " " title = " username " tabindex = " 4 Text " > < /p > < štítok pre = " heslo " > heslo < /label > < input id = " heslo " name = " heslo " value = " " title = " heslo " tabindex = " 5 " type = " heslo " > < /p >

input id = " signin_submit " value = " Sign in " tabindex = " 6 " type = " submit " > input id = " remember " name = " remember_me " value = " 1 " tabindex = " 7 " type = " checkbox " > Pamätaj si ma < /label > < /p >

Zabudli ste heslo ? < /a > < /p >

Zabudli ste užívateľské meno ? < /A > < /p > < /form > < /fieldset > < /div >

Nahradiť " yourwebsite.com " s vašej domény . "

" Tag zobrazí formulár a zmeníte niektorý z textových polí tak , aby vyhovovali vašim potrebám .
2

Skopírujte a vložte tento kód CSS do CSS súboru , alebo ju pridať do webové stránky , kde môžete definovať štýly :

# obal { width : 780px ; margin : 0 auto ; position : relative ; } klipart

# content { width : 520px ; min - height : 500px ; } a : link , a : visited { color : # 27b ; Text - decoration : none ; } a : hover { text - decoration : podčiarknutie ; } img { border - width : 0 ; } # topnavi { padding : 10px 0px 12px ; font -size : 11px ; line - height : 23px ; Text - align : vpravo ; } # topnavi a.signin { background : # 88bbd4 ; padding : 4PX 6px url ( " images /signin - nav - bg - ie.png " ) no - repeat 0 0 , * padding : 12px 4PX 6px ; } # topnavi a.signin : hover { background : # 59B ; * background : transparent url ( " images /signin - nav - bg - hover - ie.png " ) no - repeat 0 0 , * padding : 12px 4PX 6px ; } # topnavi a.signin , # topnavi a.signin : hover { background- * pozície : 0 3px dôležité ; }

a.signin { pozície : relatívna ; margin - left : 3px ; } a.signin rozpätie 50 % ; padding : 16px 4PX 6PX 0 ; } # topnavi a.menu - open { background : # ddeef6 dôležité ; color : # 666 dôležité , obrys : nie je ; } # small_signup { display : inline ; float : nie je ; linka - height : 23px ; margin : 25px 0 0 , šírka : 170px ; } a.signin.menu otvorené span { background- image : url ( " images /toggle_up_dark.png " ) ; color : # 789 ; }

tento kód CSS definuje " Prihlásiť " tlačidlo .
3

skopírujte a vložte tento kód CSS do CSS súboru alebo na webové stránky , kde môžete definovať štýly definovať log- in forma :

# signin_menu transparentné , Text - align : left ; padding : 12px ; top : 24.5px , vpravo : 0px ; margin - top : 5px ; margin - právo : 0px ; * margin - vpravo : - 1px ; color : # 789 ; font -size : 11px ; }

# signin_menu input [ type = text ] # signin_menu vstup [ type = heslo ] { display : block ; - moz - border - radius : 4PX , - webkit - border - radius : 4PX ; hranice : 1px solid # ACE , font -size : 13px ; margin : 0 0 5px ; padding : 5px ; šírka : 203px ; } # signin_menu p { margin : 0 ; } # signin_menu a { color : # 6AC ; } # signin_menu label { font - weight : normal ; } # signin_menu p.remember { padding : 10px 0 ; } # signin_menu p.forgot , # signin_menu p.complete { jasná : ako ; margin : 5px 0 ; } # signin_menu pa { color : # 27B ! dôležité ; } # signin_submit { - moz - border - radius : 4PX , - webkit - border - radius : 4PX , pozadia : # 39d url ( " images /bg - btn - blue.png " ) repeat - x scroll 0 0 , rámček : 1px solid # 39D ; color : # fff ; Text - shadow : 0 - 1px 0 # 39d ; padding : 10px 5px 4PX , font -size : 11px ; margin : 5px 0 0 0 , font - weight : bold ; } # signin_submit :: - moz - focus - vnútorné { padding : 0 ; border : 0 ; } # signin_submit : hover , # signin_submit : focus { background- pozícia : 0 - 5px ; cursor : pointer ; }
4

Vytvoriť nový súbor JavaScript . Použite tento kód JavaScript pre zobrazenie alebo skrytie rozbaľovacieho log- in box , keď používateľ klikne na tlačidlo " prihlásiť " :

< script src = " JavaScripty /jquery.js " type = " ; .. text /javascript " . > < /script >

Ako si vyrobiť Drop - Down Log - In

Odporúčané články

Najnovšie články

Počítač Programovacie jazyky

Programovanie