|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
一个简单的登录和注册HTML CSS开发页面$ E) F( J0 c; N0 H" g3 `/ e" \4 X
' M2 b5 r. {" l% |+ H% k# {% u
, L' V2 o4 [" R: j1 _. ~登录代码:# H2 l$ W* p( j8 G! \& h4 q) I) u
5 j5 D# P9 V' P/ y[mw_shl_code=html,true]<html lang="en">. j% E, b. d0 m/ h. \" Z% H
% g# b1 w1 S _# {4 N. L<head>
# K$ W) X1 v" V7 r4 k( ]. l7 d <meta charset="UTF-8">
5 I4 q2 q2 F) u <meta name="viewport" content="width=device-width, initial-scale=1.0">, }6 N, @; T$ m6 X2 s( S
<meta http-equiv="X-UA-Compatible" content="ie=edge">
" S( a' h6 M4 {; P x <title>This is a login form</title>9 V( n8 F! {2 B9 G9 l
' R, w! L. i4 s% L; d
<style>
2 v/ M w# U0 c .modal {& K7 A7 w/ L5 }( [" f, G) I
display: none;. _2 Q; K% {! @# ^: R
width: 100%;% \ d3 a$ P/ j( m9 m; \ \
height: 100%; l" f2 q, i* x- V* v0 y
position: fixed;
0 {- N( O$ a+ n% h: k overflow: auto;# R5 r$ V! O3 ~9 L c
z-index: 1;
# S% g+ W4 J& N0 f left: 0;3 p4 o8 X0 o- `7 q& E1 P
top: 0;
% |# x' ^3 N; {* n* p background-color: rgb(0, 0, 0);
" U5 W3 |: s% Z { /* Fallback color */3 }/ \; @+ w; y* c" E+ D
background-color: rgba(0, 0, 0, 0.4);, G& f6 Y7 E! R( ^) m7 r5 d! O
/* Black w/ opacity */1 M( t0 G% I, y/ {5 }$ M( U! U- s
padding-top: 60px;
. l$ f; O/ f* @+ x
: {: N. l2 k( Q) Q }1 _8 r! p0 S( `& R0 y
7 o. o) _4 h1 G0 z Q .modal-content {" f2 }/ i: C9 M2 Y- C; K8 m. ?
width: 60%;6 n; T% z5 W2 M V4 r0 H" H A# v* [
background-color: #fefefe;" k9 ~. p6 l. `! m- ]4 N
margin: 5% auto 15% auto;
9 }" {1 W$ y3 o9 ?! J B( d& G" q3 b border: 1px solid #888;
! V P6 I5 g" E
- u9 R5 b# u5 _5 w }# d; q8 H3 N9 u0 }" |) Q7 G; W
& M' @' M( D7 Z$ ]7 {* C
/* The Close Button (x) */- E+ b; G3 T0 J# R5 l
.closeButton {, S" c2 O; v- {7 A: W3 Y/ \! T
position: absolute;! `4 i9 |/ X' a1 w# o+ g
right: 25px;# Y4 D7 s5 {0 G" S
top: 0;
) p, d$ F. R, H color: #000;- b6 H' O' ~) z( E1 F4 O/ x
font-size: 35px;+ I, H2 _8 U6 e8 O$ g( B6 I
font-weight: bold;+ S8 k: ^7 L: |. n# g1 T1 |
}
* G" ^7 \4 I; N, W, k9 A" v& |2 |, t, G( `4 q% f% e
.cancelbutton {' `, w6 X0 P& v4 q/ @
width: auto;0 r# N {0 L% L/ B5 l
padding: 10px 18px;
, R3 J# W% \# r/ U# d background-color: #f44336;2 _; i+ t. A: d& M6 s
}
3 Y# l+ n8 B5 @$ d( |3 l: k5 C) `1 F7 S# V t# P- O
span.password {
2 V; F+ [5 d4 P) N float: right;* r( g8 h# ~+ J8 K
padding-top: 16px;% H# K* o- \0 ]; N( x. P
}
8 M- Y: l0 ^; C' p' I( P( c6 \; j0 W3 s( v# j8 q- _1 |! y
.closeButton:hover,4 q# O. i! x; C$ y% H
.closeButton:focus {
: @( Q% {- o( B color: firebrick;5 b& W7 T: O5 s: |" K
cursor: pointer;4 h2 Y8 |1 d2 @$ E0 n
2 ]* X: n( @# b q }7 v& h3 T- q# b' E
0 S' l) w# m* {7 n" e7 J% [
.imgcontainer {4 t/ ]& k0 F3 J! ?
text-align: center;+ N4 }8 ~' X& h2 l, h
margin: 24px 0 12px 0;
% ~5 B; b! ?4 V, _ position: relative;
% q5 S2 Q9 T* C: f/ k }
! s4 d" ]7 X& ]- {' `: f
. O) E' l$ a9 M6 S8 z .avtar {
: E9 M6 Q' n% p1 _8 G& m width: 40%;% k. Z1 d- h$ c; O3 \6 Y
border-radius: 50%;0 o$ G# C. D0 ^
}- n+ p5 X2 M p5 m; f" G
* ^+ g; ^5 D5 a# ^, q& S% ? .container {
7 z& ^3 y( U/ x0 E$ D; Y padding: 16px;
( M! p( u; _* D0 L# } }
2 ]# {, e6 I+ u9 C M
8 |2 i" U: M: ]4 C /* Full-width input fields */; P$ u, b3 d& X. I$ X& X
input[type=text],: F6 \$ S, i3 `/ J) ^7 F9 f) R
input[type=password] {- x2 V- u. l7 J7 m; O( l! @2 g) F
width: 100%;( e8 w6 y' w4 [0 `8 A
padding: 12px 20px;
; l( ^7 i, E, M8 j* Z6 t! |0 x margin: 8px 0;" m9 Y) q$ J* ?
display: inline-block;
0 B0 ]/ ^4 I _4 B. u border: 1px solid #ccc;
5 _' F% v/ g( w- K( d S4 j box-sizing: border-box;" N$ q5 e, p, N' {$ f# @% ~
}
5 P; `& r! ?% H8 @% Z7 i' M4 p+ r; _
2 \4 w, E! Z; F% H- g /* Set a style for all buttons */
- z: Y: N1 m2 ^9 E+ Z* C! N% N button {9 a( y# o8 N4 ? o% M
background-color: #4CAF50;" W. l4 Z. Y$ R- k1 X
color: white;
4 H8 }* b1 b4 ]" `" d1 |, C padding: 14px 20px;; l; d g: c, z( f( c6 l# X; M
margin: 8px 0;
! i6 g* [& r8 ?! Y6 X border: none;2 c. k2 n, }' x( Y% b/ q- T1 M
cursor: pointer;* W1 ~- R+ F" n" U" e, l
width: 100%;
$ V0 V, ~! ^2 g* | ] }
5 B( Y& a& H5 I6 \ F& _# s; Y4 a' b% l- c- l+ r% o
" r) T- g5 d: U1 p9 K6 k: v button:hover {
3 z j$ M( L+ x( b( @' Z opacity: 0.8;
0 n2 ?# T! T4 T1 n5 J4 N3 R& ] }
0 Z* I3 u4 H8 ~4 f- ~# B6 D; k- s: `5 n5 A/ |( c/ P
/* Add Zoom Animation */
! _$ r% S' p! P) X: m .animate {
2 `* t4 x% u! e) y+ |5 s -webkit-animation: animatezoom 0.6s;
6 c5 K" \" K1 M! Y animation: animatezoom 0.6s
, w" g4 n6 q3 S: X8 [ Y4 G0 } N }
i2 M+ u; H' s7 {3 ?' w
4 H1 _5 e+ z& c$ Y9 l. l @-webkit-keyframes animatezoom {
* W4 H& t1 u4 E" x, M8 T! v L( t$ k from {
! ~8 [6 J8 z0 x$ c) S1 c( r/ a# ?( {! b -webkit-transform: scale(0)
$ [! a0 {5 Z( w/ @ }. o/ B5 G3 z e6 f4 _, N: L
+ n1 |1 g' W% z* _+ k1 D3 { to {
- f. ~3 U- M) x- x8 d -webkit-transform: scale(1)$ I' N( v, m7 }7 \7 a
}$ @4 U# E+ \; n/ _& ~. ?
}" D" j# ^/ i& L2 i
8 c! b5 X9 }7 h
@keyframes animatezoom {
" u- N" U9 p) V from {% Z/ |8 C! l/ J3 g/ F2 z9 I
transform: scale(0)
- q# w( X/ o7 b }$ X1 u A" [( ~ y9 e
/ @+ [8 @4 U, M to {: u# B9 \1 y$ y- p2 }
transform: scale(1)# V; g4 V, ~. V
}
( r+ u' [ `3 q6 i1 K }
3 J% b+ d; @1 @) q /* Change styles for span and cancel button on extra small screens */
' ^2 \! R0 n3 e- _4 w' c @media screen and (max-width: 300px) {8 b' p! u* [) V/ w( y
span.password {
1 ? V5 n0 h+ @; q3 s1 ?8 B display: block;
9 K0 J$ S6 P5 @5 w5 q3 H' F float: none;' R% B* p1 y8 V5 J A: w/ @/ \
}
. E4 J: f# Q _6 Q% f* s2 @* W1 r" e) `: R/ @) j" |
.cancelbutton {
( n' q/ X6 F+ \) c: _ width: 100%;4 k& w- S8 u" N7 ?2 U& N
}! H, t4 Z* e1 ?5 ?$ @( R
}; c$ t% g* u7 _
</style>6 f' W+ H" E% y9 v6 q, S
</head># a, Q$ G% u; k, ?" U0 y
* I3 O! J9 M' g- t- b<body>
Z/ k4 \6 H0 a2 k4 {
. }, Z& P" k1 a8 E6 F <button id="login">login</button>
# C' b- ]9 j# Z# Q <button id="register">register</button>0 w8 H( E* p; D( P( G4 B" E
; e# z+ e3 F2 m) u' e: d: F1 ?
<div id="formPanel" class="modal">
7 o: F |" ^8 ]- r <form action="./img/logo.png" class="modal-content animate">
/ I3 ^: K p5 u; n0 r1 x# z <!-- image -->
: V) F9 g$ D8 C8 m <div class="imgcontainer">8 K, i7 S D/ z
<span id="closeButton" class="closeButton"
: Y. v. [7 B/ o$ Q6 w1 @# i; h 2 h9 w, J* Y6 l0 b
title="close form">×</span>
, a, \: [( U/ ?; z1 g% U7 Q <img src="./img/img_avatar.png" alt="avatar" class="avtar">
% F# I8 \* K) R. o! f </div># X# h6 f. T+ v. y0 i7 Z! R
<!-- information -->
0 v0 O+ i0 z! J4 U# D: V <div class="container">" ]& G8 [% i. C/ X* Y
<label><b>UserName</b></label>
1 X9 c# ~: Q* x5 \6 z& Y1 j <input type="text" placeholder="username" class="username" required>
7 t$ x( Z- Y) M( n. n) |+ E <label><b>Password</b></label>
- r& o* ~% }/ X3 M <input type="password" placeholder="password" class="password" required>" O. ~3 R6 J3 F6 D9 {
<button class="loginButton">Login</button>
y3 H d! B. q, g- V: q% |: R <input type="checkbox" checked>Remember Me$ Q& B3 C7 G3 k& S5 H7 Y7 w8 C
</div>
3 w j: D0 J9 f J* L1 ?; X& @7 Y* F9 @- l. w+ y
<div class="container">
6 R! A/ S1 ?9 K4 s$ v; \ <button class="cancelbutton" type="button"
# y' ?8 h6 j& R- `1 w% U8 n >Cancel</button> ~2 ~3 y+ l9 m% {$ e0 [
<span class="password">Forgot' @/ |& r7 T3 b6 p! i: t; f
<a href="#">password?</a>! i3 L. ?/ b8 a1 c; H
</span>
6 R( } k1 ^8 [& L5 B- R </div>7 y% z( K% y* t9 N: l+ Y" y2 o
</form>" H% n# V( B8 \% p' j
</div>
3 z5 X$ p. j8 I4 T8 q6 j- Q. G0 n
9 ?. A) Q8 ?0 R K- w3 w' Z7 U6 S2 J: b& U# y9 @7 `
<script>
# r# K. \; k2 d$ W; E( l. D) x+ j4 l+ W* c. {
function loginForm() {$ s) D3 g0 m- l
var formx = document.getElementById("formPanel")
' ]8 a( V, I& E' d5 J formx.style.display = "block"
: W) y# y0 G% @" ~( r% ~ }
: |% ` E& s. t/ }/ c; C m </script>
9 G4 h' f7 V4 [/ R K- f5 V- @; v& m; y; e! ^* Z5 ]. T
: V% S- {% P7 J, Q; v</body>1 f& S% r1 h( A) {
! U v( c2 L/ k( J' U2 W
</html>[/mw_shl_code]$ ?' O Q \* p. k
/ E- J% j0 i2 e: o2 C' ?- D' v& L2 k- ?. ?: ]! G) r
注册代码7 X# y0 q- x2 O A* X/ c. v
% K+ ?( y! Q( K1 N[mw_shl_code=html,true]<html lang="en">. Y3 q3 T! b; }4 s1 s d
# \3 v- \4 c$ y) G7 L8 B2 W6 {<head>
( c+ F; J3 X; v4 S* E; l' K <meta charset="UTF-8">$ y w& b' R. W+ e1 }
<meta name="viewport" content="width=device-width, initial-scale=1.0">3 L# W- b7 c0 D8 `
<meta http-equiv="X-UA-Compatible" content="ie=edge">
s# D" L' b6 A; Y* X: m t) s <title>register form</title>
( s+ Y' z- a3 R- Y; \) t4 m. y( y1 C+ F9 W# k/ R3 n: G
<style>
9 l/ t( h. T7 W7 T .panel {
M" I- Y9 V V7 M/ ]9 g- c width: 100%;
$ U! _. D1 V0 T6 i y height: 100%;& M+ I( `( a: n
background-color: rgb(0, 0, 0, 0.2);; \( v! T; q+ t. N- ^
padding-top: 30px;, ^* V( o D ^8 _9 c+ A
overflow: auto;
# u, [6 T# V1 x) ?* z4 t. A/ ? position: fixed;
# D. p" i% z' B left: 0;2 j$ A7 H" ^# e! h& `* x* e
right: 0;
9 _- x% f8 d! j. a7 b$ L z-index: 1;
' k& T) F3 T# J0 S }" X0 ]( ^# k1 P% {+ [
' k! }3 R/ v' V( w# [& v9 J, T
.modal-content {- H% k: A& _$ E% m! T2 ]6 o$ h( r
background: #fefefe;* o7 U B4 _$ s
width: 60%;- H+ W3 o6 O7 I1 K
border: 1px solid #888;" V, f+ X: h" I4 A/ T
margin: 5% auto 25% auto;# h6 n+ L$ s1 H: @0 z, m# Y; `5 d+ u
+ Z: x, X8 H; T$ K9 @7 \! _
}
0 x9 h# a, }. @, `$ ~' g: {; I4 y8 \- L7 u& S6 I: R0 _- X3 r) m9 n
.container {
+ D1 f- M6 n8 r3 f& i( n7 w/ {1 t padding: 16px;
3 u& Z6 _% @6 B, s: i1 p& ] }) x5 Z; j7 \5 x+ ?/ r+ w: }% R9 {4 z
4 P6 f5 @7 z2 z4 S! p8 p/ R
.close {" g! h& g4 S: B' t' Z. ?
font-size: 40px;7 R g& ]- h# |$ M
position: absolute;
7 L9 P S! f1 R6 U: O' E" w top: 15px;
8 Y4 P" Z5 u4 ~+ G/ L' I% A% A right: 20px;
) r1 M v' Y$ ]) \6 b }
- K8 }# B3 l2 u3 N; Y7 j5 o$ C+ ~$ A k( G, s- i9 S( ]
.close:hover,0 }2 s+ a5 W) {, g9 J/ j
.close:focus {
; n$ ?. n" F! D3 |: V$ o: G color: red;
9 j( e }. k# [& ?9 H% J cursor: pointer;
3 `+ P6 K. Z+ \ z: h5 b }: y" f& S. O3 c+ J9 y4 a5 u: W
2 \# W* a- L- {; ~
input[type=text],
* K% Q4 f, W* K input[type=password] {9 j1 j# C) h; O( V7 d0 r
width: 100%;
+ g0 y' ^5 E8 O7 o1 c1 G. G6 M padding: 12px 20px;. m: e2 y, j: m$ }6 z2 D. y1 S
margin: 8px auto;
$ T) {( u# G( @3 i border: 1px solid #cccccc;
( x7 p1 Z' U* P: \/ U display: inline-block;
, ?$ v6 y" N( @' } }
+ L% V# k9 L% W& v2 W' \* }7 Q" [0 W' C
button {
$ ^! b( @1 ?+ N. [ background-color: #4CAF50;1 z% `$ h0 H$ O, N/ Z
color: white;
$ p( Z5 b. n5 h1 g; m9 a padding: 14px 20px;
6 Q O9 f! V1 w2 N margin: 8px 0;
. B3 }' ^0 Q" B1 a" Q( e border: none;
" O, C- E& S7 q6 x" r' [7 W cursor: pointer;0 P' N3 N* }# N4 q
width: 100%;
+ C6 H5 ^1 X* r A6 l1 b }0 F* t- U; K+ R% A3 |1 _1 b! P/ a I
8 j$ l1 |( e" t, P .cancelbutton {
& D- u1 z' e A; j4 \ padding: 14px 20px;2 Y* \* u' }4 U# \
background-color: #f44336;; y8 p+ m3 X/ O w, \! g( s
}
8 S9 Z- G; [( X" w' A5 W0 b
& v, A2 x8 H( t7 _1 {) v* U .cancelbutton,, h8 I8 u) u/ `8 l5 O2 Z* f! |& c1 @
.registerbutton {
7 ^8 ^1 [- ]4 J% Z- Q float: left;
$ n5 D! X/ ~$ d8 \ width: 50%
* ~# A$ }, A3 x6 Q+ o! M1 F, o0 Y+ N Z( [ }+ I" u% \( j9 D" W
* j1 C, d% a: x' O d7 {+ P
.clearfix::after {
9 }6 O+ u( k9 f content: "";
3 n, j4 X! b! p( v: Y4 a clear: both;: l! J1 V8 S$ n/ i. W* Y1 N
display: table;% p/ \1 Y) @9 \# g+ v/ Y
}# [6 f) G( U5 q& O5 g
</style>6 K9 \/ F C3 V( a
: U' M2 O& q' l
& s3 T( S7 c& Y" x9 s
7 r/ F. _5 Q! `/ G% Y- M. q3 W</head>
# V/ \7 Y) |5 H% T8 g9 P3 l2 y: P; S
<body>
3 D6 n7 m0 E1 h7 x. a6 [. ?8 w. B# L$ A
<div id="modal" class="panel">
$ {. A) C, `2 v0 W; C8 G <span class="close">x</span>
6 `4 Y- J0 T: e: @9 m <form action="#" class="modal-content">" B' {9 T8 t' `3 u# w" b: ]
<div class="container">1 t( ]1 ^: n% l
<label>Email</label>. p) G) A i1 H( e1 l9 b1 H; d
<input type="text" placeholder="Emmail" required>0 p( ` G g& c7 q3 _! ~
<label>Username</label>9 ]! a7 u5 y! s$ I' T6 k" ^
<input type="text" placeholder="username" required>
" _! h9 Z0 Y5 G* c <label>password</label>
$ W4 d7 d7 Z! y* a! G, s2 V <input type="password" placeholder="password" required>
& V* S4 x/ ]6 c <input type="checkbox" checked> remember me+ O9 N/ O( n4 f6 `! i8 x: N
<p>Follow the policy <a href="#">terms & privacy</a></p>) [: P2 c8 P1 p# W% f; D' K7 e
* ~1 f8 D3 O( A
# q$ k" K7 g0 _# M
<div class="clearfix">
# L$ T, S1 ~% Z5 {6 g% D <button class="cancelbutton">Cancel</button># p5 e& }4 X; l' ]/ O. [! f- ^; G
<button class="registerbutton">Register</button>) Q" s- i$ m) A
</div>
* v! @, J. k' t4 ]( K0 ] c/ g </div>
$ Q4 f3 E, v$ J9 ~, Y5 m8 E </form>
( h5 p! p# H d# q# Y* s1 J- @; `! U; @. k </div>
2 T) y; U# A. b2 L9 t
7 i4 g: k |# J$ q2 t
" z, m5 b2 P$ z1 Z! G$ j, @3 M3 E) V3 E# P+ g( `& f
# a M" B) q1 ?1 O, P) _; T+ C! x
/ x2 Z0 e8 y& a</body>0 j w- [3 w, f9 k* A: C
7 R$ B7 q: k, {6 w</html>[/mw_shl_code]
. Y3 T1 b6 v2 ?* d |
|