PLM之家PLMHome-工业软件与AI结合践行者

[前端框架] 一个简单的登录和注册HTML CSS开发页面

  [复制链接]

2019-11-27 15:14:40 2853 2

admin 发表于 2019-11-12 08:06:54 |阅读模式

admin 楼主

2019-11-12 08:06:54

请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!

您需要 登录 才可以下载或查看,没有账号?注册

x
一个简单的登录和注册HTML CSS开发页面
' j; N1 M+ c5 @) `# I  I% W, ?6 }* C0 c; W2 Z9 _  w* j6 k( E
login.JPG register.JPG . J% {: T) y7 }9 z# N' y/ k# u) w
登录代码:, N* V9 o* ?0 `; `

% T  m- W, X- A. i; l4 m# v[mw_shl_code=html,true]<html lang="en">
) f0 S8 a: s  p1 z& M  G8 u
  V- N- g! y! t& J8 d1 I7 K  e<head>. d& ^0 w6 r& F" y- I& K$ ]8 H# h! L) J
    <meta charset="UTF-8">
# b7 Q$ {& X* e    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  D9 x' v- v9 V" h0 e' i    <meta http-equiv="X-UA-Compatible" content="ie=edge">
4 h# X; t% r  {- m    <title>This is a login form</title>% P0 T1 {* l* q5 A7 |

6 ?) c$ t  T, y6 B$ X& [    <style>, I) w/ }* \& h7 V' b
        .modal {2 i- n; f4 Z5 m9 R( U* i, C
            display: none;* ~0 W& R( H: z. |* G
            width: 100%;6 z; Z6 D; W  }: @' s$ M
            height: 100%;
6 k* u5 k, M4 d            position: fixed;
3 s2 `. M7 M; Z! \+ ^1 ^5 [            overflow: auto;4 K8 d# @( v1 z2 W) N
            z-index: 1;
5 S, v0 g/ A& J9 p7 q            left: 0;: _, |2 @/ {4 ?  |9 ^( N, }
            top: 0;
5 D# C6 \$ P* Z5 y/ m. [- _; Z, F            background-color: rgb(0, 0, 0);# w9 p. \2 Y( T1 y" }- f  y* [
            /* Fallback color */, A. P1 t9 V0 r* \
            background-color: rgba(0, 0, 0, 0.4);
8 a$ t" Z! j+ _  l2 Y6 V            /* Black w/ opacity */
7 j, K( d6 D3 n4 @6 n) }0 A1 |            padding-top: 60px;
* n! {- O# q$ K! J$ G
; d7 v, k6 e& {8 |) @4 X. r) X        }
2 T$ Z1 \& t$ g( U" G( G
& K& a: L+ [5 o. L# x; Q        .modal-content {
4 |; m" g4 N  i0 R1 @            width: 60%;
$ }1 \# T2 O* d. M  ^            background-color: #fefefe;
/ O4 ]  w8 \- I0 g' l3 i            margin: 5% auto 15% auto;) k6 ]3 s/ ^+ i
            border: 1px solid #888;
. ~) M5 M8 V; g! [/ {' z; w0 ?
' x6 Z# \- C0 d# |) g: @% [        }
: ]% v4 q8 E* Q8 c* w1 z
9 {/ r( k* L0 s" ^3 u/ \3 }: E        /* The Close Button (x) */% r* {) ?! A1 C' K- w2 O+ W' {5 q
        .closeButton {3 `; E: U* c* [4 t: l
            position: absolute;4 `6 g. b' A: W+ [
            right: 25px;! L8 Y+ `6 I" ^6 O" c8 l1 ^/ r
            top: 0;6 Z8 Z  _; F* s8 U' G
            color: #000;3 c8 @& y  e) b5 F
            font-size: 35px;' g/ x% |3 w$ \
            font-weight: bold;
3 E' J- \1 A! R* }! V        }7 h. f0 V& _/ Y2 V9 V/ F  c  \
3 L2 I! P9 u. m4 H: o
        .cancelbutton {) k" h( S  N& x+ d$ t
            width: auto;
# g3 l/ n9 D4 g8 k% V            padding: 10px 18px;4 A# b! ~8 g9 F" i
            background-color: #f44336;
4 ~: W0 {+ M& B% X- {6 g1 X        }* o% l  J6 s+ q
5 o* A5 \' d. j: Z9 O; H
        span.password {" c% k6 B& N2 ^+ [2 f
            float: right;$ s7 z: |+ h" m+ H% q3 r5 Q
            padding-top: 16px;( [) V9 ?& b* M* t6 I2 o: a# O: u
        }$ H9 K' ~5 p' c  K4 `3 O
3 ]+ V5 n7 W3 O: Z
        .closeButton:hover,/ d* a2 o" Y  U* _  a! n+ B* w
        .closeButton:focus {& |4 J2 z2 [& v& `
            color: firebrick;
; Z' [% j+ h" T  a; y3 u6 [            cursor: pointer;
  N5 f7 W  T# e* f) A) G% |9 l: L: T( {# q3 q" R
        }
( z: |( u/ e0 Q; h; P* h; V9 U1 e1 Z
! n* U0 r2 V/ M& Y3 F        .imgcontainer {9 G- `# I6 U. \& x
            text-align: center;
( ?; }  D; A% r2 E/ X* n            margin: 24px 0 12px 0;
9 S  E+ A9 c2 z% x+ G! e% |3 H* s            position: relative;( ^) Q. \2 |9 t7 [3 ~$ u
        }8 {2 i( D' A9 [3 y7 `

) x( N' \; q5 T; j6 s2 C* q2 e- I        .avtar {
+ K' j$ _  X' ~' d5 w            width: 40%;+ V# O) @) {. }+ |( C
            border-radius: 50%;
4 I- g, U; I6 S5 h; T) [2 Q        }
/ R: E5 W( ^7 Q* j% |; p. b6 V8 u% e6 f' J) i9 Q
        .container {1 t9 H3 `7 D$ ~# v9 r) g
            padding: 16px;
% P- b0 _: w5 ]        }: I! l, h7 u/ h& x. M" M7 \
, D3 r/ ~5 }0 @' `
        /* Full-width input fields */) I0 a" |+ q% W" F# M$ ?) u
        input[type=text],
  H  j/ p9 H* J% x0 B        input[type=password] {
; e$ G% d# ^0 a/ w' l            width: 100%;+ _9 n# r/ r' f: b( a7 P
            padding: 12px 20px;
, ^* n  v4 k: T" B            margin: 8px 0;. z$ ?5 N6 s0 r$ q" S
            display: inline-block;# [8 u, `% ]. G; e; `
            border: 1px solid #ccc;
' t" r6 S& V4 W0 ^8 J6 j( O            box-sizing: border-box;1 m- C8 T6 v1 n0 V5 R8 G! n
        }- L5 ~& M8 k/ O4 [( C. ?

( H0 r# n6 D. P7 `/ x" ]$ a3 E        /* Set a style for all buttons */& B  }6 H" o% t; V7 J9 {' x! k
        button {
# x' H9 [/ U3 q- B( z            background-color: #4CAF50;+ S0 b; {- q& t7 X
            color: white;
4 B' S9 G- \1 d& n6 m8 i: p" `            padding: 14px 20px;
8 X8 o+ x" y. E) c0 e( T            margin: 8px 0;2 F( z  S: g3 e  ^" n7 C
            border: none;; w9 ?$ L/ E. g6 p. ^! q
            cursor: pointer;2 a2 O1 k& w$ f* Z6 b( Q
            width: 100%;
, |. n0 n$ `) O        }$ B$ {0 V7 K8 z( A8 Q8 k/ d
, h4 S- a; l5 b& Q! k

' D; z3 b, B: Q  z  E' D        button:hover {" o7 w/ c, M9 s) Z5 W
            opacity: 0.8;2 N. M3 W! b7 Q& X
        }
+ `( r+ t7 k/ Y4 \( e& B
! f4 e, m" I2 \+ M        /* Add Zoom Animation */$ W: V0 X) O$ F2 ]
        .animate {4 x7 N) @" b) A1 L' h; O
            -webkit-animation: animatezoom 0.6s;
) u2 K# y& t( k" ^7 I            animation: animatezoom 0.6s7 O3 b! [) [0 B1 @% I1 X
        }8 p9 p+ r- {* R6 y' q3 {

8 B5 C" |( j! _+ ]5 e6 P        @-webkit-keyframes animatezoom {
' \0 Q, J( `7 }  \7 y' o7 T. `8 o            from {
% U1 r, {/ j$ B5 L* e" x" s$ s' G                -webkit-transform: scale(0)1 F0 a- ]% m& }/ v  ?& a$ ?) p
            }' `( s' l7 l8 ]# o! k
0 o$ k4 W, ?0 G$ r. a) F( l& Q
            to {( C& J1 W0 P+ f$ L! S" S
                -webkit-transform: scale(1)
  T5 B1 \1 {( X/ j& v' g            }3 P" R# y1 f5 `
        }
& }: x, ^. V! p4 x7 Y
3 K& w6 @  f# Z        @keyframes animatezoom {/ n# G( w/ D  A0 y8 Y
            from {' ~% ~; j! }" l
                transform: scale(0)
3 m6 p, ^( h, s, k            }6 r! G$ K( f2 U% k5 E! w+ q
$ p3 f% Q5 t9 R; N/ s3 Y5 J! R
            to {4 X/ f5 p# i# H2 s' k
                transform: scale(1)8 ?* e6 w3 k, m( x/ F
            }' R( Y! U4 }- F9 }' h0 \) j
        }
8 r" I- ~8 F: R4 W+ r3 N        /* Change styles for span and cancel button on extra small screens */
; t3 g& w2 l6 T0 O8 x        @media screen and (max-width: 300px) {
3 d6 I1 a. }% n4 I            span.password {& P" n1 e- S. n% [! a
                display: block;. _/ a( s8 S' T" q7 k. N
                float: none;" q+ }( k8 v* A+ i# ]
            }
; O# v! e' H4 A2 i8 \5 w$ I" e7 p: |: k# H" C3 E) l, V
            .cancelbutton {
* X4 A0 {5 @5 v. L                width: 100%;
' B$ w, P6 r, F- ]! v9 l5 U            }' n2 t+ O  K9 ^# X: Q, n
        }1 s+ r0 X$ [4 P4 X
    </style>6 x/ @9 R4 U. c' x7 S  d6 K
</head>
3 m$ X& J2 o9 q4 p& k+ A: w" w0 d  d
<body>- q' ~  v* M+ m$ p+ I

! O- G0 C& y) X* _/ z% @    <button id="login">login</button>: |# G4 w4 G. v- [' f5 F
    <button id="register">register</button>0 c$ ~" L1 f  ^: R
2 ]2 J# [" t$ R' j, k
    <div id="formPanel" class="modal">
& y8 D4 x7 d2 e% K$ e) I        <form action="./img/logo.png" class="modal-content animate">
$ E+ C. K- X$ ^) C; N            <!-- image -->8 E7 ]) K0 j! \% z+ [
            <div class="imgcontainer">
/ b# \5 Q6 X* P6 O. u                <span id="closeButton" class="closeButton"
. b  S# U1 i5 c* q2 K4 T                  
! k, j! e2 F4 N8 e8 {                    title="close form">×</span># G0 z1 N/ o- T8 v! z
                <img src="./img/img_avatar.png" alt="avatar" class="avtar">( P, e' {4 T- I& |
            </div>
9 I% F: q0 q, B) k* U            <!-- information -->8 k! |$ K6 }1 N. A
            <div class="container">5 }6 \" v; Q5 A& a- N4 z. ~# d
                <label><b>UserName</b></label>& Z6 e% ^" y- Y. E
                <input type="text" placeholder="username" class="username" required>, b  j  }' C1 j6 b9 A3 ?: L7 P
                <label><b>Password</b></label>: A' D6 @: j4 V5 B+ t! ]
                <input type="password" placeholder="password" class="password" required>
1 h+ e! q' b' j2 }8 G6 M                <button class="loginButton">Login</button>
+ j; ?  A/ N9 Q% ]                <input type="checkbox" checked>Remember Me
( N' ^% b6 L$ G7 g& e            </div>$ }5 g  @) Y; F1 l& S$ y

: G* w5 C: O" @( ?0 h6 a* s            <div class="container">
6 A& I( B* q. M- X% K2 k" J2 i                <button class="cancelbutton" type="button"  g5 z4 V4 p/ i* G1 Q$ s5 T
                   >Cancel</button>, j1 P; {" Z  o5 l  j+ o+ E% T
                <span class="password">Forgot( S4 [4 z( H) a- g0 P
                    <a href="#">password?</a>
% H4 l% p6 x8 i) A) T; Z                </span>% h" }& D. [4 J2 O4 ?
            </div>* ]) B* \: [2 Z+ `& L+ A$ N2 ]
        </form>
: z/ I+ d  N1 {* R2 s# g, y6 r+ H    </div>/ {* x- h% l7 h. F9 I. z

! j7 t% R/ B6 L% a. f, G" [- s
0 h# P8 |2 z9 L* L$ n) b9 [    <script>
+ F' h3 Q" h2 L
# q8 J9 W: m/ Z! m* X0 Y, H; T        function loginForm() {
0 _( z+ I. J9 H* O2 B8 }. K            var formx = document.getElementById("formPanel")0 s# n) N+ c2 }
            formx.style.display = "block"
, R( y9 m# V1 C/ u/ [; F        }
+ o2 z: v/ l# R" M/ T6 C    </script>
6 O( ^* @+ G# a% Y2 F4 w
3 B2 u' K% A1 A8 h1 q8 L! [* ^1 V% D# _: S2 y  ~
</body>; F9 k! x5 ]+ A1 s$ o7 B! [

. P2 T' ^3 E- P; B: i0 O</html>[/mw_shl_code]
! r+ M/ m/ f: L/ D
; c9 N- D& f: j0 v7 I5 N! L
* }9 J; i) S- [2 _5 u" l& f注册代码
6 w3 b3 o# _3 ?2 A- f1 s! G/ p5 T
! a. Q3 Z: ?' ^. |& u[mw_shl_code=html,true]<html lang="en">
* ~) L  y  V. H% P) ^2 W/ x" \
<head>' n0 d3 B3 U& |+ }* N" B2 P
    <meta charset="UTF-8">2 a5 c/ y! i5 H. s0 h3 ?9 M
    <meta name="viewport" content="width=device-width, initial-scale=1.0">, Z4 J) x7 T/ w* S$ ^% U) ^
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
& o0 Q1 }6 `0 Z& t: N2 V7 {8 K% o    <title>register form</title>
! _' @% \- u1 a, E; o
" [0 `% {8 |$ h, a- T( d    <style>$ |! @  t4 z% X: D' t# y6 M& I% H
        .panel {
* K' v# P1 E% ?7 g& u7 m            width: 100%;9 |& m: E0 [3 }, A( |" q3 p
            height: 100%;
/ m0 |0 U( L3 v# e) c# e6 c& r4 e            background-color: rgb(0, 0, 0, 0.2);3 `7 i" [' @' h, Q# [8 \
            padding-top: 30px;
% B% C: M1 b; v+ X* P! H2 _9 B            overflow: auto;* ?% j: H- D% S
            position: fixed;
/ h5 M( g  h. f$ R( A5 s. U+ u+ C            left: 0;
1 J" {; [$ U6 B9 s            right: 0;7 j& p  U2 _' Q/ N- I+ R$ u" }
            z-index: 1;
. {8 w8 G: D0 U$ c3 Q$ ~        }( R$ J: b* ^  u% J2 B1 f2 I8 ~; }
5 m; u- s" q. }% x6 [  y
        .modal-content {
8 B7 ]; ^# J3 u7 D2 N7 e            background: #fefefe;
" v. ?8 k2 Q4 Y; Q* D            width: 60%;- t' p9 r; C! L8 z8 E' z3 k
            border: 1px solid #888;! i: a/ C' G  \% g7 u
            margin: 5% auto 25% auto;2 z3 A* r& I- F$ u( L+ e
" d  D/ l" c  _, a8 R/ ~1 b
        }4 L+ J# f0 s7 W1 h+ c* ?

3 B$ l, d. ~+ b5 {" `& B5 Q        .container {. K' D6 F/ w6 A. U: \) d
            padding: 16px;" E! o  F3 d9 U8 ]7 t
        }8 T# D" X! `6 l- H/ r0 b" ^

8 ~7 F$ R# S! m5 \! s- y! Z* N0 b; D" S/ @        .close {: C4 e! b" d) ?& T1 _
            font-size: 40px;
' h# j6 \; x3 z5 t' Q, X            position: absolute;# j& D' o2 `2 }6 F( o
            top: 15px;. J2 Z( w$ o. X; i. O! [5 u( ^6 U7 `( [
            right: 20px;
* F. M1 a1 u* h- r        }
( K) R3 P# e) D6 l, Y: X0 F! m1 E& I3 i
        .close:hover,
# K& h0 k0 `% }. [6 b! E& n) ^        .close:focus {
6 @# q. }1 j2 R$ M* b4 }  n6 j5 M: D! r8 b3 a            color: red;
$ ?# g. A) m8 B1 J  E* h/ a            cursor: pointer;/ q% n/ v1 a8 n1 k" z
        }
$ D6 i  k4 b, a) `% y. L/ E. V' Q. W4 ]' ~" j: p5 j
        input[type=text],1 `9 B1 o9 _) S) _* W# ?8 o
        input[type=password] {+ w9 Q$ W: W6 t7 ?  }! o
            width: 100%;
, F7 b$ S3 V: O) D% s/ ^            padding: 12px 20px;' `( V) A" Z$ B
            margin: 8px auto;+ z3 J9 t! A: g0 G5 `0 F' H
            border: 1px solid #cccccc;
2 S: W5 K3 u* n: _            display: inline-block;
# `8 I* x/ x& x) C( ^6 d; H2 C        }
4 m9 X; N4 v" D% j% b  q5 u% y) B# W* F- g7 v& w3 A$ w+ c  o* ?
        button {
2 M4 _: S! r6 d, I  |, F+ Y/ I8 G5 p2 T$ v            background-color: #4CAF50;
" W0 d4 @# ~! ]% p( n            color: white;
. x3 k) B2 ~2 z$ ^8 [            padding: 14px 20px;) J) j$ i3 q0 u0 I+ F& e0 S$ o
            margin: 8px 0;
( C; |9 j6 w& N% g. {2 `6 x* ~% e5 c            border: none;) u# X: L8 d7 P! p+ ?) w
            cursor: pointer;! V& m- B9 B, w6 M- v: r+ e
            width: 100%;
% X% }/ o0 d5 d6 R3 M" _        }
" }! B* n% M: v) Z2 G0 w& y8 l- C7 ^4 J
        .cancelbutton {
" D$ p1 z$ U. H% ?) T3 i- u6 D; B            padding: 14px 20px;
5 t3 x4 p. L& v- j# H            background-color: #f44336;3 g9 y4 G3 f' O- w
        }
* \; y6 l% z2 I6 w: e4 X9 q6 L$ p. B( d
        .cancelbutton,8 ^4 D- R& i& i/ h" J5 }% L
        .registerbutton {! S7 V; ^+ ^- \5 y/ m
            float: left;
) s; e) m) V( n- T; t. Q            width: 50%( s  M# d3 t6 |. E7 g
        }
3 }0 U; u. i5 z) s& R* X
- V3 S/ N8 _0 n. @. a# P        .clearfix::after {
% v( M  ]/ W4 J7 h            content: "";
' J, m, I+ t5 O7 S" t+ V' V+ J            clear: both;% Z3 h7 C9 @" r+ [5 H
            display: table;
9 ~2 C/ n$ l" u$ s% |$ k$ _2 b        }
3 W  h% N* b: R- s9 b3 s( N; J    </style>2 F6 u7 o* r4 i! S) C+ n  A
$ p0 p5 U$ t8 F7 c4 d3 H: M1 n% y$ h
; d$ u( }: v& K/ r3 Q  I# D/ R

5 R; d5 g/ X. O" I5 V- s</head>
2 z9 O5 S2 |9 G) u4 ^# J2 c2 i# s: p2 e% s1 y  m
<body>: m7 F+ O( s: Z, c+ r

2 K' M7 s& P0 r" u9 J' W    <div id="modal" class="panel">! j( p: s# _7 j# r) x+ ~
        <span class="close">x</span>9 _* c* w7 e1 ]/ G, y" @
        <form action="#" class="modal-content">5 ?2 `4 j. y. h; Q6 e0 c
            <div class="container">  a# H; \- _! N" e  Z0 M7 I
                <label>Email</label>
1 p$ |0 T( c6 S& S                <input type="text" placeholder="Emmail" required>
8 v# f( m1 S  j; h                <label>Username</label>
1 e: v) x) T( _5 `0 L                <input type="text" placeholder="username" required>
, `0 b& x- E4 k" w% u) |  N                <label>password</label>+ f( x& G/ ~5 _" O' f& P
                <input type="password" placeholder="password" required>
  z" ^* [' K, I                <input type="checkbox" checked> remember me  g! M: o1 |) G9 t  `, o7 q. u( a
                <p>Follow the policy <a href="#">terms & privacy</a></p>! o9 i" z$ x7 G5 E9 s& T

7 g+ s/ ~4 Q2 w9 F. }* c9 ~$ g! O: o/ K1 \9 X
                <div class="clearfix">
/ p/ V% k' G6 Y                    <button class="cancelbutton">Cancel</button>7 K) d( r; M( h% n2 |
                    <button class="registerbutton">Register</button>' f! I  C9 p! |; d
                </div>  J' W, @1 p4 N  Z9 p
            </div>7 e8 f2 B) x  G9 d* X; p$ `
        </form>7 X9 B$ ]1 A" ?
    </div>
: m" y$ `+ ~8 q5 x' e1 b: s/ V2 ~* p+ o6 l" F3 ~, a3 X: P

$ w- @8 [1 m* K4 E  {8 Z' `8 K* J/ F: z+ c9 {1 V

7 i0 Y. z1 [- `6 }* E4 Y3 r  J# q: q, T. ?8 N: s0 ~
</body>7 W2 M/ `. V( n2 k
& O0 u1 @' ~) q
</html>[/mw_shl_code]
" W' Q! z5 M; ^7 [7 z
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 doTeam.tech
回复

使用道具 举报

全部回复2

lacconi 发表于 2019-11-27 15:11:50

lacconi 沙发

2019-11-27 15:11:50

PLM之家二次开发源码分享
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复 支持 反对

使用道具 举报

lacconi 发表于 2019-11-27 15:14:40

lacconi 板凳

2019-11-27 15:14:40

PLM之家二次开发源码分享
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复 支持 反对

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 注册

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

    本网站(plmhome.com)为PLM之家工业软件学习官网站

    展示的视频材料全部免费,需要高清和特殊技术支持请联系 QQ: 939801026

    PLM之家NX CAM二次开发专题模块培训报名开始啦

    我知道了