|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
一个简单的登录和注册HTML CSS开发页面
6 l5 Z/ T7 D' B4 P+ ~* W( f
4 F/ r- N! k n. r! `$ b4 P
$ F4 S6 L# o6 y0 _5 b登录代码:
* E1 L# E0 x8 h, b" h" F4 S/ `. E: o- X
[mw_shl_code=html,true]<html lang="en">! P+ m6 V" y1 d
# c1 q. {) f- J; t<head>
( w3 M- y+ b1 p/ T- H4 ]! n; ? <meta charset="UTF-8">
. X$ {' Q Y5 |1 h! ^5 `# ?% p <meta name="viewport" content="width=device-width, initial-scale=1.0">
% i. W" _; k, L7 `7 b <meta http-equiv="X-UA-Compatible" content="ie=edge">& b% O4 g; e$ K' G7 y
<title>This is a login form</title>) m( h! N8 O4 Z- S/ \
9 Y A, w+ N0 p( v7 V <style>/ L1 o y3 E, J
.modal {
# x3 u) v @4 L. v( M3 k, E. r display: none;. \7 D" ]# e: w+ _
width: 100%;
, G$ Q( ` K& p" b/ a. ]" ?0 q height: 100%;
( f8 h8 V! w0 l7 h! ~0 x" h; L position: fixed;
5 @; c- s9 G3 F0 H% ^3 J0 d overflow: auto; G* W; h0 n0 \" h1 r
z-index: 1;
( S& q1 s" G/ I& G6 L1 f left: 0;
9 Q4 G* ^1 t; v* V3 P9 N top: 0;3 w% a1 A: s; o8 w
background-color: rgb(0, 0, 0);
: L# o( [& U5 w5 D; ` /* Fallback color */
! k4 m0 `, N4 _ E$ h background-color: rgba(0, 0, 0, 0.4);
' c% x1 I2 _# T9 V /* Black w/ opacity */
, M! ~0 z" l& P- ]& L+ Z padding-top: 60px;
. L2 g, {, H# q$ y6 \, o* l: ?' B1 J. r+ }, M
}
+ h4 n# o, K3 O5 a* s, s8 I& Y
) e6 S) a! A' _2 x$ W/ H .modal-content {
7 L0 r3 n$ Y. z' X) m width: 60%;4 g u& c- ^' J1 w
background-color: #fefefe;& ` p' f* g u2 B9 Q6 h1 m
margin: 5% auto 15% auto;
; W0 Z {/ m- L; d6 `/ A3 E border: 1px solid #888;
' i% p+ [4 S# Z3 k$ B* T8 S% R- j! b0 f/ ~% @3 [- o
}
6 }, X. z! a& o) r9 _8 I
. b/ s2 x8 O5 p! }# k /* The Close Button (x) */) P/ j6 m6 l5 j7 M y( P$ e5 B3 D9 a
.closeButton {$ N/ o+ B& f2 w
position: absolute;
: V* e$ l3 i- k* r0 K) X right: 25px;: S9 m. u9 l9 g+ a2 `
top: 0;/ c: U$ i/ S# ~. \8 v
color: #000;
. z q( x$ q' c, |' m9 I font-size: 35px;6 y! y+ c- d, y D2 |
font-weight: bold;# n( V" `7 }' A9 h# j8 P
} l5 b% z* {& g# C9 W
' B) x3 R' T+ H9 ^
.cancelbutton {
' o6 z) J1 P/ y3 K width: auto;
1 f& S9 ~ \' [" W3 B5 p padding: 10px 18px;! [. ? @* S5 v' I& v
background-color: #f44336;
& r, z# z) g" i5 J1 c }% D) y! ]* G E2 t
$ q7 @7 J9 f) \1 o8 I" G
span.password {
) ?& ?6 K. x H e v/ z/ q* p float: right;0 P5 |9 G5 V8 [
padding-top: 16px;
) t' C K" q5 v$ i }
+ o( m5 P7 B% K; w
# Q1 W2 E4 i5 G% @" Q2 ], E .closeButton:hover,
+ D, h' H* o5 h/ H3 L) f8 N .closeButton:focus {
9 n. F8 O/ I5 q: s" d9 S9 q color: firebrick;
' _* D; `* f3 a& V cursor: pointer;3 e3 c! @7 \: v. T
; x/ p: U G% O; ], W5 t' R }
# ^4 R' I% _ H
+ k, c/ v3 u' O .imgcontainer {
9 N! _1 J) C2 V7 M+ W text-align: center;; g2 V$ y1 N9 W' X9 T
margin: 24px 0 12px 0;1 @: c7 D' ]. k% O7 I. Z1 O. q
position: relative;, z* S% F; |. h* {# a( [! Z
}
5 C- [# k/ r k& r" v6 t! ~7 L
+ w& d: U+ z, ^- g! g .avtar {3 f; v. e/ Z1 Y/ a2 d; y( _
width: 40%;: l) Z* {% ]7 S! W2 Q8 Q
border-radius: 50%;
2 D2 ]. W9 }( ` y; ?# Q7 v( h$ j }
( ]1 C5 C6 I d' |! o2 Y. z& F
; f1 S3 b) c/ ?+ f, q2 P2 l .container {9 t: Y2 j; Z/ \3 _# C, M
padding: 16px;: O" X: ?5 W% K3 z( d
}
1 J8 [# C+ J- \
, M: M+ C2 z8 k! A8 S2 D4 O /* Full-width input fields */+ p. o" y F4 v; X
input[type=text],' Z: L- n: i4 ^9 Q
input[type=password] {/ s& X& J" X, ^8 D
width: 100%;
9 B' |! l- y+ b4 H; [- }0 ]+ a padding: 12px 20px;
! h; t4 m C9 n! @: l2 L4 U. F9 {/ m margin: 8px 0;2 b6 T' w- `# Q$ N- s
display: inline-block;( I0 T* Z% c9 }
border: 1px solid #ccc;. G, E; l% S7 c
box-sizing: border-box;5 ?* I/ O3 x7 v0 Z! F
}
- y! j D7 N3 O8 H# Z
$ l8 y# v: ~. }- o# F4 p /* Set a style for all buttons */
* b% x4 r- b( W button {1 g1 h1 Y( i: D2 a+ y' k4 c
background-color: #4CAF50;
1 A$ J# s4 z1 I* _ color: white;0 i* d) H" {& e4 J
padding: 14px 20px;
# k1 [) q- B8 r* c/ U, L; g margin: 8px 0;
5 X9 d( c( D, a4 r! J4 _ border: none;
' E7 [2 F* a3 A, k cursor: pointer;* l G! \5 K# B/ |
width: 100%;' k( D3 o. C# Z8 J% S# r( _7 p. ~
}
' @% i5 j* E/ c7 [8 q, Y# n5 L2 d7 Q+ W' H
+ |1 s' Z2 f! I: _( d0 K$ q
button:hover {
7 O4 Q9 P% a. N$ f- p K opacity: 0.8;
( K4 r/ n6 c' E. @9 F% T* G- i }6 m" B ]+ W% }
6 y* F$ s! I$ |: g( `
/* Add Zoom Animation */' ~- h4 E7 L& N/ \8 ^$ H2 ?
.animate {
9 H) _( T% d1 M* K4 k% M -webkit-animation: animatezoom 0.6s;
, Z% V: w5 n& a% h2 Y r9 D animation: animatezoom 0.6s
( ]2 o5 g! |- Z* ]/ a }" a+ ^0 u7 O# U
* X! O0 O; y5 f2 Y" I% p1 d
@-webkit-keyframes animatezoom {4 p* H; k5 X9 u/ L6 l: C, {
from {
; M: h1 C% T* ~ -webkit-transform: scale(0)
3 W6 Y8 J* \. n& B# _' s' P. j- Y, x }
' f8 Q3 \: N$ Q& `$ ^6 _8 g1 a% I7 G
to {' i, N) x) Z8 z) n4 f& h5 ]: q
-webkit-transform: scale(1)
( ~% l* |5 j' U+ t }
8 ?8 G- F1 l) ]5 ~ }& X+ C/ s2 S# e/ U% l
2 m: r; F( O h3 U6 j @keyframes animatezoom {4 Q) W/ n! Z2 ]. O! i8 d
from {
9 g% M" W I+ }1 @1 j transform: scale(0)* R% y" |1 F- b% Q% f+ |
}
: u, | w; u+ I/ a D; n7 I7 E# l2 c0 v! f ^5 j @6 k
to {- n8 M# i' F- t5 A% D) J
transform: scale(1)
1 q7 r- s# i B' C }1 |5 i) q, ^$ W" L! ~0 b; R& f
}. u5 e4 v+ X# I0 A! e4 x& @, B
/* Change styles for span and cancel button on extra small screens */
: f; k7 L5 @! ~3 `) f8 l @media screen and (max-width: 300px) {* D; L' m# D( E: w; F0 N
span.password {
; I9 G2 w$ f$ i/ U/ X display: block;8 ~0 T Z# ^ D% g# i
float: none;
3 S: p; J: T- ]- d; m: B* ? }( y. v$ N2 K( P7 [5 Y& ]
6 I* w9 a0 D8 M1 t' @2 \4 w2 O
.cancelbutton {& H8 h+ h9 t( ?
width: 100%;
9 y0 |$ g* ]2 `/ R5 [2 e5 G }
6 D. q' N0 r" r% J: n7 B; t }
& v5 F/ P3 b- ?! u </style>
/ X) o) R2 K6 c2 u0 [, {+ x</head>
9 x" N. Z% P+ r9 S7 |
" n) V% W- Q: D<body>% w$ G% g7 C* z! }+ l/ {- ]
6 l, e; e3 O+ n/ q0 ^6 g <button id="login">login</button>
- |# {9 f; L3 p( Z2 y# d <button id="register">register</button>7 L( g/ Q, K& o. L2 L, v6 H7 d
( u. K% {* Z! }& r
<div id="formPanel" class="modal">
% Z T- V @5 t( S& f! A+ Z <form action="./img/logo.png" class="modal-content animate">+ D( p3 y( x2 w4 T
<!-- image -->
! E; u( h% k: U8 H! p <div class="imgcontainer">0 k1 q+ N8 ?: J+ L
<span id="closeButton" class="closeButton"
7 Z! F7 p! s X( a0 Y
4 z' g' y: _8 [9 ~1 ^' J0 p4 E3 k title="close form">×</span>" G2 c7 E: v6 N; c7 c( [' w
<img src="./img/img_avatar.png" alt="avatar" class="avtar">
4 I( L6 F& X9 r0 D </div>
# y! t- G( T2 { <!-- information -->3 j( h' g' v/ i$ G
<div class="container">
* g% Z4 h( ~, B5 v <label><b>UserName</b></label>2 ]- X' A) _# n+ d4 i4 \
<input type="text" placeholder="username" class="username" required>) I) e- J/ _( Z4 x4 n' t* ]
<label><b>Password</b></label>7 x2 |$ p* t3 Y5 x+ `7 k
<input type="password" placeholder="password" class="password" required>
# N! j, q% y& n: B5 R <button class="loginButton">Login</button>
6 ^; \4 U* G, y% c2 R# a l <input type="checkbox" checked>Remember Me ?' Q# l1 q% M6 e( P, V! Z
</div>
' ^, |; C \ R2 B0 S5 I7 {
9 F# N( a* _3 |: ^ b" y <div class="container">
0 J# g* c/ B# N& Y3 B' ]. l7 V <button class="cancelbutton" type="button"
8 v, B6 L- _ Y; x+ C7 ? >Cancel</button>8 ?. p9 v- w2 I3 Y
<span class="password">Forgot
7 u8 O9 J8 N0 @1 n8 q! c* n- C <a href="#">password?</a># b/ z( M& f# g# o6 I) ?
</span>
5 E$ U- f/ ^, D, C0 k! }1 W </div>
) C2 s+ ]7 A- L; a A </form>
# J# \7 H" ^) k, C* x </div>
2 ~# V7 u0 O+ a w6 i* L; R3 B
/ W% Z2 ~ d# l2 P8 k. p
: X" v2 Q% `0 a* n5 ` <script>
; Z% C3 M: k" V# }, S5 e" D" T2 e; T A
function loginForm() {& q. y' O9 A2 G' a/ B
var formx = document.getElementById("formPanel")
4 V' I2 V2 `! Y1 r$ p( e" L: c formx.style.display = "block"* C' l( ~7 r, P, _% q( d6 p% ?
}
$ ^/ j4 z. I4 B) d4 n* D/ u </script>6 K" i/ S9 p0 l& _0 j
9 ?5 L; x: q0 w1 o ]! ^1 Q+ `6 a0 X0 s ^1 i+ p# h
</body>
) i) R3 I1 f& ]5 o4 j* t0 b% y. B' ^' j3 _) _# D2 O+ L/ e1 S
</html>[/mw_shl_code]/ l4 g. E+ w0 I& z/ U; v
9 V, b0 j: J& v* i5 p4 M; C
( g" G5 t4 h8 D P: w
注册代码8 V9 p2 V7 j7 m1 Z
1 Y7 c/ P! F! o: K2 w2 k1 v* x$ |
[mw_shl_code=html,true]<html lang="en">
5 n% n, q5 ^* t7 j2 `* A: \
7 c. _5 {9 f+ W# n0 N<head>
. c" [2 g+ o9 |9 h9 o+ H <meta charset="UTF-8"># A, _- o- p0 L* T3 x9 Y
<meta name="viewport" content="width=device-width, initial-scale=1.0">* W' x, k2 u/ [6 ?9 H
<meta http-equiv="X-UA-Compatible" content="ie=edge">
+ J/ N, {6 O/ N6 a) w# r <title>register form</title>
6 v8 w8 ?# b1 i- ~* [& z) w1 E
/ O2 N* w6 L3 W# m9 A i( i+ { <style>
( \7 ~, I+ c6 `- B .panel {
$ D1 r" H* j* n. d! r width: 100%;) W: ~! ~4 Z. X5 v* h: I4 Z
height: 100%;
. s* B3 i# O0 k2 K, x3 a" Z. B% W background-color: rgb(0, 0, 0, 0.2);
8 S6 L0 i4 C8 J0 P8 m: z% G( `: y3 ~ padding-top: 30px;
) z2 F3 I4 p5 F: ^, [8 U6 S overflow: auto;, D& }. E- k' Y# s) P
position: fixed;5 z2 e- C* q7 t/ d- G8 v6 @
left: 0; I+ J2 D! _; ]/ I/ |8 r
right: 0;7 Y" S& C1 q+ {* E, R
z-index: 1;
$ u0 B8 I0 W% T+ h3 ^ }
( C9 i( G# A% F3 M4 D/ z' m3 Q& D/ ?# C7 D& l5 b6 u6 b
.modal-content {
6 w/ Q8 P2 K2 S% ?5 t# p background: #fefefe;% r& N. g; j: Y6 ^* R+ \+ W
width: 60%;
9 {7 C, D2 j' s, k& N C* h border: 1px solid #888;, b/ ]$ Z1 M! p! q" \
margin: 5% auto 25% auto;
4 @! ]. P' o! U. D( L6 ^
& c( Q: S& e) z) i }1 h S! k. J6 @7 E3 A9 P; ~" P
0 W! }$ n# t1 I6 b& S: K) p8 |; D
.container {5 c) B* q+ z) r V6 h3 ]8 C
padding: 16px;6 Y& n# A5 @# `! T6 c2 P
}5 b2 d$ N( e/ o1 H
2 G2 r) ?3 R4 W8 G: w1 y .close {8 ^" J$ ^3 w0 `8 s$ q
font-size: 40px;
) a# r2 u/ W6 ^3 F! J) u! O8 C position: absolute;0 V5 U+ t: @+ d/ F& b7 o9 z9 r
top: 15px;
7 u. e: c( W L0 a! {" \ right: 20px;) d7 u' u$ S% D7 @* [+ ]9 d
}
# f$ g. \, f0 {" y* x& n" e1 b
; h# V7 K& d% _ .close:hover,
6 J% g3 [: I$ x .close:focus {* u Y2 J* a+ h: ~* G8 F) r( k
color: red;
+ w: S; d+ c- I h E! D3 H$ j2 ~ cursor: pointer;
% f5 [ }8 d, U; k; S Y# D }* j$ d) l' ^6 x
# R9 b4 x( j, f0 M4 t+ p input[type=text],
% E3 ~; h" }7 r0 R2 N7 A, l input[type=password] {/ q( y" _8 T; ?& c8 l( u( V5 t# e
width: 100%;
+ M- Z8 Z0 f+ M; x8 g padding: 12px 20px;: N0 W) y! S" G5 g1 V V; X3 K
margin: 8px auto;: S1 N( ~, o% ^% C" j! `: A1 U
border: 1px solid #cccccc;& W8 k: ? ^& f) K
display: inline-block;, z' P5 w) B' ~2 ^0 [
}3 N$ D; M/ t7 u* \" ?* N
* a$ [. C8 Q' U0 ]+ R
button {
; L3 t9 J1 r, e, T: I1 Z9 G background-color: #4CAF50;
# i, }, j4 G, J, p. I: b/ L1 q; ~ color: white;8 U) E' H6 B4 |6 v
padding: 14px 20px;4 f8 l9 I' p0 E; I; `3 S
margin: 8px 0;' m( ?( \0 C/ U1 \: ]0 d4 W+ d' f
border: none;
8 z! c1 V* S' p7 a& m cursor: pointer;. Z* {; u+ K8 R
width: 100%;) Q# |2 G7 _ p/ ~* z6 s$ j3 ^: O
}
$ X3 ?. O0 G/ _) B1 T# M& `9 Z- S l9 a% T$ x
.cancelbutton {) C6 j2 V5 o- I# m
padding: 14px 20px;
! J- r8 ?6 g* U5 P/ Z6 _1 x' E background-color: #f44336;) g- U9 V& R, B- X
}0 {/ ?+ H; J, X1 Z/ A
0 u" N; Z9 c' g( R' G% @% @/ I .cancelbutton,
: h( u& h( W3 x .registerbutton {0 n5 v% |* k( ~4 j6 s7 B1 W/ B
float: left;
' U0 q3 Q$ N w1 `1 ^ width: 50%7 l9 b7 e3 H8 k+ y0 J
}
, Z# b. `2 {' R: ]
1 ?$ f: a9 Z# g .clearfix::after {- @- p0 I7 a: C' X
content: "";
! [+ b2 }' {6 u& ^ clear: both;
9 l1 \& C$ u. | display: table;% X- t! }. i4 w
}
1 d+ {# X7 y7 V7 ]0 ~ </style>
1 E) {3 a7 @; \$ T( r+ }5 }' U5 W3 J0 F$ [! f9 x
, F1 B! t, Y0 i6 e
8 m+ g3 |" T, N</head> ~" D$ s5 ^# Z$ W5 f, @& M
7 W. z- D. t3 v5 Z6 F; Q+ L$ A
<body>
: F% Q5 U8 e! L5 U
3 M% G( t6 D2 h6 T3 ` <div id="modal" class="panel">2 g; Q) ?& r* S8 o7 X
<span class="close">x</span>* \/ Y" `6 K9 \: n1 G0 L
<form action="#" class="modal-content">! {5 j: W+ f: H* z4 ]
<div class="container">
" }/ K+ p# |8 j( f <label>Email</label>6 {: L4 X1 A! k8 r6 x+ T# S1 D1 F# i
<input type="text" placeholder="Emmail" required>/ N2 N) O# d9 j# Q
<label>Username</label>. b! E# x" T& e
<input type="text" placeholder="username" required>' @& U9 Y9 R8 F, _' G \7 t
<label>password</label>/ L" r' X* n" e9 q# Z
<input type="password" placeholder="password" required>
; I" i9 d# J3 c+ ]. U* O, ~; l# j- X <input type="checkbox" checked> remember me
: v7 _9 T* ?. w( e) x3 G <p>Follow the policy <a href="#">terms & privacy</a></p>
1 u& \# R; \5 ~7 b% C3 j( ~ W0 Q, D. j& Y: A/ P0 A- C
" H) L a0 ~# V# Z; A3 i# Q
<div class="clearfix">+ V) y1 ]) y4 L
<button class="cancelbutton">Cancel</button># ~$ d/ Y- H1 n" v% z) M
<button class="registerbutton">Register</button>
1 P) X- ?5 R/ O6 X+ } \$ T" S </div>
* `8 G. u; R; E: d </div>% ^, i9 _6 U" A7 C Y2 g2 K: `0 b
</form>- N, {/ M: { l" X) g6 p
</div>6 A( k5 ~0 i2 p, j, w: `) r
8 M$ V& D! V9 s0 k8 e! L: h7 H: A( x( s/ \ j. N. f
2 T0 P9 M4 g* H9 ?# t
5 T. p4 C g# r3 U- z
+ I. ]# K T L+ i" E4 u' T/ C m</body>$ u* g& u: m: i+ s# X. ?
: j" W+ ~+ H# x. }, e</html>[/mw_shl_code]5 x$ E! k N7 n( }$ G$ x
|
|