TA的每日心情 | 开心 2018-8-8 03:13 |
---|
签到天数: 1 天 [LV.1]初来乍到
|
楼主 |
发表于 2021-5-6 20:43:23
|
显示全部楼层
本帖最后由 喬治兄 于 2021-5-6 20:50 编辑 ' c: Y0 ?5 g' P7 F
* j( Z, R" E M1 z! z2 ^
暫時筆記,有待進一步) b% J* j: \' |6 b: Y2 G
6 A# b: F6 m* \ t" h" H+ ~* I
. s% s8 H8 G" {8 X& m+ mhttps://www.w3schools.com/code/tryit.asp?filename=GQ9ZT9X0B854! C8 @/ |7 t, I( O; P4 B( H, ~
* D; f% q; Y, b- h
, H+ z: l4 v# `' D& \<!DOCTYPE html>
$ @" s) _8 Y: U! x% m<html>7 V2 ^0 w; Z. y
<head>- C+ {+ S8 r' S. [, l9 a; |
<style>5 W$ ^5 e2 N. K6 K/ U7 I+ G9 p5 I2 q
.container {9 Z* v* _' l- q( b5 n0 n6 a* _
position: relative;
. [/ r1 ^) v% O- `0 ?$ ^. p) Y; { width: 50%;
+ M1 i( v4 q( }/ |1 w}, s' Y) B8 ~7 e+ _+ \0 ]& v
. l5 M4 B I' Y4 d4 v
.image {! w' A! ?9 u" g* C4 R$ H
opacity: 1;
/ F3 @9 x1 A' F" t; Q$ s display: block;
+ R* @6 v( z- P. J: ` width: 100%;
S+ q' c7 Y3 U4 \/ N4 @1 | height: auto;
8 G' |6 w6 S# _( I `4 z6 V' @ transition: .5s ease;
" \- {. X+ B- c backface-visibility: hidden;' w7 w1 z, A- e" c9 W* j
}0 `; s( s* C/ i; y) I! }" l
& x6 K# n$ N1 Y6 U) ?5 c% U
.middle {
: y; k" `3 m: C) ?) G% { transition: .5s ease;- C) n* A" C& E" l. q
opacity: 0;
' ^+ B! c7 `: P% F6 }5 f position: absolute;
, T% u3 f, {1 ~% N3 y" z2 t top: 50%;" M' ?3 S5 O' l/ E s
left: 50%; S, o, w& x+ f& z# b
transform: translate(-50%, -50%);
+ m# k3 n. r% N+ B; ~. h# s4 i* c -ms-transform: translate(-50%, -50%)
M, e" q/ \+ c ~- v8 I& p}
# L( z3 C7 S' g. p/ C! Q
( ?' M* w6 B2 v+ K9 t.container:hover .image {
9 L" v- f$ _" K% q, I! E opacity: 0.3;
t! ]3 C2 j) V+ W}5 S& _; G1 z s8 L2 M) p# O4 T
) o' E/ f7 h' ?: G5 L$ h
.container:hover .middle {
& @! H& V7 }, d$ `9 }* m opacity: 1;! _+ ~6 y: o# [' o m, A5 `
}
! h& K$ V% H+ p2 g/ U- S% V9 F9 c& r! S* ]7 Q2 S% D
.text {3 A) \3 z6 u7 }/ l
background-color: #4CAF50;
" a# i. L0 n8 G' C color: white;; d0 t9 G5 L+ j4 T5 @5 Z
font-size: 16px;! ?1 l4 v# j; s" |+ t2 A& m0 { y9 c
padding: 16px 32px;* H. }: G3 q2 r8 k4 V
}
( g9 l% T4 ? u0 l7 e& F1 R" X" s1 ^% s) E! F
table, td {; f8 k, X. x% m) h
border: 1px solid blue;
, _, f/ k2 d$ v* N border-collapse: collapse;) f$ Y" Z ]- w) j
color:red;
+ ]" v' ` T% a4 b width: 50%;6 G* @; P4 E; w' m2 C
height: 9.5vw;
* h2 ^: X% b/ F$ B t) P z-index: 1;7 ?$ K. P+ J9 I" n
text-align: right;
: r2 {, S+ K% H}. L n4 T7 K, H e
img {position: absolute;! I. j9 v% _1 ?' [) v* W
left: 0px;
) ]& @1 K2 \1 ~: [/ y. U top: 0px;9 ^& `6 [ H, d6 K$ d! S: d& d) x W& K2 h
z-index: -1;# N6 O* I- j' Y: { i( u" j
}- s7 U1 \* S& F) K! v& j9 m
/ {; o8 _* _- h' y9 n9 c
</style>
$ u0 g7 }0 F+ B9 k</head>
5 _ H# P- z% a5 S# t% S; m x<body>/ Z- M2 I6 D/ q; R% O) l
* [0 Y1 d3 X6 R" x3 @: o
<h2>Fade in a Box</h2>
* U) C8 I7 x; @6 s) c" @! }
. X7 q! z0 O5 i& t# Y1 g S<div class="container">4 G( s# p7 w; f+ |6 |% x) I
<table style="width:100%"># f! m$ }# v: R9 {' h8 ~5 T; B
<img src="img_avatar.png" alt="Avatar" class="image" style="width:100%">0 a- W4 Q8 [! b9 m! g# v
<div class="middle">+ e# ^1 z# C* N
<div class="text">John Doe</div>) x, P( O' d- n& {: ^9 @! C) n6 U
<tr>) z& w9 l9 D+ w2 L1 }
<td>1</td>
( _$ M+ M# b1 `2 g% H <td></td> 8 b8 A7 L7 f0 j: T' y9 i, u6 b
</tr>5 c# N6 \/ M7 J5 P2 `5 @
<tr>- o* y; L, Q0 V4 d! C) K) ]( b
<td>2</td>$ g! g; n4 W1 g( a
<td></td>
8 E) g% t n% z </tr>" R8 Q; v/ l, x4 |5 Y
<tr>
8 T i# @$ X8 ]+ X- f! [: e6 |9 P <td>3</td>' v2 |; A" ~( r4 E, p5 p
<td></td>' S3 F2 d5 s1 ^+ l2 ?$ k
</tr>
! [3 f( y7 h) x3 G# k0 P# D <tr>
, b( h& [: f3 h" |2 f* P- w5 k <td>4</td>
# e/ l+ e* t1 I) o" I" I+ O { <td></td>
" d) I; r7 w2 O& t9 T </tr>: Y, f0 Y) r+ b/ `/ t
<tr>0 N3 o' U( Q7 i
<td>5</td>+ }, b9 {1 ^( @8 j0 w
<td></td>1 X& O, B+ F* w+ ?8 a( ?
</tr> ' b/ K% K# b7 _1 K
</table>
: D! H7 q3 z T4 {. p1 n5 }</div>
3 g% C% K+ O R1 ^9 R</body>3 ?% i% d- [1 d' X
</html>* v& X. `9 a4 w2 T
1 m. U4 r* { O+ q
0 @7 q6 l1 s) L x1 i0 R1 O</div>8 a) J1 W S7 O+ q4 _! w
/ O" u. {/ g' ~0 Q
</body>
5 f/ Y. M. P# O1 _6 o4 p1 l! ^5 e</html> {& n! j+ n* r- w# S& e
|
|