TA的每日心情 | 开心 2018-8-8 03:13 |
---|
签到天数: 1 天 [LV.1]初来乍到
|
楼主 |
发表于 2021-5-6 20:43:23
|
显示全部楼层
本帖最后由 喬治兄 于 2021-5-6 20:50 编辑 % M: f& P- s7 I+ s8 q0 n! j/ X
4 w2 X1 V) s8 Q) z
暫時筆記,有待進一步
- `* f6 R3 k) o3 V k+ S+ y U
' Y x. A5 Q7 m7 {8 t
/ Z5 b) W0 y, w/ C! M* zhttps://www.w3schools.com/code/tryit.asp?filename=GQ9ZT9X0B854; G! ?$ d: A% k8 r1 }" Y: E/ m, N
, K. x% I8 c/ ~/ m! t
9 L1 _* F# z- F4 g' K9 Q" F<!DOCTYPE html>
% L, ~, H# }. X) c4 l; w<html>
3 G, m o, `' V8 k4 ]5 ?) X& D( Z<head>/ y& {7 e" i: w; `* ]' I+ U
<style>
. [% }8 m7 {! \! W+ F.container {
$ M! M$ ~! q6 r! C' b5 G position: relative;
$ f4 Z$ y t) X+ v width: 50%;. S! a7 T+ P% F' P, E
}
1 L4 f) G$ v) \+ H2 |0 h
+ v# w8 w5 l8 C/ f& L.image {
7 d* K1 g/ e* c8 w" {, { opacity: 1;
9 U6 C1 L5 N2 @2 ~% |% A+ I display: block;5 `. h# l, W# W, d4 Z- }$ P4 ?
width: 100%;
" M( T4 _8 h8 _: M& D, y height: auto;
|4 y) @% m- W+ F transition: .5s ease;% q V6 v! B! L$ g' m
backface-visibility: hidden;" X: D; M$ Y: i* Y1 U6 m; h7 V# A
}
+ B5 m1 W9 a* S. x
# }' |7 }0 S1 |4 H.middle {4 ` \( P6 J) z( `9 N }% {
transition: .5s ease;
& _& j( d/ N2 q) r' r opacity: 0;
; o: x- ^) y% G1 M position: absolute;# y( W" _/ J+ x- c; Q A
top: 50%;
3 U! v5 x* Z# d x/ c" G4 Q left: 50%;; l; g' P4 e: ?2 s+ r0 f
transform: translate(-50%, -50%);! A. |: ?2 n( q
-ms-transform: translate(-50%, -50%)) R- K, D) K5 L" T( j1 b& ?& b" D
}
5 F' Y8 b `1 ?) }4 E3 x( w0 G3 x) M+ }/ t4 x! @2 C; ~4 y
.container:hover .image {
( a7 f- @# S- o$ L: C opacity: 0.3;
; g, v9 e( u2 v6 T) e+ {$ G4 v# X! [}3 U2 J9 u* ?$ `/ Q
6 c+ {' I- Z5 {8 m7 @.container:hover .middle {( J4 M8 h4 T+ {) L: @" i
opacity: 1;
$ V! J! ?) z+ }, h h( Q}
% c$ Y: S& e- j% `: h9 A2 p' L& |$ A' k/ L
.text {
3 L. U4 B6 {$ ?- c2 g background-color: #4CAF50;
( I) g" w9 a' i0 P, y* f color: white;
4 y1 Q; h" O% v" I- v; D font-size: 16px;9 W2 C s& R. W$ W
padding: 16px 32px;
: E+ T$ [4 A9 R6 @}
X ^+ V4 H9 a; I3 G# @
# }0 a) P! M9 y ?table, td {
5 r; X) i0 E& D/ e5 [ border: 1px solid blue;
& l( q- e3 K, ]# h2 \ border-collapse: collapse;
; N- ~3 w! q3 [! }( R( O# g7 G color:red;
0 ?* U2 h1 t+ f; R/ b1 B: d width: 50%;
& U M: @" ?% D3 e) N* |- T5 z height: 9.5vw;8 F4 N2 A9 D& b" O, {1 h8 B
z-index: 1;
# y3 j/ }7 I5 E. i text-align: right;: Y/ a$ s( X& Y- u: n) w
}( @* T5 P! t+ D5 Z; }
img {position: absolute;- f. G0 A) U( c. X6 f2 u$ w4 a
left: 0px;" [) H. _: J6 Z+ M. C/ d# F- W$ |4 N
top: 0px;, g; I' W& \: n |: B1 C1 f
z-index: -1;
+ ]8 P+ i% P# I+ _4 ]}
% Z3 i& Y6 a* B4 V! k& b
- J9 T+ B# ^! _" T3 z- Z9 y</style>
: v$ J4 l5 e* k- L3 u</head>7 J% q" Z! h; G! F3 P& t
<body>
- V% d& `% e6 N8 l1 {* U1 c* B; G3 t0 P
<h2>Fade in a Box</h2>, l1 t) m$ l: g0 b! G0 n4 Q+ P. N
2 P2 a3 [5 P& s8 O5 M J9 P
<div class="container">
4 N4 w% }! S1 C* n" i<table style="width:100%">
6 F8 f1 l* J& R- G5 \: Y <img src="img_avatar.png" alt="Avatar" class="image" style="width:100%">$ I7 [, e/ n$ s! x
<div class="middle">3 ` m' f: S" M, M, L
<div class="text">John Doe</div>
( D: p$ a8 v+ Y1 W7 R <tr>
) ?! s( Z3 l9 |6 d: z, S <td>1</td> E0 v; s, G9 |1 S* N
<td></td> 4 y$ a8 D3 A0 p5 I3 `
</tr># L( B( T+ t( D. T
<tr>
. Z a0 b& S$ D" ]" } <td>2</td>( m8 d; M" y/ C- k! `' n, K% E
<td></td>
9 [# @$ Q6 V: K Z! k </tr>, m4 z2 ?6 M! p! H
<tr>9 U& _. C" ?' v: U
<td>3</td>* f. l* z$ G- w$ L. b; B( K
<td></td>
& Z6 J5 X0 J: }, U: D </tr>
- r3 z4 a; R# e6 Y9 v4 j; O <tr>" y! t& v g1 m) w5 Y
<td>4</td># I3 g' _* X, |; N* U7 K' x3 J- {" }
<td></td>1 ~% i- ]* u, n* n% _
</tr>9 X2 e! W; C2 O+ ]0 [& Z* f6 ?: ]
<tr>
3 g3 K1 d9 {7 y5 u) Q <td>5</td>
" [+ f' r8 [6 A: p$ L <td></td>
' U' J" b- k' M0 _* [ </tr>
/ Z5 E5 F# M+ K8 t! l</table>/ q9 W4 P5 O5 m$ ^* V
</div>
, l1 a; W7 r: t& k$ V; C D) ^</body>: D1 | I4 W$ D! j" a( n" M8 H ?+ p
</html># i& v8 }' ?2 i( H
5 S. i. F9 r! e) ^) c $ V& I; R' g0 Q* K' g# o/ A
</div>
9 L% N4 e0 c0 i1 a; {# q3 E $ c: a# x" d4 S3 X1 Y' S
</body>
1 K4 K, Z# X& {& H- R1 k</html>1 f; q3 t" q% K% P6 I
|
|