|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
一个简单的登录和注册HTML CSS开发页面
2 J8 @3 |, c* ?: i, l0 O# _$ l
0 R6 j1 k5 t; _* m9 r& o% l, t
登录代码:/ u/ @; |# L; t. E) G O; @
% H* j" @( t# d
[mw_shl_code=html,true]<html lang="en">
# P1 Y" a4 B* e' D& w% {: I, t; p: j
<head>" L; |* k3 A' d5 R j( O, r& p
<meta charset="UTF-8">
, }, X$ V: P) O% n o5 n <meta name="viewport" content="width=device-width, initial-scale=1.0">
S E. I# d! n( n \ <meta http-equiv="X-UA-Compatible" content="ie=edge">
, \8 d- }. N. v, K6 i <title>This is a login form</title>
q) v3 k1 w$ F2 i; n4 F3 ~# d* T) K& @2 F7 Z# ~$ y' r
<style>5 {, _- c* _! C! m8 {" Q5 X
.modal {
' O9 s" x9 \, `6 ~7 h Y display: none;
7 H$ M8 v, N0 K4 W0 T" P width: 100%;' @2 J7 g7 z0 ], N$ x
height: 100%;
, K1 E, {- M' B position: fixed;- j3 D% e9 E! H
overflow: auto;
4 N0 C5 V2 f3 G z-index: 1;
7 r7 C! r. \3 X2 C' \2 C left: 0;* o0 o5 U1 A0 p& O2 v+ l" w
top: 0;( m* R. \% C9 E9 _+ F
background-color: rgb(0, 0, 0);; C# w$ I# q! {
/* Fallback color */
1 g9 z7 m( X7 b/ x. x5 p) R; ] background-color: rgba(0, 0, 0, 0.4);9 `% ?# d/ k* d: d; f
/* Black w/ opacity */+ E. J1 V3 y3 Q0 P' c
padding-top: 60px;
* E0 j9 _5 b: F& p/ z0 l- @% I( M; c. ~- S; v( V
}
' t, ^) c# ~$ Z" J9 V. A1 S
9 N6 h. |+ h( W# O4 _0 r .modal-content {- ^, Y4 O3 u9 M
width: 60%;" i/ Y) E; A6 L; ^) U6 F$ i
background-color: #fefefe;
& _ Y& {( O- e3 v1 g( m margin: 5% auto 15% auto;% ^2 n0 f9 u' ?, s9 }( Y0 z
border: 1px solid #888;, ~0 t* T! F. U/ a: u% P9 r% }
4 U- Y- q3 u: s# h1 l3 a }
: c9 N% x% g) ?7 l7 c3 V0 w' X* i
: s7 U+ O1 u( Z& r1 C6 D' F /* The Close Button (x) */
@* `. _5 F- z4 S .closeButton {
3 e6 t. ]1 R2 U' ]$ ?% X V position: absolute;/ u3 `" t/ |& l+ }2 E, a3 O' d
right: 25px;
, S% s- i; K8 p% i2 W' q5 J top: 0;/ m- S' R" V8 q5 S% H: h8 r8 {! z. j
color: #000;9 e. D e7 Y+ w& T& g
font-size: 35px;9 D3 H& |6 F: a6 u; j
font-weight: bold;* t6 M9 w+ a4 L% [3 Z& I ]
}
5 H# ]/ F& g7 A u* n( {2 n6 W1 Y( R6 |, {8 ?+ e+ [& H9 B
.cancelbutton {
% @0 h! g3 c% @3 o. y( B width: auto;. T6 v3 {3 F* c" G
padding: 10px 18px;0 A+ M9 D. [1 y8 \6 ]4 S5 `
background-color: #f44336;
/ l( [8 s9 B6 [2 @6 B& C7 Z2 f }
/ Y5 @' Q# K% }- J& T; X3 y5 G0 t7 z9 x
span.password {5 j% }/ G) x- G# x8 g' f+ ?
float: right;4 b: a1 @7 C6 O; e( f, `
padding-top: 16px;
* h3 |0 b# R* [4 W! R$ X+ C1 R* n }
3 n$ G [9 F) z# E3 V. P; e
5 V6 s; ?0 y2 x .closeButton:hover,+ y) {* _! E {
.closeButton:focus {2 i7 l* R1 \9 g1 f5 x* n3 R
color: firebrick;& k, ^ ?& w. Q( h" r" t
cursor: pointer;( d) _/ |3 {* i# d
7 ^! R- r Q4 }: K+ |& E; G
}
; e5 \( {8 n6 u2 @4 o* A4 ?
& |& w# `0 R8 g, \ H0 m+ i. y+ l .imgcontainer {
; D# {8 M6 J; S: W. C8 g text-align: center; ]5 z( U2 Y2 n
margin: 24px 0 12px 0;5 f1 ^ @9 q9 S! \& {, L
position: relative;" I# }0 e j5 k7 H
}
7 H {2 H9 ~) t2 B# ?. V' @ K; G% f% A' H, Z7 [) Z
.avtar {2 ?8 r# M$ d& r) Q ^
width: 40%;
. \8 E* m* D2 G8 n( N8 l6 \ border-radius: 50%;! U b2 }1 A6 {
}
- `' n5 ? H* ~! O5 H# l! n" r: Z$ Z' m1 [( m; R: i, l; g
.container {
2 Z1 i' D% y) ?. p8 j; M1 E/ L O; Z padding: 16px;. b# J5 f- _ I+ C @$ T9 P1 v% r
}
$ Z! ~* t; m; H* y7 n* M
3 Q& w6 ?! I; K2 ^2 r /* Full-width input fields */' H# W3 ~5 a2 R5 J6 H5 u" S( v
input[type=text],6 W% s2 q) t! [8 `
input[type=password] {( m4 x% f: O4 f, m5 _5 x {
width: 100%;1 P, b: E9 Z( Y4 ]
padding: 12px 20px;. \! W, I" t3 g+ j' i, A
margin: 8px 0;) ^4 F9 G7 d) Z
display: inline-block;
1 `/ B( k0 L$ H4 [ border: 1px solid #ccc; }2 ]5 t" \" R* D
box-sizing: border-box;6 E0 t. E% d2 r, L# Q
}
: W, z, n# c$ {; y: ]9 |3 b I# _5 }: ]& } _# g! b; R
/* Set a style for all buttons */( ^; C+ ^3 v( o$ ~
button {
7 B3 L1 O1 _0 C9 K! `6 y! D: Y background-color: #4CAF50;1 g# V! T* U0 ?7 M3 U. S; h0 e
color: white;$ i( Q/ Y/ m0 M( W6 F b4 z; `
padding: 14px 20px;7 [: a- R# t% ~) c6 ]" x
margin: 8px 0;
0 m' F3 |. V" x) s6 I. A% w border: none;
3 X) N( |% v% p cursor: pointer;* C6 x6 s1 O3 |; L9 s7 \; l
width: 100%;
/ Q4 ?3 Y0 R, i- h3 Y# v7 o }. P4 M! h( {* T# p
! o/ o/ N+ I1 D
! Y& p$ r8 j4 }* I
button:hover {8 b( |$ f! F1 i! O* B
opacity: 0.8;
0 Z5 R# d8 F, @. a }/ t: m7 {# C8 @
, R, ~, f7 `+ j3 z. p9 x9 {8 M5 V3 ^ /* Add Zoom Animation */3 q( _! o: h/ N0 G1 U+ c; w5 X
.animate {0 p2 g+ C2 \7 O( v3 r
-webkit-animation: animatezoom 0.6s;
5 @' W8 A7 _; ?5 {5 ~) u( l animation: animatezoom 0.6s
: m* j5 x/ R6 N+ ~$ b) B. N }% ]/ N# s4 g! [
' d! q3 r2 }+ P @-webkit-keyframes animatezoom {/ E8 F1 V9 i- T0 \' s
from {
) D9 u$ y1 D2 m; q) } -webkit-transform: scale(0)+ y5 l' c! ^; E# G& o) [; ^
}
, F5 d. p3 A- d: ]8 y# C* q' v1 c
$ P1 ?! v/ `3 m7 G& O0 x2 L5 x7 y7 L to {
3 L8 {. a& I( }. |7 C/ ^ -webkit-transform: scale(1)8 W' P1 ~% P( s) Z
}
. S; @, p0 b R) F }
( i5 x% U" M% | G% v
. O- u, m- o) C- e+ I @keyframes animatezoom {& Z3 |7 Y: g* ?! f
from {
: j* a: \( t; l3 q* v transform: scale(0)
) G2 I7 L. O4 B- G o$ B }( t5 W9 A1 p3 }% ~7 t. b$ {
) K+ A. }- Z. o
to {+ e# K! {- c* u1 V* [3 O! Z
transform: scale(1)" w$ ^: F1 |9 }, T( A" _
}
4 l/ O |7 \3 _ }6 h. s) V3 B5 I" Q" z' z8 u
/* Change styles for span and cancel button on extra small screens */4 @) R# l6 a9 {7 g' l0 ]; Q4 l7 c
@media screen and (max-width: 300px) { A2 `% G Y- Q7 }
span.password {
) q1 e$ _2 u4 E display: block;
! W* S) H. ?( t6 h) m5 n1 j6 p float: none;
# z9 b, q% z! F }% Q+ W6 u v* p- A
: G" {9 y3 c5 q$ z
.cancelbutton {
0 r( ~% Q. _' I+ U6 M. Z0 {9 s width: 100%;
( j- m; N7 |# } }& H* z3 b/ C9 X, ?( n- }! b3 i
}- K& s) ]8 [5 m6 b; B# S
</style>2 t, c; n! z, T& q# S* W" ?
</head>
3 _# I& s# [' M6 q
6 r4 W) r8 Z, Q6 F. i8 J/ e8 ~<body>
& t( x& U( c$ G3 `) `
( n% W- E5 e7 j# {. x6 w6 y <button id="login">login</button>( a6 [3 M9 {, G2 u3 R: a7 e
<button id="register">register</button>
3 n. d7 C. H: m3 c$ @. m% s2 l, l. ~7 t& }4 J# n7 l# e
<div id="formPanel" class="modal">
& M# L; n r2 M! f, M <form action="./img/logo.png" class="modal-content animate">
- Q; f. a) l- ^, x <!-- image -->
2 w7 Q9 Q" m8 ^/ O& i0 D <div class="imgcontainer">5 }$ X- I4 Q8 l& ]; y, ~
<span id="closeButton" class="closeButton"/ I; j2 a/ M$ ]4 A p7 M) t/ j' X8 T7 k
' |$ U+ ]- z+ V+ O4 o0 a
title="close form">×</span>2 A R+ D0 y% W
<img src="./img/img_avatar.png" alt="avatar" class="avtar">" {, r" d( S( F
</div>, K6 A. B ?# i, U0 n
<!-- information -->
4 R- a: @& G1 W* D' x x <div class="container">3 A# _) O. i# g f
<label><b>UserName</b></label>& u7 B( ]7 I0 l1 h# W- ?1 b
<input type="text" placeholder="username" class="username" required>7 w, F4 l; V( K
<label><b>Password</b></label>
5 b- S) X6 p5 \ O <input type="password" placeholder="password" class="password" required> B( S7 T% k6 o4 s% @
<button class="loginButton">Login</button>
( S' }2 @$ ]) h3 `2 j) m <input type="checkbox" checked>Remember Me( Y) N! R% E! {" f: H, ~8 z
</div>9 q- ?+ Q; F5 o) {
- e+ ?/ F% b# J
<div class="container">+ e4 a- w9 C1 v: `, j
<button class="cancelbutton" type="button"
- {, w: F5 F. I# i, ? >Cancel</button>. O0 K( n" L, m |: e2 z% R! u
<span class="password">Forgot$ f) \1 c6 e+ I% k0 f1 l7 I+ {
<a href="#">password?</a>
' d' @% ^' R( \) @! V- P- I </span>
& w4 o6 X5 d. j; n$ E% x" E </div>
* q- {! \0 h" h- K </form>3 }" B; F( n6 T0 p1 b& D) S* h
</div>% Q' M$ v3 t) N
. C0 e: R' o0 h! S' z# x: I0 [3 Q6 U+ q! l/ T
<script>
! H: C3 {5 N, |) H- R7 v( c3 t
$ E0 K, L8 Y* Y h6 ~ function loginForm() {
$ u Z1 E- w1 l9 c7 R S& z0 e; o var formx = document.getElementById("formPanel")
. ^, A- ~& V: `' J+ ?' K formx.style.display = "block"$ \- J1 h7 e* _- r, E' H. c
}& Y" s+ |, L6 J+ {3 b
</script>
5 {" j. N. D1 i4 O$ @- O: }
+ \9 C4 Q; e5 o: v8 n3 k3 X5 o# m$ S6 A- N& H! l% x/ s
</body>4 z0 |% ^% `/ U- {( L
, g5 F( e% ]4 c8 H' m& o; {</html>[/mw_shl_code]! H2 H7 v8 S' c" B3 L. f5 A
2 e$ A6 C3 D* d4 z
& E" v7 Z& P# C) n2 l注册代码% @# ^" U5 l6 U0 x' ?6 _' V0 s( B
5 l$ o0 q1 h. c8 ^[mw_shl_code=html,true]<html lang="en"> z" P* X+ G r7 }0 m
9 k" B! L: S) `0 \1 E+ E<head>
$ R/ h9 \$ O1 ]7 a6 B: ? <meta charset="UTF-8">5 l% x7 t6 N1 g* ]& C0 W6 Y5 n
<meta name="viewport" content="width=device-width, initial-scale=1.0">
( K: S* J4 l$ r3 E <meta http-equiv="X-UA-Compatible" content="ie=edge">
3 h; D! C9 j$ I" \ <title>register form</title>9 j5 h* R% E" H" n& v( s% Q
& k1 i1 ~) I4 ]/ V: c
<style>( ~) d) ^ [( j! L5 ~
.panel {
/ ~: \) o% I E6 J width: 100%;+ b' i" ~: t* n8 G
height: 100%;
: y, ?( \9 t* j0 X$ O3 F7 G background-color: rgb(0, 0, 0, 0.2);
6 n6 M. S/ r7 e* ~5 F2 a5 S padding-top: 30px;. |6 i& U! V1 A2 L) f( p( o! ~
overflow: auto;9 v8 V6 D- Z/ X$ ` }9 v
position: fixed;, o* i4 U6 A$ I# ?! D
left: 0;
N2 K) b" ^+ C" R4 B* P/ t; s- w right: 0;# S0 t/ o6 B# q, C
z-index: 1;
L: E. u& I' k% V, ~ }8 j3 n, M0 V4 {
4 P0 d G1 a1 f- Z2 h2 E! N
.modal-content {
, @9 ] i! V- v/ `. y- Q5 \ background: #fefefe;! W" W7 m5 F$ T0 U4 W& P& [2 d
width: 60%;
4 c+ p/ I) b- b9 s border: 1px solid #888;4 Y* x8 p. }( u$ @9 ^* c% l
margin: 5% auto 25% auto; R$ i' Z" O* n: G
% @5 e5 A ?( D d
}7 s2 l9 o3 B' H& N# I+ p
6 R% D H, x! ?& r0 x3 n
.container {. v( f" I/ ?5 m, w
padding: 16px;
, M% K/ i$ s* I% w }
\" L: @& L$ p) M( }+ z
/ W* f D# D' F: G& i( R3 I .close {
( r' b3 h( C0 T2 w" n8 |5 F. O font-size: 40px;
, h: u5 C4 ~# B. c P1 [7 Z position: absolute;
# J' F% y; P4 \+ `, R4 s" _4 W top: 15px;
0 y& D7 h0 H2 ~+ i a( n5 Z3 F& N right: 20px;( m" ~$ t" O% y0 k" c. d0 T8 l! \- J5 u
}: C4 t+ ?- V; Y! I/ A" g L
0 g0 l R8 B) }$ b4 j6 O
.close:hover,8 S# V/ i8 D- Y" k2 i+ M
.close:focus {+ G) z: Y$ a2 \" b) ~9 Y# s
color: red;
3 e% Y! L9 q! N: U cursor: pointer;1 d4 R7 z% f! C" S0 f; `0 ~
}
! W- |0 ]3 t- _" b* {: j5 p. I0 F5 g. V2 x
input[type=text],$ Q! ]! v. F' D3 Q& A
input[type=password] {
) Y1 ]% P. y7 e" G' q, \' ~. \ width: 100%;/ x0 A' C2 m: q: E
padding: 12px 20px;' Q) _! P/ L5 F. H! ~0 c- o; W
margin: 8px auto;: b+ H7 ]9 e1 O4 V6 |
border: 1px solid #cccccc;. A: p1 ~0 ?& W+ r
display: inline-block;
. x; p" G: e# k& v4 v9 ~" B( C }
0 d/ j% ~2 `- J4 @6 A! m
A4 c2 H! P8 x* o+ J( b button {$ M# P2 W \) u5 d+ o
background-color: #4CAF50;* k# {; r7 Z: J: R( p1 k
color: white;
" `5 T: r2 ?% w: P padding: 14px 20px;* Y% U0 J- N1 W: J
margin: 8px 0;# B) S3 M& m8 k$ o; |1 S
border: none;
/ e, W' W! I( d( c cursor: pointer;
* ?. a0 ~ B; D" P3 M8 g width: 100%;; s& D* S3 g% U$ U% R
}* l9 g, ?* |/ ]& [$ E2 v
. Z B/ l$ V. U8 M8 S' \ Z
.cancelbutton {
5 k; d0 @% V* L) ]% B6 ? padding: 14px 20px;# y: s4 {: D p7 r) k5 l
background-color: #f44336;' K% H9 f8 m. @& w
}
+ {' c+ l& M4 Z* ~+ o- L/ m
) m/ j# F# Z- m, D .cancelbutton,' Y% R& ^8 t. H$ L8 Z( o0 ]' }
.registerbutton {) d( `9 x; p# F5 x* b' m# @
float: left;9 N7 S& K2 f+ ^# y
width: 50%
4 }# g0 L, M5 D }- p' r( n6 D3 }2 T6 B
5 a4 c" B; ^1 n2 i5 Y5 \ .clearfix::after {
' @6 ^/ I: m0 N c! v3 u" j content: "";
8 i$ O5 g4 N- o2 B clear: both;. {$ h+ |+ U% b5 ?
display: table;
, z( b* f7 f/ h S2 U8 d B- y' w }" ?& q: U& l# D7 m' V
</style>8 z+ b& M8 Q- A/ M$ s3 t
8 d z/ N$ S- J
* F: [3 E% I' X+ x" `- G8 ] T4 \$ @) k5 \" |
</head>& p8 A( x; Y; m, J; D
5 T; G7 I& @3 y/ {7 l Q<body>* _4 j9 D# e6 l, r
/ p5 D& h* c4 v <div id="modal" class="panel">
8 v& \8 e6 U( p5 F" K <span class="close">x</span>
- z ?2 s7 t' w k <form action="#" class="modal-content">
1 S. q$ }. ~/ u$ ~ <div class="container">' @ T9 S$ D) |1 `- L
<label>Email</label>( G9 b1 T6 a* v7 {
<input type="text" placeholder="Emmail" required>
8 u; O @8 e% U- |- s <label>Username</label>
& ?, z& m* z+ A7 ]. ~ <input type="text" placeholder="username" required>
8 w3 C3 A) o1 Z+ j" `: G1 _8 O- }+ u <label>password</label>
7 Y4 J, j- ^1 e9 a <input type="password" placeholder="password" required>
( {, ^% Q8 _0 L! q# `+ @ <input type="checkbox" checked> remember me
L" t7 ?+ p6 a$ } <p>Follow the policy <a href="#">terms & privacy</a></p>
" P: Q4 k! y0 x$ \) [: c5 u3 h8 p) l, F) o! m
' k; l" @. A: G. t% G1 F' S
<div class="clearfix">4 j- J5 R5 B2 `0 B
<button class="cancelbutton">Cancel</button># Y. D* Z, p" P$ k
<button class="registerbutton">Register</button>$ j& g2 W; |% e o
</div>
: X; J/ v/ k. g. h% c </div>- q( W# ?$ Z& e2 J4 O) q
</form>, Y% |4 g2 Z% p# T# Z" N- P. ^
</div>
r0 M# I+ H" M+ V. Y
8 G1 y# V+ c8 t1 G% K% U* R1 e4 m+ Q% w) f- B
1 _0 N. ]( Y6 ]; T
% O4 X, E9 y1 D+ z( ~) U* R' e; H0 V1 x7 R. _- t5 \; W' _
</body>
- R5 K& \) x' `* [1 x" h. y5 u4 q9 J# s z
</html>[/mw_shl_code]
3 p+ i5 I1 N% b |
|