|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
一个简单的登录和注册HTML CSS开发页面
- G. H; {0 T" |" h! d
- V# T) A* ?; m; Y$ F {) ]
8 b3 E3 J! _: q9 R4 p+ D
登录代码:
8 o4 [. R4 ?9 j7 n2 z5 }! L% q/ L/ o) \) @% V
[mw_shl_code=html,true]<html lang="en">* V+ U C3 e( j: b1 }
7 Q% ?1 y& i1 M* ~: T
<head>
: ^; ~" |) D) C& z: x$ t <meta charset="UTF-8">. j: k9 a. G( t
<meta name="viewport" content="width=device-width, initial-scale=1.0">. I4 ~" q5 W$ T5 [* K
<meta http-equiv="X-UA-Compatible" content="ie=edge">
* E. P* G7 g5 r+ h' E5 ?& q <title>This is a login form</title>/ r9 r8 u/ F2 L, _% K
1 b# B/ h. a# J <style>
7 Z+ S3 f5 G) ?. o1 ^ .modal {
6 ~ s% ^9 E- K9 h% U/ x display: none;& M9 J! K' p: M0 ]5 D$ e$ U$ ]7 Q! l
width: 100%;3 J# Z6 X# K; H* ]# ?" \) F) }" i
height: 100%;
# C# I) y* S# k position: fixed;. Q" N2 N7 B& q* E# z O
overflow: auto;
- u3 b8 K4 O q3 u/ V* e z-index: 1;
* f# W8 [- s' Q- D% A8 U left: 0;8 S+ n4 N* W1 S* g: K" t$ R, f9 }( F
top: 0;
* x' s% E8 T' ~0 q$ v a" ` background-color: rgb(0, 0, 0);' Q5 A1 L+ s, g& [8 }% |% w
/* Fallback color */
% c+ u6 q% R0 F background-color: rgba(0, 0, 0, 0.4);$ \7 ^ ]* j# I( |% z6 i8 p
/* Black w/ opacity */; P* T/ p! X, ^/ G8 U) Q
padding-top: 60px;( @, P" |7 F5 R# [) }
' U; p7 v1 K& _0 Q: d6 M0 f' z }
/ o& ^8 Z6 c6 b9 L" Y3 O: J& }4 ~$ ?( k% q
.modal-content {
$ Q+ X$ T- N7 ~5 \ width: 60%;
0 W0 }; J! H" i& R& i5 e* ? background-color: #fefefe;, o3 I3 ~, M# Q5 D# X+ ?: m% H1 _
margin: 5% auto 15% auto;& l5 T% v9 W* J5 Z7 x
border: 1px solid #888;$ X! S- A4 g2 m @7 A: B; |3 @7 k
" n T5 y- Q9 b* q$ q- _5 N' C7 a) M }1 k$ D b( I/ X7 L& U1 `
+ m! U* t# a0 ^. w' O# J /* The Close Button (x) */
2 ` H3 b" \" C* V .closeButton {5 z! l, k2 U5 h0 v1 Z3 Z
position: absolute;: X E0 s8 h4 M
right: 25px;, Y. E9 W; @& B- ]: |. _2 A
top: 0;0 v& V! E/ L7 h% M7 K
color: #000;" m9 Q9 ?" C) P7 S" y& E/ N8 V
font-size: 35px; G: F. J u* C' C- w: N: N
font-weight: bold;3 O4 T: y. J$ u- B* M9 {
}; ^. v) h2 z6 p# Y! e( ~8 A
: L. S! ?6 z7 f- U" l. W4 r2 R
.cancelbutton {4 n% s* ]% _- r1 E6 {
width: auto;+ h3 z5 r/ K9 M- A5 F# y, e+ r0 o
padding: 10px 18px;
" _" H7 i! a% F7 K4 K# u/ W& E background-color: #f44336;
0 }- c4 `' \5 K0 u }* |: R- }9 I4 L. i
; X9 D( H" D8 N
span.password {& A/ b" ^7 P* c# }
float: right;
6 J& S' r2 ^, |& ~* u9 O5 z padding-top: 16px;
5 P; R8 R& v/ @" _6 p }$ ?! e7 T) `8 _# h; K/ E1 [. K5 D
; [( W0 f8 g' ~& C6 j& V' W3 q) `( w
.closeButton:hover,3 p2 @: Y) ~5 q! t! k
.closeButton:focus {) ]# q, b* w8 ^' W' |
color: firebrick;* h% ~3 F! c) }/ L
cursor: pointer;$ l( R& R: H& e4 \
7 N9 B" f2 q, p0 _9 ] }7 f! ]4 g: U3 O5 w N T
3 J( v3 L7 Q6 z8 C- [9 I+ P5 J .imgcontainer {, ~2 s% X: _: S- [# R$ f$ n
text-align: center;( K$ T! O/ Z& c( _, a6 R& l/ o
margin: 24px 0 12px 0;+ l! O |+ ?; z8 ]
position: relative;
4 F4 @7 z+ b. K3 X# ~ }8 v7 F, o5 f3 G4 F# x5 j8 A$ P) f& A
5 P( \; T) u; P+ t( V/ c .avtar {$ _+ Q2 Z% f/ E6 \/ i7 A J( z. k
width: 40%;4 h% ^ ]1 o Y% y
border-radius: 50%;/ F: r# L" A1 B0 u; }# R' R& x. ^) J
}
: A; `# T" ~: d3 f' F, ]
( R# K+ J/ @4 t0 F: W$ h+ K0 W .container {
0 h0 S9 U) [% R- J padding: 16px;, t, U4 H6 d. G6 }$ n
}3 n$ y+ v/ F: R
* q$ J j: v' m3 n# W /* Full-width input fields */* X. E9 q' m( {# Z- s+ l- r
input[type=text],
1 y# T: m! P& b* y6 p1 x input[type=password] {
" b2 a, W& E M$ n! }1 k3 ]8 u4 v width: 100%;0 U; K2 X0 h- d( ]; j/ P, I- ~
padding: 12px 20px;- D2 @* O8 V1 T0 T- d8 j
margin: 8px 0;
: |+ ^$ \( A2 S* C! J+ ^# m display: inline-block;
1 L2 S) G3 ]- A border: 1px solid #ccc;
# `1 j5 d9 ^2 q+ S. P box-sizing: border-box;
! F Q4 \3 M) M. h& m }; L) D% T: p! ]: W0 ], K
: x6 O- J2 A3 _/ W9 d /* Set a style for all buttons */ s( ]) q0 W6 S1 T9 F" e
button {5 G$ F. ^; ?, c
background-color: #4CAF50;
C! Y1 v4 N! G- v' V color: white;
! m N, w0 y- E; N* n3 X- r; U padding: 14px 20px;
% V, m( p( b( {1 k; e, E, ] margin: 8px 0;/ y2 \' C' V7 K- o" o6 t
border: none;
1 D8 T w4 A! L* r! E- Q8 L2 i cursor: pointer;$ r' h! O5 V4 B0 J( b0 c% r' w8 }
width: 100%;) | j$ ~" b2 P
}
3 I& a8 Y; q2 M) @$ n, _
5 z+ W; |, g( c+ P$ T' f! _+ f; ?8 q% X+ r% ~
button:hover {
9 N1 t4 I1 o9 R3 `4 z% @/ u7 B opacity: 0.8;" S+ x# c* h9 ~0 E3 B$ u
}. x8 a$ e8 P, p$ L# {% m% r
$ A. T; k/ t }# p /* Add Zoom Animation */
; L1 b8 w* D( `! w: I! Y: }0 r3 U+ q% g .animate {6 a4 H" q1 h# {( r2 @
-webkit-animation: animatezoom 0.6s;
) V M* w, o! v animation: animatezoom 0.6s
, t5 ~7 F% s8 h; v }" l$ U4 ]; x/ P2 B- y
0 N/ Z2 h2 M- B& V& J& W @-webkit-keyframes animatezoom {4 Z4 g/ {$ `/ e- L( U$ X6 v
from {
+ r1 n, C! j# _+ Z+ _* c -webkit-transform: scale(0); m& [# x/ J0 r3 ?
}7 z5 Q5 q# z9 h% p/ T7 R. A+ r
" c" ]2 F8 u; q: m to {: k6 ^8 m7 K+ g5 e ?
-webkit-transform: scale(1)% @& h! j4 Q5 A5 }2 x; n. j
}
$ }: w; d1 u0 \/ \) } }
1 w' G+ W2 g- T& n8 y/ \& x
0 h; d# ~- R! {" d% D @keyframes animatezoom {
8 [0 K( n- J7 N$ e from {4 s0 E$ q0 X' M
transform: scale(0)
7 G# p# ]# e" g) K }/ o1 K& g8 u; i; x2 Z- i
" J, B Q) W- a. H2 n% D( [3 B1 f, S; X
to {
7 [: R8 a8 M- K/ G, Y transform: scale(1)
$ e( y0 `! g6 r" s5 m7 Y }
( k5 G5 ~/ _: e5 k# Q; F }1 b, X) L- P6 M
/* Change styles for span and cancel button on extra small screens */
+ H3 S" O* V% f& H: J5 P# z @media screen and (max-width: 300px) {
; p0 r/ q' T3 p: w4 m8 O- G' ` span.password {
1 I# Y0 D0 F7 `: a0 n display: block;% h( A0 N& D. o. V7 B/ S* _
float: none;
( a" C3 t/ Q4 f" C% c3 D7 K) w }) [' ` q& s2 @" g4 J4 R
9 U& o- t9 W y. R: z/ x5 A6 s. b .cancelbutton {
. s3 r( S- N. z1 m3 q4 \$ I width: 100%;6 ^4 ^2 ?6 Z9 a) g! M+ n
}
* F" D5 h+ c3 T }. c- `8 D$ y* H" h/ M7 P- j
</style>
& L& H0 f: v. x' S8 s/ S* F</head>! r4 Z- t1 |+ H) V5 r& R
/ V" r. @+ ]" Z4 V- b3 o% s<body>
: o- `. v) D6 H7 O y3 P8 ~
* f: R& j2 ^; ]6 Z v" W <button id="login">login</button>
* m; `* h! ]2 X& [+ }1 J: n; l <button id="register">register</button>. z, U( i+ y8 G+ g5 G3 [8 U$ P
6 t9 o' E) d1 L" G# o <div id="formPanel" class="modal">* r0 J, @7 {& @( n, M% D
<form action="./img/logo.png" class="modal-content animate">) Q D J, K5 K& e5 _2 V2 L+ q
<!-- image -->
8 T% p' y" B2 M! c <div class="imgcontainer">
1 N& \* v }; L) N) `; z( l1 @ <span id="closeButton" class="closeButton"
( m) Q6 A8 T5 H7 t2 G. C& q
" N: I* b! u- R) I! d1 ~: i/ p title="close form">×</span>7 ?# i: S5 v8 \% w1 P P. n
<img src="./img/img_avatar.png" alt="avatar" class="avtar">
. b; v/ M1 z9 r% k9 C </div>% ?0 D% o; P) \ ]7 @' U( ?
<!-- information -->
6 i5 ?. W7 e9 i <div class="container">( c0 f# p1 H! Z' `/ c% s: j3 l
<label><b>UserName</b></label>
5 ?' e L4 [, @8 Q5 I <input type="text" placeholder="username" class="username" required>! l- R. w' b- B
<label><b>Password</b></label>
" c4 `/ N$ |* M# l6 u <input type="password" placeholder="password" class="password" required>& `8 R' D' n q0 j. O+ H
<button class="loginButton">Login</button>
9 @7 j0 M! c) k8 I9 X/ N2 Z <input type="checkbox" checked>Remember Me
8 ~7 V, H+ d: I& J </div>& j D8 U2 Q8 X9 ~; B m
2 C8 g8 ~2 v/ `! @ }6 x7 h, \
<div class="container">
: l4 P! N' f0 } <button class="cancelbutton" type="button"
f; ?1 F) G) g! G ]3 f >Cancel</button>
$ i2 ~( r7 r& d9 A$ C <span class="password">Forgot
Y4 s8 ]- h: a/ |$ r) |9 j! p <a href="#">password?</a>) @' L/ u. m% U4 E3 j2 V
</span>
4 z/ T1 J. J/ W# M! F1 L </div>
1 S. }2 \8 W2 m! { </form>
# ?6 }( N$ Q, C+ X4 E9 B7 d1 } </div>
' Q4 K) {0 ^7 W' x" s# I. }* Q' r' o1 E$ \4 J! {4 a; j
: p( B: f2 }0 c5 @0 ]
<script>
) l5 D) o: |* Z. R0 n! M7 Y# p3 H) v; b/ P) a9 x: q$ s; b$ ]
function loginForm() {8 I R e. u+ }$ d8 H! W& [4 X
var formx = document.getElementById("formPanel")1 z; U8 U% ], i/ ~! s) j' [* Z
formx.style.display = "block"# `6 [8 j7 d! Z, e/ d! n
}/ m4 E6 e H: V
</script>
6 x" g) I u/ S9 x8 `9 _% I; l
9 ~6 r; q2 u0 ]% v9 H) p, m
7 }! N1 o& f; T1 H% W</body>4 s( |3 b7 T: q6 S2 f% m
! O6 r# |7 p" E) j* L7 e
</html>[/mw_shl_code]
. Q( ~% Q! @1 G0 q9 T. z- S4 q! K, r; L0 I. n2 d1 z; p
- l- J6 | w2 p: {* W, ?% y
注册代码/ k9 Z6 l7 S7 l2 b, J8 {& L1 N" g& M
: [: t1 L. {: K5 Y' k4 Y& ]
[mw_shl_code=html,true]<html lang="en">6 G5 L) u6 _! I8 z1 \
% ]# o# C& p" {1 g
<head>
: h2 W) b# ]4 ]; H; }+ @ Z <meta charset="UTF-8">
( b$ T1 j& o/ f; G( S4 M <meta name="viewport" content="width=device-width, initial-scale=1.0">+ T0 k& T2 W/ V9 ^ n/ U( O
<meta http-equiv="X-UA-Compatible" content="ie=edge">
9 A: B& t9 g5 ~ <title>register form</title>
5 F% }' b; ~$ u% Z* [& Z$ K% l) S e7 o
<style>7 [9 l4 h. S7 L% x" U7 W( K
.panel {. C1 L8 ?$ v$ `
width: 100%;
# [' e2 s6 s7 n9 c9 l; x/ A) }8 p height: 100%;
% Z/ v, |% `! }% h& y, N background-color: rgb(0, 0, 0, 0.2);
2 H( \( K0 `/ E$ H padding-top: 30px;
# g4 O4 y$ E1 h; B A overflow: auto;9 v* r8 J1 f; Y+ ^# k0 v
position: fixed;
q9 F' r( }5 F/ X left: 0;! X0 S( C" O% w# F- I& H
right: 0; b. O- V% _- @/ A& H: ?/ S
z-index: 1;
' Z; t J% x: w' n }6 c& W/ `+ A. }1 Y7 |0 d s
I( h% b$ l+ N0 M: { .modal-content {1 I3 \3 L; p" Z! W' c% L
background: #fefefe;' D6 I" z7 L d$ F2 a. D
width: 60%;% ^& M, D9 X) c4 ?- } C
border: 1px solid #888;. q( B: x3 q$ `1 U
margin: 5% auto 25% auto;: m" I- w0 F% J
/ D2 h) K3 T( ]% p* r! ? }
2 C; k- A# B# b& t* l3 s9 c6 V* y; H
& d4 h' }+ }6 k+ ^. \( v .container {
- t( L* _% \# l" _6 f padding: 16px;
, S5 z6 Y4 s/ a0 K% | }
$ H7 x* m: n7 a; t
, v6 U3 T# h! B: j .close {$ ?5 C' W0 N7 A. _% h" r; {
font-size: 40px;& @1 E) R1 a5 i0 _& C1 p
position: absolute;
( t/ N8 m7 c9 o6 U+ P" {* [ top: 15px;
5 ^, q& w) R. l' {) k) { right: 20px;$ _# [9 J2 P( q4 y; q
}) E1 u7 Y" w* _. v
" r1 x% @; o& C7 E! l
.close:hover,
- k2 H& v# ?1 _# \, G .close:focus {
' V$ w( ^7 t% f$ A color: red;
8 l( k' `8 q0 F' i; L# { cursor: pointer;( Z5 `6 G0 j) F+ n- ?
}2 e% g6 U3 E l% [) Q6 M: f6 n
4 `0 F. T" g' f- L# d
input[type=text],
$ i W5 s# q9 |: t3 ]4 b input[type=password] {
! i( A2 e! @1 s9 M( R width: 100%;
4 }; W g/ {5 P$ M/ S padding: 12px 20px;! V5 z% B) Y: l7 ?: H% y1 F9 G* c
margin: 8px auto;
$ t7 z1 P! |; `5 o& ] border: 1px solid #cccccc;
' ]" [& r! R7 |: @' `6 `) E# B display: inline-block;% r! [3 C% j: j& r
}
8 @1 w/ J3 Y, Y' i3 D
, s& v% \- h9 E1 T/ u& ~ button {
, E; p2 b7 {% W8 s background-color: #4CAF50;
0 o" H: ?5 Q4 o0 M0 y+ W# h W# o4 X color: white;
' j! R, j0 r7 R' I padding: 14px 20px;! Y6 l5 J" V) D0 s% C
margin: 8px 0;/ A4 Q9 w8 I5 g ^# ]
border: none;
) W9 h) s/ {" Y/ [0 ^- ~ a/ r( k cursor: pointer;+ R4 c6 @1 H/ E& [, p
width: 100%;* [. J! E, K/ V! \2 G
}/ D) e0 ^4 c3 b! Q# \
4 u+ I5 _1 X: b1 v2 R# [5 E .cancelbutton {6 e- Q' U4 U S' b1 R2 _
padding: 14px 20px;5 G! }. E& V) a4 x! a2 J. }
background-color: #f44336;/ I7 U; l8 F7 h( `8 l- C& W
}
' Y+ a s3 }' p' }$ x4 _; G* @) a; f7 D4 k0 N4 U" [
.cancelbutton,* w5 W1 B; a7 l3 U
.registerbutton {1 Q& I0 W9 [6 A# E) N
float: left;9 Q/ }3 ^( Y! a$ i2 w
width: 50%
6 @% y# L* m. i/ g9 n }! @% r5 l; m' k. g5 C. M+ b
3 [3 v/ q- b7 F4 @4 u: X
.clearfix::after {
2 z6 j" q* `- m- D2 m u3 ? content: "";' q! ?; q+ q- j, I' H% ~; C' U$ L
clear: both;
- L$ [2 u& I: {4 {( V! R# {+ \7 ]" V display: table;
, i* b' H: E1 z$ L4 h5 ] }: S9 J8 T4 e# c% g
</style>( R/ G; r' F3 z# ]4 I
3 E4 P0 h% e% S- O8 x
4 q0 {/ L5 V, ]
) u% H# Q' H4 l: Z</head>
- _% ^! j1 G- ~: U* m% o% v* {7 L+ P6 V+ s% ]/ Z2 t+ q% V
<body>& U5 h) O4 n: {0 H' C# H; `0 n4 z
9 y% i- V s2 {6 i, K( i h _0 P <div id="modal" class="panel">
3 g4 o; g: }4 G& B <span class="close">x</span># x& ?& |/ q& f+ B' u/ p
<form action="#" class="modal-content">' [9 `6 E6 L3 H3 y4 i" g1 `
<div class="container">0 p' Q$ c& z" O7 J( n$ F
<label>Email</label>
* E$ D# V4 {* \) i- K$ |( V <input type="text" placeholder="Emmail" required>' [1 D" j+ X" g; E' C& P/ _
<label>Username</label>4 s( C0 p4 Z! t( e
<input type="text" placeholder="username" required>
6 N$ E. D" n* V. L! N <label>password</label>
2 ^) N; `6 _2 B4 u+ y! v# l <input type="password" placeholder="password" required>
$ V# G! ?! k2 n <input type="checkbox" checked> remember me
& S! }6 q# p* x. e8 X <p>Follow the policy <a href="#">terms & privacy</a></p>0 ^% a& V& M% K
9 F0 f" F( r. V! }# u( S1 y
# }( c; m; H0 p) w7 x <div class="clearfix">
; ]5 _3 k" y1 g9 ~$ h6 Z <button class="cancelbutton">Cancel</button>8 r5 P+ o+ n$ o( ^+ X
<button class="registerbutton">Register</button>4 z* i9 z: z6 U4 |7 U# {; L6 M
</div>, {0 m/ Q# h+ r- w8 F, C6 F
</div>
" ~" J9 K( Q, a2 v7 @' r7 ~" i' S </form>
# ^4 F1 d# Y6 V </div>( t4 n/ L8 U6 _6 b4 E% S
% z5 J( y( @ M/ Z5 X: x! l! ]& x0 V7 z5 c# T) t
+ }% B E6 B0 X
6 ]1 k9 s2 V1 }$ \" n; z* m$ z8 M9 ?/ n5 ~; ?) l; Q
</body>
% H6 D) O7 X. `, c# D4 T3 f: p1 t2 W8 I+ n1 R* {
</html>[/mw_shl_code]
3 @9 ~5 K& q" }9 f# z$ m |
|