fleste mennesker logger på en hjemmeside mindst en gang om dagen. Brugeren klikker på login- link , hans ind eller hendes brugernavn og kodeord , klik "Log in" og venter for siden at genindlæse. Det tager kun et par sekunder. Men når du bruger en drop- down logge ind på din hjemmeside, du fjerne behovet for at genindlæse siden . Du kan oprette en sådan log -in ved hjælp af HTML , CSS og JavaScript. Selv om det kan lyde svært , processen med at skabe en drop -down log -in er forholdsvis enkel. Instruktioner
Opret en ny HTML-side og indsæt denne kode til at oprette dit log- in form : Hej
Erstat " yourwebsite.com " med dit domæne. Den "
" tag viser formularen og du ændrer nogen af de tekstfelter , der passer til dine behov. Kopiér og indsæt dette CSS kode til din CSS-fil eller føje den til den webside, hvor du definerer de stilarter : Hej
# container { bredde: 780px ; margin: 0 auto ; position : relative ;}
# content { bredde: 520px ; min -height : 500px ;} a : link , a: besøgte {color : # 27b , tekst- dekoration: ingen ;} a: hover { text -decoration: understrege ;} en img { border- width : 0 ;} # topnav { padding: 10px 0px 12px , font- size: 11px ; line -height : 23px ; text -align : right ;} # topnav a.signin {background : # 88bbd4 , padding: 4PX 6PX url ( "images /signin -nav -bg - ie.png " ) no -repeat 0 0 , * padding: 4PX 12px 6PX ;} # topnav a.signin : hover {background : # 59B ; * baggrund : transparent url ( " billeder /signin -nav -bg - hover - ie.png " ) no -repeat 0 0 , * padding: 4PX 12px 6PX ;} # topnav a.signin , # topnav a.signin : hover { * background- position : 0 3px vigtigt ;}
a.signin { position : relative ; margin venstre: 3px ;} a.signin span 50% padding: 4PX 16px 6PX 0 ;} # topnav A.MENU -open {background : # ddeef6 vigtige, color: # 666 vigtige, skitse : none ;} # small_signup {display : inline ; float : none ; line -højde: 23px ; margin: 25px 0 0 , bredde: 170px ;} a.signin.menu -open span {background -image : url ( "images /toggle_up_dark.png ") color: # 789 ;}
Denne CSS kode definerer "Sign In " knappen.
Kopiér og indsæt dette CSS kode til din CSS-fil eller til den webside, hvor du definerer de stilarter til at definere log- in form : Hej
# signin_menu gennemsigtig text -align : left ; padding: 12px ; top: 24.5px , højre: 0px ; margin -top : 5px ; margin - højre: 0px ; * margin - højre: - 1px; color: # 789 , font- size: 11px ;}
# signin_menu input [ type = text ] # signin_menu input [ type = password] {display : block; - moz - border- radius: 4px ; - webKit - border- radius: 4px ; border : 1px solid # ACE , font- size: 13px ; margin: 0 0 5px , padding: 5px ; bredde: 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 { klart: begge; margin: 5px 0 ;} # signin_menu pa {color : # 27B ! vigtigt ;} # signin_submit { - moz - border- radius: 4px ; - webKit - border- radius: 4px , baggrund: # 39d url ( ' billeder /BG- btn- blue.png ' ) repeat -x rulle 0 0 ; grænsen : 1px solid # 39D , color: # fff ; text -shadow : 0 - 1px 0 # 39d , padding: 4PX 10px 5px , font- size: 11px ; margin: 0 5px 0 0 , font -weight : fed; } # signin_submit :: - moz -focus - indvendig { padding: 0 ; kant: 0 ;} # signin_submit : hover , # signin_submit : Fokus { background- position : 0 - 5px ; cursor : pointer ;}
Opret en ny JavaScript-fil . Brug denne JavaScript-kode til at vise eller skjule drop- down log -in-box , når brugere klikker på " Log ind " knappen : Hej
< script src = " javascripts /jquery.js " type = " ; . . text /javascript " . >
