|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
一个简单的登录和注册HTML CSS开发页面
3 k$ k! {2 _7 A" P0 T+ L0 g" e8 p: u+ M! f5 L/ Y
2 Q1 A( `7 j8 i4 w8 p* W
登录代码:( ]' N9 y; p, A; z4 y+ l$ q- ]( j
9 |/ [& v$ o' z& a6 D3 W4 N
[mw_shl_code=html,true]<html lang="en">0 ?. e) D7 R7 {# b& _7 R. I
2 n$ c2 n" F+ L" a q% C<head>
' |1 Z: Z0 `5 K5 U, f+ o' w7 o6 U9 U <meta charset="UTF-8">
2 v9 Q6 _; e- N9 i <meta name="viewport" content="width=device-width, initial-scale=1.0">: Q6 e# `- J% c
<meta http-equiv="X-UA-Compatible" content="ie=edge">- ?: x6 D0 U9 d8 F. d1 f0 T
<title>This is a login form</title>
! M; I3 y' A6 V' {! u g- h* T7 b( m
<style>1 z3 z- P# D; E) Z. A4 _2 h
.modal {
9 G$ P' l# n4 X* S, J* z* l8 E display: none;
1 U. X5 s" A3 e7 V width: 100%;9 @) W% E2 K" Z$ ^4 d
height: 100%;3 q1 g9 D% u# }1 Z
position: fixed;
$ q* R$ R+ W0 X" F7 t overflow: auto;9 Z7 @) j& t+ Z' E% P
z-index: 1;4 i' Z8 D/ j# L+ x
left: 0;
; m$ ^* n1 Y; N. z5 X top: 0;6 \3 y* d) i, [3 l
background-color: rgb(0, 0, 0);
% P6 K9 h( F |1 v, t# U( a /* Fallback color */5 u1 G$ r; r( M* @; A6 `( r1 C: {
background-color: rgba(0, 0, 0, 0.4);2 X& C$ q1 }3 k% q3 i. a6 E
/* Black w/ opacity */- g! i- W" y2 n' G& i+ u3 y7 S
padding-top: 60px;- | T5 U; d! e! k0 L' ~
7 G" ]2 c$ w, D
} Q* s2 @0 ]% ]
) W+ A4 V& h" k" R) Z/ G1 M
.modal-content {
- a' _7 F) z4 T F4 o7 O) E width: 60%;0 q8 |6 z) C4 U8 y
background-color: #fefefe;" G( D6 J+ a" @$ T
margin: 5% auto 15% auto;! h0 y# ^$ s4 F3 }- }5 U+ }, u% H
border: 1px solid #888;% T$ z0 l# ?( R" x* Y, E' s
" m' ^& d+ ?! a w
}" W0 F4 _' e6 @# q9 w$ G6 q% r9 V# B
9 H& W% Q, O7 w6 k, L6 e /* The Close Button (x) */" s9 w: E" x( M% Z
.closeButton {0 k: d7 M) a* Y" i
position: absolute;# ]8 R6 B. s A8 w! L2 |6 r- F) w
right: 25px;/ z4 V* M7 B" L$ s% ]1 w2 c
top: 0;5 M" ]$ x' q6 P5 I+ e/ \
color: #000;
6 m! x( `8 f0 g+ |! e6 g5 d1 D+ K font-size: 35px;
7 `, {# B& j* Z font-weight: bold;
, _* p% h& z# G# P, ? }
' _& b+ [: P( R f9 ^$ G1 @; y f" ?6 f- \% x
.cancelbutton {# v; L5 d% T9 P8 n5 D
width: auto;
- {& z/ k" F3 X+ i padding: 10px 18px;
( u, ~1 G3 W D background-color: #f44336;
& A; H: R) X/ y& d% [8 V }
+ a- ~5 k; f& D n$ x; m$ H2 s7 d: G$ t, \5 y$ q9 ~0 o
span.password {* K) [- ~/ S+ Y0 y
float: right;+ D% I% C$ Q; c/ z! n
padding-top: 16px;& C" i6 o- L7 D2 J9 j9 i
}
, i" o( ]7 s+ Q9 }) u- j# k8 v) Q- ]! d. P! R( E- T
.closeButton:hover,& f2 H, M! X# X9 V+ D9 G G) E9 \
.closeButton:focus {4 a4 c. F. \+ f0 a/ |
color: firebrick;
! m% H' P1 R9 x( Y ` cursor: pointer;' v- }8 e, O; ]6 ?! {/ {0 u
- k0 Y, ^6 |. j( ] w1 w& Z% z
}
9 ?7 d# s( e2 Z0 d# t: q+ e2 ?4 [! y; e% d
.imgcontainer {( n- H) A( {) K8 P
text-align: center;
6 |1 y' j9 J+ S margin: 24px 0 12px 0;
/ J' F2 P8 m' j3 K7 \! d. r position: relative;
# h S: x) n) ?4 { }4 v7 u" E; [& K6 G g+ E+ |3 X ?
4 K" u# Y" o) |9 j R: b .avtar {
+ @ a+ L; x& D width: 40%;
- Z& U: B/ V1 b1 l! W! F! f: y border-radius: 50%;( \" [" L# u! Y5 s% t* Q
}
" U: z0 F- W% Q% n6 b/ u+ h* x& G# R1 f" n
.container {2 u+ t1 V3 j' C. O f
padding: 16px;
5 h: f4 E* d k4 ~ }
- h9 f' i% C- w, }9 Z9 @% j+ _0 B) c
/* Full-width input fields */
* |# ?. `( g. c: i1 c$ ]! R input[type=text],5 c7 _4 @5 w7 \+ J7 m5 F
input[type=password] {1 ^) ]5 E+ s: y& O
width: 100%;8 X8 @4 H" M$ l* u4 u! r
padding: 12px 20px;; n- u2 F% ^# V* t
margin: 8px 0;* S& ~; X" w6 a# R8 m0 C, x
display: inline-block;6 l8 d k# K% x) b7 j# y
border: 1px solid #ccc;8 F1 i! l! d' b0 I1 j ]8 |
box-sizing: border-box;& w6 U. b" B' G" B/ \% b2 b' R
}
& H4 j7 p j/ E7 u) a6 a, N# S/ L; k1 s! o
/* Set a style for all buttons */
7 g3 s* _4 f0 S# j button {
! R; t! V l; z1 c4 ?; o! ?. Q background-color: #4CAF50;
$ \& X( J5 V+ }; K" R0 ^! r color: white;
. f* k; r2 V8 o, \& ^4 l padding: 14px 20px;; @$ V* ] F# c& d; R& q& y0 a6 a
margin: 8px 0;7 U, O; }# ~7 M& ]1 r: {
border: none;0 H! P. F7 h2 Y5 {7 y+ i) }0 q9 h* l
cursor: pointer;- Z# t! G3 Y" d j- l$ l" @
width: 100%;- d- ]: [& u7 j+ ]- F0 U( n
}
4 f7 c4 B2 f: q( d8 C' s( M" c) Q T. {
7 G, t; X+ H( m( d/ {! q" c
button:hover {
. E* a( s! S. {' n opacity: 0.8;
8 E) T D8 [$ o7 `2 I* R0 |# h }2 [3 q$ I: n4 W
6 w8 O& i. J( J1 J7 W- G
/* Add Zoom Animation */% G1 ?) j X5 k/ x9 m: m! _
.animate {
6 v. {# r4 M4 ~* P5 O- x: \ -webkit-animation: animatezoom 0.6s;
; y$ o5 L$ l$ Y0 G animation: animatezoom 0.6s
; d7 n, Q* o, P: M0 K }( H% B! L6 d3 |$ h$ X
8 i) M3 T! b* y; X9 [- q
@-webkit-keyframes animatezoom {
' i8 F2 q L0 A' z from {
9 l1 s7 E4 i7 q0 c! s) T -webkit-transform: scale(0)" u; K- G7 B, D5 ]* C' T
}8 I4 r/ h2 P# \; {
. G6 w, |# g0 n+ P: l* e, [$ G to {6 P4 |( S* @+ }' A6 H r
-webkit-transform: scale(1)
+ p6 {6 X0 _' ^2 h$ g }
) d: b$ n% w% o" ^1 }0 q }
5 |& m# M5 I5 t( K, l7 X9 ]/ V x5 [7 i$ k, n# w
@keyframes animatezoom {
! g" U% x6 Q, v% _4 b* T from {6 t2 w2 J7 T9 V4 D) {/ {3 A
transform: scale(0)* J' m# T; f- Y0 p- H: y
}! q/ d1 |' `3 u; l3 P2 |+ X0 a
$ |( A8 r# k% x# |- x$ v7 y
to {3 S. f& @7 s1 K o* y. N2 @9 \
transform: scale(1)
/ y6 c+ G. g. V; Q* P1 T; z/ I* ]7 ` }) v7 L0 Z t% u' |( p5 n, h. `
}' l0 Z5 w) A/ H5 o4 _( V4 A* g m; H
/* Change styles for span and cancel button on extra small screens */
* o7 v7 C0 v# w. X- ~8 F: S @media screen and (max-width: 300px) {& g. ?- Z$ Z' K- D
span.password {% V0 d( p5 L1 |( W _) w
display: block;$ n; g( C& ~% |, s; W8 j: G v
float: none;( m( F) N* Q% x4 F* m2 o
}
7 ^+ l0 x( j8 m' I5 L& w' ^% @- _. q" Y9 v5 }
.cancelbutton {
. ^- F: W0 O' k7 G0 g: w width: 100%;1 z U+ d3 T% o/ R! H
}1 ` N9 F$ D6 c! c* k
}; c2 W( w D# f6 n. C. \
</style>
: ?+ e6 o9 m1 V+ K8 V7 |9 p/ w7 k</head>
( v5 F9 Y% y4 H7 c8 ]0 y2 M; Q
' G/ A( T9 Y* X- r<body>: q2 v+ Q/ O V* h! K, [, Y
7 }, l; A* q# z( y5 A1 V, W <button id="login">login</button>
5 @5 o' K- q( e) | <button id="register">register</button>9 f5 Q) S4 s5 W% h7 m8 x& S" k% Q
4 U8 o5 f* z* U1 u+ n, Y" y1 G& u <div id="formPanel" class="modal">
+ `2 b% _3 Q; R4 { <form action="./img/logo.png" class="modal-content animate">. g4 Y; Y3 ]& C* |; R+ k
<!-- image -->1 }- }( k; q) G7 i/ P
<div class="imgcontainer">, a5 t3 r1 Y$ A7 j( Q# A! Y/ n
<span id="closeButton" class="closeButton"
' O" ?/ _( ?- l& K
4 l8 G! G4 O$ C, ]$ p/ x title="close form">×</span>
/ } E$ L) n# D1 W2 l( Y) k( `/ e <img src="./img/img_avatar.png" alt="avatar" class="avtar">4 B. m4 J9 W/ C) l: X* t
</div>. j: I1 U2 {9 [4 Q% N
<!-- information -->) R; W& ^5 {3 [ @- k
<div class="container">: P- [& V) {! i( I% x5 t
<label><b>UserName</b></label>8 f W. w' ~* T' o$ K0 A
<input type="text" placeholder="username" class="username" required>$ B" d% S9 N3 T: `2 c7 C! O
<label><b>Password</b></label>0 e7 c- U8 a1 G' ~. q
<input type="password" placeholder="password" class="password" required>: C% j/ y j) U& S7 m
<button class="loginButton">Login</button>. M- N* g4 t: t2 k/ H ~
<input type="checkbox" checked>Remember Me: M4 r# E& h2 I9 Q( i5 L& z
</div>
, w) I# D9 _6 i1 w, q8 c* t) F" ~. v, O2 B
<div class="container">1 C3 W+ E& y: v5 ~$ @- x
<button class="cancelbutton" type="button"
3 ~2 W; V) V2 S- I >Cancel</button>
% a. k( e6 o+ ` e <span class="password">Forgot
# h) J+ F$ M, j: `% c/ b <a href="#">password?</a>6 c. L; J0 O* p( X6 [) Q7 K
</span>+ O! K1 Q& N! H8 T4 k
</div>
. o& {+ u6 |, Z1 a) r- l </form>
9 F, W4 m! A1 Y; m: i* R& X* _( | </div>
; O3 J- I8 }3 c9 a9 _/ D$ I5 Z, p6 X$ h/ y& q z* h; O
/ [& w% W9 x, _, t" D& ~5 [ <script>6 f5 q& T/ m @/ `( d3 y# Z
! Y) ~& K2 }0 k$ } function loginForm() {
) c$ C( X5 O. _$ N0 |# s5 t var formx = document.getElementById("formPanel")
8 R% E, L' J; }: W: O- u formx.style.display = "block"" b' ^1 p, v( r: U- s
}
0 v N8 F/ ]( g; y+ W, o </script>1 e! D& E0 f. w" p8 U5 l
5 O s( F: ^* J2 p. P" M
D0 Q; l/ m" E9 {1 d</body>
4 c$ z/ G, F# C. `3 \
+ Z, W( M1 Q! I# t* s</html>[/mw_shl_code]& s; p* ?$ r% o; g7 i; r
4 e; F4 Z5 u3 c6 W; t
3 T- J- b. H/ C" F3 z1 h# A; x, G注册代码
; |0 S" U/ a" X: L: ]3 {6 t$ x7 ] ~1 Q( U- \0 X5 h# j" L- B& J4 e
[mw_shl_code=html,true]<html lang="en">
7 X9 ^( a" b9 a+ F' O6 a' G1 r7 Q) b4 u7 L( @
<head>! C, ]4 x5 _% ?2 I. D
<meta charset="UTF-8">( e( i" I- K2 c
<meta name="viewport" content="width=device-width, initial-scale=1.0">
! R& O+ ^4 x: _ <meta http-equiv="X-UA-Compatible" content="ie=edge">
& u' C: A" G4 f1 b$ {: U3 B- c <title>register form</title>
4 @! F8 u# x6 _3 M9 L+ O- H- s
% A! u. F- S, j* }" P" t" Q <style>/ ?2 J* |+ p2 w( `. v
.panel {( G" P" o) H/ ]/ S- r9 F; R
width: 100%;$ \( P/ C9 c, H& u* V
height: 100%;$ J9 Y/ ^5 m2 j# } Q3 {
background-color: rgb(0, 0, 0, 0.2);- P# y) x4 f( @ t, N( A* r9 ]
padding-top: 30px;# X+ @! k! c% e0 k+ t
overflow: auto;
. K; x) F4 i. [9 \ position: fixed;
, {. ]. u0 I3 o l e. x left: 0;; r' V7 z) s) s$ o8 C( S T3 {( t
right: 0;
+ n8 f7 W# c- F' |& T' P& }, j4 d z-index: 1;9 F: \4 ?7 a8 R9 @' p& F
}
& I2 S) Y) }5 H: Y1 f
: l' V) x6 I+ s .modal-content {7 ?, J1 [4 I$ h. i9 }
background: #fefefe;1 B0 _5 K+ V' w+ J2 N: h; Y, N
width: 60%;5 ^7 X) e+ K6 a" v- @) X
border: 1px solid #888;
+ C; r3 o0 V# k( k; e2 u% ~ margin: 5% auto 25% auto;1 [( a0 u; s: E. c* t7 }
% [) N: Q5 Q# g8 G8 D
}, _% B4 \7 ^7 h v+ X8 j! C1 w+ c. {
# P5 H& U5 x. J" @+ ^0 x. s0 ]
.container {
( d: Y# n. Q' y1 P9 F1 B padding: 16px;
& s8 u; g6 Q( I6 I. B }
& v% ?7 S; f! z5 B" H2 u8 K$ u
" d, u7 R2 }6 X% ?8 t- [ .close {$ B( H2 I8 m* K3 L
font-size: 40px;" w! X0 `/ Y6 d# Z8 {
position: absolute;
# k: F" C/ f! A; r7 d6 z5 _: `, a top: 15px;: E1 ?# J& e" R8 B8 O
right: 20px;
: l3 R, w8 n. `! h2 N# i6 D* ^6 q }! w8 I8 v2 s* o: \4 m4 Y
7 Y% o: E( D7 Z0 U
.close:hover,
% L' E1 W E* z .close:focus {
+ M8 Z; G. E+ Q3 d color: red;/ q9 h. F* m4 }* j
cursor: pointer;
, [" s' Y& `, U5 I$ ]% u; J9 t9 f }4 R# Y s9 {4 d; l5 j
& e% e$ S: l% @ input[type=text],
% [( { v* {: b9 @3 _8 Q7 Y input[type=password] {$ Q& H- y; L. h) t
width: 100%;
: y" i) F* D& m& _+ M4 | padding: 12px 20px;
: I0 U5 t" H1 g) x margin: 8px auto;
9 N( D* a* |" y5 @) Z3 E8 N2 }6 w border: 1px solid #cccccc;
9 i- \% ]1 z$ o" `: k0 ^ display: inline-block;
' c3 G% Y \1 f }
# \! |; L1 G, _& M M- G1 M C9 O: v. P
button {$ S0 Q3 p0 G8 }8 h+ c/ I! \0 }
background-color: #4CAF50;
9 h9 v- N) F5 f color: white;" Y$ d+ c! d O0 O7 u
padding: 14px 20px;
: ^" I1 s! v6 Z* z6 | margin: 8px 0;
+ O h5 j' Z& `& R border: none;/ Z! I1 }6 P( W" Z! d4 U. b
cursor: pointer; G; a' N. a% H1 B( L# C; I6 m
width: 100%;
' K8 a4 w" P$ |& H }
, s6 o% C. }0 o% {. }) J& v/ J( M' R. W2 B8 ^3 }: m
.cancelbutton {
0 @0 R" O& t5 v# M; c$ ~( i( m; r padding: 14px 20px;
4 o3 e6 S9 \8 ]5 a4 ]" @0 V$ E background-color: #f44336;
5 c3 a! u3 K" w! d0 x& C }
& k' y# x1 t) A" k7 k" @2 N7 v: k' j1 t" b& J
.cancelbutton,# Y2 R# _2 ^# e% {
.registerbutton {
; e# Z; [5 E4 _7 F C3 P5 X* X' a float: left;$ D- Q9 `( d5 u
width: 50%# [$ y2 o, j- F% `( O8 Z
}1 z" t' u4 E% b4 A4 |
! Y4 c5 `% A* x8 O4 u .clearfix::after {
8 M2 h$ c z* e( p; S- w' R content: "";) n" \! w; t$ g
clear: both;
: d6 |& q: G# w display: table;
- R, D/ u( j3 y4 K) u4 K$ L }4 L$ @; A9 s8 x6 J4 M D4 R$ B+ S
</style>
/ F3 C5 x# G) Z# o7 s6 T# S4 \6 Q/ z7 I1 s9 J) y! t* q
" O% W, M. X; O1 h
$ ?" t2 L1 V% S/ {* W+ C! y</head>" d3 N6 S/ t$ |7 g6 J* ]% @
0 p! Q. o! b% C7 Z<body>
" m, h' c% y- F' H) r! T2 f# J7 K
7 j( C/ j$ H1 Z/ _7 p2 c& r7 Y6 F s <div id="modal" class="panel">
6 L+ G+ z% ?1 m- t <span class="close">x</span>
2 I [ @+ ?9 o d" U3 l <form action="#" class="modal-content">, ?& f4 w) z0 e) j2 \0 o
<div class="container">. U' H7 K9 S& x$ l; P# b9 _* l3 [
<label>Email</label>
, a2 ?( @8 w3 L/ R- j" H4 } <input type="text" placeholder="Emmail" required>- A( z: o2 t5 \7 J" _- ]2 _& b
<label>Username</label>1 Z! q6 X; ^9 \6 I3 I
<input type="text" placeholder="username" required>
5 h& y( ]& Z- h4 Z6 u <label>password</label>0 c) |6 M+ M" G& C0 x' j8 X% C
<input type="password" placeholder="password" required>4 d- N1 d5 k8 o8 T" S
<input type="checkbox" checked> remember me
8 Q" N+ P7 p. o4 Q; h' y' D& ] <p>Follow the policy <a href="#">terms & privacy</a></p>" ^1 H2 t) H s! G' S+ I1 g/ Z$ H
/ p i. Z& n6 h$ ?# K0 I& E
( B% G; H6 S/ _/ z5 p2 C! K <div class="clearfix">/ p6 l+ i5 V h+ A8 j' `
<button class="cancelbutton">Cancel</button>0 L( q5 b$ D$ H
<button class="registerbutton">Register</button>0 l; i0 V3 ^# n! d% ~" ^# `. H
</div>, q8 S {" j$ o
</div>" J! l- w6 X/ K
</form>
) o, O1 M* B4 _: X- m2 a. ^/ g4 B </div>, G" K8 T# h8 ?. N2 _4 G# }
% E5 q4 j5 x! {+ H9 b( W5 L3 v, K9 F. Y' h9 Q* A. d) z% H
: `/ _7 _. d1 K* O" _. e" H" w
# m& S T; N: H' L" _9 f" U/ f
- a" m& m; v& Y</body> ]$ t& w, |3 a% l& w
0 e: b, e/ h4 k</html>[/mw_shl_code]
- H* h* J% c& [: L/ D" B: j4 V |
|