TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
本帖最后由 喬治兄 于 2021-1-22 23:33 编辑 B' E/ N) e1 T* @3 b- A& l3 u
+ u! W% D8 Q* h0 K
請賜教 css & html" ^& n2 R' I' J8 X5 P* k
. o8 g% q- i7 ?, @! Jhttps://www.w3schools.com/code/tryit.asp?filename=GIH4P74ZQBJ7% M6 A. D: q0 w, J. |
" _5 h/ W, f. p4 m% n請賜教想要當按兩邊的 zone 1~zone 8 區域時是否能再返回到最上面的導航那列; v- o2 M! h' W, |5 z8 Q
/ Y5 h6 n' l7 Z' i) n, J
<a href="#1">zone 1</a> , <a href="#2">zone 2</a> , <a href="#3">zone 3</a> , <a href="#4">zone 4</a> , " u5 `- Q. S- ?& O2 n1 s0 o
<a href="#5">zone 5</a> , <a href="#6">zone 6</a> , <a href="#7">zone 7</a> , <a href="#8">zone 8</a>
* j- D/ H" M/ Z& s$ o..........這個區域且配合 hightlight & c9 A5 S2 Z5 L) V
8 ?+ b; B" T9 {2 B7 @/ S
Thanks a lot
) r% A# a' C0 _+ w% w# u
2 h- T6 t: U H7 B; ]7 a
7 a- J! j& f1 x
4 {" O ~- e( U' \+ R( ~0 x# n3 Z$ Y, z) O/ i i+ T& K7 `% [
; n5 m, W, n$ Z6 `- e3 A% i. W, f/ S8 }<!DOCTYPE html>
3 ^: Q4 @2 J/ c<html>- l& Z8 q; d- R; l( @
<head>+ J* e4 l. J5 {& G+ g
<style> 0 Z" b1 V% l9 ^8 r7 `+ v
#main {
1 x& l) V4 F# D4 _' T5 H8 h1 N width: max-width;' {& `/ S, E; z9 r9 B
height: 100vw;
3 t9 }* z& t; Y+ U; J( y border: 1px solid #c3c3c3;
+ m, c9 g" y1 {% N) v) [ display: flex;
D( z: ]: i6 a2 k7 [5 V( ] flex-wrap: nowrap;
; M6 ~# }, v. ~8 F' }
2 |& [. ^% `4 y6 Q/ ?: J}5 I, c9 L2 U. T! K; Z+ W. ~; | _
+ C6 f4 b/ F9 N c ~) T: k) }
#main div {3 p: I a7 h* l& |7 b
center
9 s* R7 c; |/ v& ] height: 100vw;0 a' \5 g5 U! u
text-align: center;
$ x/ @' o. B& u/ p( a# S( g9 E# D flex-grow: 1;' q- c' X. k0 I7 Z
flex-shrink: 1;
" _. C' Y7 U' `) q+ i9 x} k& W0 D- M7 R8 z; S5 A& e9 z
.flex-container {" m+ q# _+ }" I' |# Y
display: -webkit-flex;
1 Q; p# c4 n8 U5 u( C0 _6 e( p3 ^6 ? display: flex;
, Z$ N; \( n; |6 W0 {) z -webkit-flex-direction: column;
/ ~+ c W* u& i! c flex-direction: column;
1 ^0 E, q' d3 r; i; o f: L width: max-width; B; v5 u7 n0 b1 u2 W
height: 100vw;1 p2 j, C3 k! g' O" {2 t- ]( s+ |
background-color: lightgrey;
) }2 a1 r9 r1 P# ^3 r% N1 _ 2 O% X: o2 h4 ]; K3 A2 K2 s$ A
}; ?( ?$ z2 K9 F9 F
5 [; @, d7 v. y9 I7 B; D0 ~
.flex-item {0 _, O( l& x+ Z) `# y! a
width: 1.5vw;
$ B0 N! E3 O9 T height: 25vw;! f* n4 ]6 `1 B$ H, Y, H& @" j
text-align: center;
( q9 e) c( I! ]6 V5 L q line-height: 25vw;
) R' T$ a4 N- C# n, F! y font-size: 1.5vw;* p& z- B H: }
background-color: white;
: X$ w, O) | D7 \# M }
5 y. b; P, J0 g+ O2 c
- h1 i( b! \; ^+ o* Z1 S" r8 B
" S: b2 K8 m% v6 s; d:target {
) i1 c2 e. S4 Y Q border: .5px solid #D4D4D4;
2 i- i. a! p: J7 W2 X( v border-color: black;5 S% N$ _$ }* U# c9 ~
background-color: yellow;
0 ~ f& t7 b$ P9 Y}
$ Z6 V8 ~- Q s8 U$ ]( T! J</style>
3 n* M4 Q; C1 P* {# x% L2 y% ^</head>
% p2 t' x0 g; T5 |- v, R( G. W& I<body>; V) m- W" B8 }) _7 E) |, a
<a href="#1">zone 1</a> , <a href="#2">zone 2</a> , <a href="#3">zone 3</a> , <a href="#4">zone 4</a> , ) R! @) g, P; m) u
<a href="#5">zone 5</a> , <a href="#6">zone 6</a> , <a href="#7">zone 7</a> , <a href="#8">zone 8</a>& B" d" N0 a$ c9 o, A0 ^
<div id="main">
2 a1 b5 G4 h: m( ~3 s8 c g0 y <div style="background-color:lightgrey;width:1.5w;"><div class="flex-container">4 W& I1 u2 g6 L
<div id="1" class="flex-item">1</div>( H* u# \, o3 ~6 _# n
<div id="2" class="flex-item">2</div>
3 m$ {2 ?: p8 Q <div id="3" class="flex-item">3</div>
( V/ B* p7 f* U* t6 ^" r9 U% _ <div id="4" class="flex-item">4</div>) I* q7 \3 ?( Q$ V
</div></div>+ Z- ?/ m4 V# X/ n) D
<div style="background-color:lightblue;width:93vw;">B</div>' V. P# J$ p8 v# c8 W% f
<div style="background-color:lightgrey;width:1.5vw;"><div class="flex-container">; G) m4 _* ]+ Y& _) Z. u7 z: u& f
<div id="5" class="flex-item">5</div>1 i% S/ a- M6 v, J% R( C: j' G/ p
<div id="6" class="flex-item">6</div>
9 A0 ~+ h2 f3 u- r( i; t7 P+ j <div id="7" class="flex-item">7</div>. ]- E2 ]! Z& C* F
<div id="8" class="flex-item">8</div>% y! i2 ?1 Q" e* F0 R
</div></div>
1 s$ m& \! T% E0 V</div>2 _; O" P/ ^6 I, N' {# N
[6 C5 \% y5 u p, G. E5 h5 p% ?8 O# j1 o. z/ T
</body>
2 T; K: u2 v* D/ s- a* T9 w* S/ d</html> ?1 p8 \" X2 W
|
|
发表于 2021-1-22 20:43:42
楼主