TA的每日心情 | 开心 2018-8-8 03:13 |
---|
签到天数: 1 天 [LV.1]初来乍到
|
楼主 |
发表于 2021-5-6 20:43:23
|
显示全部楼层
本帖最后由 喬治兄 于 2021-5-6 20:50 编辑
# b# p5 L; o1 m: H
9 m0 S7 j h$ R% G暫時筆記,有待進一步
7 P) k4 c S9 P+ W! B+ W! ]3 r& z8 R; A* G$ U- g7 X! f: g$ I& L
, T' z7 ^" X/ W
https://www.w3schools.com/code/tryit.asp?filename=GQ9ZT9X0B854
- @; f. K2 q- A* x" g: C6 r& F$ {3 F6 H) D$ g, z* G
) T! A/ ~, \- ^; c3 y# u6 _, V<!DOCTYPE html>
% a3 |# V( w9 t4 R% ?<html>
6 B; p( Z! U! m' i3 V<head>5 x L8 A* Z8 r' i
<style>- p$ W3 L4 [4 b6 @2 ]( e4 G
.container {2 g8 h7 r7 b" |$ X: b6 o- G
position: relative;( I2 E, @4 ^1 C K M2 D; w
width: 50%;& Q' B( ?& d! |! _
}, ~5 M* r O" w9 s: c7 F: u
( I5 N: N* L; H6 [- E# t& A
.image {. n. V8 D$ m- c* |& ~
opacity: 1;
+ `$ v# E' `2 }0 J# G* V display: block;
8 }& c) R& r# e/ [) M3 m4 L width: 100%;0 s3 d: d2 @: h+ R# a1 L( i1 H
height: auto;
- ~* j" J+ |% I' A$ A" ?$ ~ transition: .5s ease;
6 Y" c7 h7 c m: h# p9 C( V: w; H$ g backface-visibility: hidden;$ k7 W* M1 d$ v+ R G! _
}
% p1 n; J( j( h& d. n) x2 j/ i
* k( G% `" E" n9 e.middle {
3 z1 H Z+ G. x7 H) j' x transition: .5s ease;. L8 A+ V7 G3 ]7 s" e$ t; O
opacity: 0;! \1 X3 K9 F5 p# Z" Q \( J
position: absolute;
: i2 V0 m( h8 f top: 50%;9 S, P9 d! d/ T
left: 50%;
% Z* @9 a$ E! G, g$ M6 A transform: translate(-50%, -50%);
; _" t2 N# p* _- Q: K V$ z7 W- D( Z -ms-transform: translate(-50%, -50%)
/ U$ I7 P7 g! e, c}$ ~, }0 R9 Z/ u* H! R
: Y; S# e1 M/ j& P& ^
.container:hover .image {) h9 }2 L& E! G$ H E
opacity: 0.3;& J* g, K1 V9 e5 m" p
}
! J2 S6 w) `. h9 p8 b
, N& x, F9 P# R; Z0 E' _2 |. Z4 x.container:hover .middle {
4 ^" ?$ m. ^' d* h opacity: 1; P7 J, v& V9 b4 K% \/ |# n
}
. h5 w& g% p& E4 X8 g- [
; @0 Q: C" M6 q/ `3 A+ ^* K2 [.text {
8 Y4 P" s/ {; p4 j: C. @ background-color: #4CAF50;
) _! F/ ]/ U6 x/ b: C4 T color: white;
2 n0 N! n8 O: Z' i) x7 J7 Z font-size: 16px;
7 g/ ?$ W) j* d& T3 d8 @ padding: 16px 32px;
/ b& A0 M1 i* {/ X}
4 {' z# v$ O+ r F2 t/ R5 p* `
/ [5 f( o( K9 e; W2 b4 ytable, td {
0 W! y& q3 t9 R5 a border: 1px solid blue;( E& p. F9 F+ o1 z5 b
border-collapse: collapse;
, i! A1 ~1 \5 |' Q# ^4 z0 O color:red;( _' b6 j0 J; F1 X
width: 50%;
5 |: X2 u1 I9 N8 o( V; y6 O height: 9.5vw;
5 A$ y2 k8 E+ S* v- D3 W( @0 w. D2 ? z-index: 1;! g- t* L C( T/ l5 H- a
text-align: right;" U }" W3 I5 g. \- ?+ l4 K- Q- e
}" z. P7 D! x3 ^+ k
img {position: absolute;" A: ]7 ?* m* {" o4 `
left: 0px;
1 D& d% q7 }6 X% B2 i/ w4 B top: 0px;" f) g, E/ U r8 f. b
z-index: -1;
( C5 @2 A5 _5 e/ p# C# b}
4 B$ j0 X. i ^
- _& a8 Z( B4 G6 \# D</style>
3 P6 u0 }0 e6 q" [, p7 o5 g</head>, z( l7 @; k* J5 m& N3 Q
<body>% F4 s% d; K5 x% Q6 O" O3 Q
' |+ O* a7 G; N% v+ O- M9 Z) Y
<h2>Fade in a Box</h2>
3 l: d4 x" {1 r, f1 }- A3 i0 M- Q$ o5 F' h" j
<div class="container">
+ G) E ]3 l( E; B* l, r% y<table style="width:100%">: ]$ ?/ y( }1 j$ N
<img src="img_avatar.png" alt="Avatar" class="image" style="width:100%">
* K, o- X' r% p2 S# z, X <div class="middle">: k7 j+ i v% r+ @
<div class="text">John Doe</div>, p2 y5 R3 |6 K5 _# Q* R. Y, c
<tr>' s2 n* E( @* M+ D ]4 F% l3 y
<td>1</td>% |8 w0 T5 s% V
<td></td> & ]) _& e1 l5 l- P* `3 X0 f: _
</tr>
# L7 R5 J7 V2 |( C- r: ]- h <tr>. _2 |& R2 S8 n, \; ]
<td>2</td>/ F& o) @& A* P, _
<td></td>
* {; Z3 J* \7 C4 I4 E </tr>
2 {, @) ~& E' ] <tr>
. `/ Q2 g$ c& r8 s1 W, x. S <td>3</td>
1 C0 S% k( v$ k5 _: G. l <td></td>3 u, Q9 ]; N* ? [
</tr>
# K# ^8 v+ F% @& r1 S+ N: } <tr>
7 F" U/ C7 @4 ^2 y <td>4</td>. _/ q3 S+ j/ p. M' a
<td></td>: `! k8 q/ z H
</tr>/ v& o2 _$ ~) |- y, M0 d1 g* q
<tr>
. O3 a$ e6 l% R2 r <td>5</td># ^7 q9 W% P( `7 A
<td></td>9 x/ ]! w% ^. A( U; z# U. O% s2 p# k
</tr> ; ?) Z! \7 Y; [ _% r
</table>! c7 Q2 U& E8 D% j/ i* v
</div>, d1 L; L* ~6 o* j
</body>9 T5 T( y" |! b9 ^
</html>
3 K7 i2 w2 G! n7 ]3 L% q) k0 X' D- _5 `1 ^
; v, [ u0 j- R" x$ R. V</div>
2 ]# c# I' x. |1 ?' @
# L; x1 Q! t; J* l+ |6 ]</body>+ r3 X9 E r' V6 {) B
</html>
3 I ?' r; ]4 H2 U- s: \ |
|