TA的每日心情 | 开心 2018-8-8 03:13 |
---|
签到天数: 1 天 [LV.1]初来乍到
|
楼主 |
发表于 2021-5-6 20:43:23
|
显示全部楼层
本帖最后由 喬治兄 于 2021-5-6 20:50 编辑
4 o/ O* X6 v% h6 j, [: c
0 Q) H5 s. K% o. s+ l7 X9 q+ o暫時筆記,有待進一步% g. e% U) e5 F @+ W+ H b
0 D8 y7 f3 X; R
* k# ?; z# J0 r" `' Hhttps://www.w3schools.com/code/tryit.asp?filename=GQ9ZT9X0B854
0 r" {9 _1 q5 i0 J/ `9 R/ G, R( }# T$ n* E8 b7 C, _
4 ^' B8 m, C! }* d6 j( Z<!DOCTYPE html>! h* w" u: ~8 ^8 I9 i% }
<html>
' R# \6 C0 B5 v. l<head>
( ?4 w) B# B) n9 d<style>
' J) k; b% M6 _) [.container {
5 w8 O4 c+ \9 K: Y8 @ position: relative;6 F! q. w d! M
width: 50%;
/ k9 P8 e# x- }}. P, q6 m& U- ~( y5 `
" ^! x1 y) {& g1 y.image {# ~! h" Y& M- j% F/ M9 a9 J
opacity: 1;* u: |/ V5 r1 `+ @; d. T5 J8 h
display: block;
7 |+ s+ ^; n% H# H7 } width: 100%;
% p9 P' L5 v( l! A2 b height: auto;
) B6 G! L* @7 ~& ]/ G7 N transition: .5s ease;
0 A0 n' B! b! j; p5 r E backface-visibility: hidden;
1 `. l' T- B! l}
. j; [/ t b1 s7 A1 |4 g# l5 C0 A
6 K. i- V0 ?. Y- @; f7 _, k.middle {
" c5 c0 @, R/ O4 R) ^6 K transition: .5s ease;
/ W) P8 Q/ A' r2 j' g! E opacity: 0;
* o( m/ _. t" x& m" e& u position: absolute;0 D9 c: l7 s; X
top: 50%;. ]! v) J; r, R1 z: E
left: 50%;2 [: W, A' ?' i; A
transform: translate(-50%, -50%);
' D$ F8 g" n: Q, T0 Y0 R: D -ms-transform: translate(-50%, -50%)% ~9 Q4 C; z5 _/ |: w$ w
}
. H3 t2 C% d* [/ ?5 F. g( z
; {+ w4 o4 G! Y$ e2 `.container:hover .image {
; i' D, [: Y* j. C opacity: 0.3;7 v* ]2 p1 ]- W: O2 L
}! I! t" S1 n6 j+ [* u9 G. p
9 i2 x2 r& O- Q8 U, i e.container:hover .middle {
# Y. l( g7 }, X3 S, r5 E4 S. |; A2 T opacity: 1;% I& P' W! x8 h
}! ?, M) }; |: y0 F1 L
2 e% _5 u/ K b) d
.text {
# h( y% v' X5 e4 b" R background-color: #4CAF50;; @ a6 |- W7 V& o. _
color: white;
7 G7 ?# u4 E/ w6 U font-size: 16px;" w6 y7 x% x9 L, l9 l. _% E
padding: 16px 32px;1 P3 T. x! `: f# T5 x
}- f; f" @! S4 {# q- D* F
/ b/ O$ [% i& r, J$ b% `( S. `/ j% `table, td {
4 e, t) e; X1 e4 V0 e1 t border: 1px solid blue;' m7 @/ M% j$ K
border-collapse: collapse;
. o3 T) Y4 W. @% {$ K color:red;+ ] ^2 m9 Z. \$ z- Z
width: 50%;
7 _: x# O6 l; Q/ X height: 9.5vw;
7 h! N/ g Q; M) \( S$ f" ] z-index: 1;$ G3 O3 h: \$ D; b
text-align: right;1 w. y* c& S4 k- t1 Y* z( r
}
5 l) s/ K* V+ P& `- Uimg {position: absolute;
9 ?) s4 C* K- W( C' X- T) k left: 0px;
% N! \% f* m' }4 u3 K( z8 H top: 0px;
: s) R. A+ O2 i3 c# W z-index: -1;
) U7 q/ k; y& s+ a, ~( p4 c" p}7 G! N5 t1 ^" ], i* t8 `9 n
' z' X; s: w# l2 y' q
</style>! F5 `: E; M4 \$ t' z
</head>
/ U5 a, ?* v! w- x5 R- u, y<body>" { \2 A% F4 o* \
0 N+ H" Y. m: s<h2>Fade in a Box</h2>
. f+ m& B! Q- s1 @* R& K0 l' S; i# F& E# W
<div class="container">( S4 s% y+ s% J7 B* A( S6 o
<table style="width:100%">/ j8 z7 j. O& K" M2 p4 j
<img src="img_avatar.png" alt="Avatar" class="image" style="width:100%">
# L6 [: G( ^* F0 o <div class="middle">
. b9 |# ^7 E. N <div class="text">John Doe</div>
& L/ v% r2 J9 y( D/ H! V <tr>
5 Y1 [% T) `$ n; _+ a <td>1</td>2 i. @* B+ m2 r1 t' S! {
<td></td> " G: g* j: N+ R" a; D$ j; S9 x5 d
</tr> n7 p7 n2 ]* ^1 ?) A0 v
<tr>6 o/ l9 I4 R" ^* \3 C! X
<td>2</td>, |+ Q. N) c' J7 w# ~
<td></td>! {+ D' k" b e( y7 o$ e* U
</tr>
0 e6 X9 \: W7 J$ b5 V4 ` <tr>
: D# X4 J6 x" R6 W <td>3</td>
2 y2 h4 ?3 G- k& a' M" o6 E0 p <td></td>
- {8 _6 v y7 S1 j; B </tr>
4 ?- D5 M$ t ?7 Z( t <tr>
7 N. e% ^, q) p: z( Q <td>4</td>
7 ~! d G0 q7 n& D e <td></td>
% L. e4 [! n2 G4 J' S( R </tr>( }) Z( C. A7 O) `+ g; W
<tr>
9 J$ N9 f. p) b. Q4 M6 _0 Z <td>5</td>" O* p5 `7 z+ `( Y4 X
<td></td>
7 [6 ~! H8 t( ?, b; L0 n# m) F O </tr>
1 T8 l9 j; w3 ~5 d3 z7 i8 [</table>
$ z$ u- h0 _2 h' }</div>
! ?5 H, V) w& m5 n5 M0 ~( L</body>
/ t4 E* o X0 @</html>
' Y+ c- m6 T0 Q$ H, C, i
6 U9 e- a& [0 w: P9 h" p$ I1 `
8 `/ h5 R U2 }9 t</div>9 y6 a5 j$ M4 |
/ B, B4 l) Q6 X4 B" W</body>
" {4 \9 L$ @, v3 ~2 X+ `$ m/ e</html>
L; U5 }2 y. o3 ? V9 ^4 |; ? |
|