TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
本帖最后由 喬治兄 于 2021-1-22 23:33 编辑
2 h' \' \' Q: a8 M7 t1 h9 k
& b( i4 E" W; E0 T請賜教 css & html9 P! m+ S2 F! Y3 Q/ C$ s
6 z& j! x# j4 ~" l1 R1 Dhttps://www.w3schools.com/code/tryit.asp?filename=GIH4P74ZQBJ7
, d0 l) z+ C' f% q. E' l# c: {9 |8 n0 d' R
請賜教想要當按兩邊的 zone 1~zone 8 區域時是否能再返回到最上面的導航那列7 |- R) ?& s: @# T) n% ~* w* ~- v ]
& l7 ]' A- {+ ~* |! m+ W. M
<a href="#1">zone 1</a> , <a href="#2">zone 2</a> , <a href="#3">zone 3</a> , <a href="#4">zone 4</a> , + B0 f. f# I; Z1 B- c9 H
<a href="#5">zone 5</a> , <a href="#6">zone 6</a> , <a href="#7">zone 7</a> , <a href="#8">zone 8</a>
; ~" f7 R& X, V) B! {7 V. E% P..........這個區域且配合 hightlight ! L* u7 v2 P# Q, y
: v1 A5 E8 y, l. yThanks a lot5 D% M z, k! r' e- _
4 O# d" |! a; g4 q
9 P/ y, Q9 _$ i G
6 ` `- @" O0 s1 K& n& y1 s" B, O% q2 m$ {3 e# M- T) G
8 P3 B( c) G; Q
<!DOCTYPE html>
; ?" T+ A0 b6 D<html>! C/ F$ V! }" D1 z/ x2 J% [
<head>
. [# U& P7 V6 o% Y- \3 A3 H+ w, V<style>
8 c4 n& [7 r7 w# M8 h- p/ n6 P#main {
5 X- @( E% |7 k6 ]% k$ y3 S width: max-width;
* I/ K9 l: M' J0 H" [ height: 100vw; G( Q2 a$ _+ s
border: 1px solid #c3c3c3;7 D0 |* n* K% b. A& V
display: flex;, ^4 x+ L: k) {4 T* ]
flex-wrap: nowrap;
* D9 z P; ?' B+ f* m 2 n. Y. h. @4 i8 {! f& H- t. v
}. }) Z2 D" ~ h! X1 a4 y
# a; h; v0 ?4 l
#main div { l- _8 ?: c) z9 i' F
center
* L. L# ]& P# b7 ~2 } height: 100vw;
' S8 g6 V8 X: o: v& [ text-align: center;
. _4 J( B, {3 R7 Y8 g5 p0 _ flex-grow: 1;
) c" n( C2 Y2 X) x/ R+ S+ b9 h# m8 Q' } flex-shrink: 1;3 f- t3 X* X2 X+ W
}
5 S1 ^4 ?3 m4 ~/ G5 t.flex-container {
% v) B& L! @+ {' l, O display: -webkit-flex;
, Z q1 `; Q2 W5 S/ e0 @ display: flex;4 y9 j P, }, Q
-webkit-flex-direction: column;
9 x# x) c/ |0 V* Q3 \3 t6 [5 K flex-direction: column;
3 G$ D, Y, Y7 j$ e2 `! l width: max-width;
5 Q5 K; o7 J/ x4 @ height: 100vw;
5 y g* ^6 v- A$ D: ~ background-color: lightgrey;8 w5 Y5 {" M* r" b* C Q5 f
5 o( @0 y" o; b2 M1 K}: M) b# P" H: |% }7 o8 l
7 m6 `4 P3 d! e( M& P4 u; o: |4 U
.flex-item {
0 l/ G( E9 x7 h width: 1.5vw;& H" B* |; g& z' t/ n! f
height: 25vw;
- p3 O2 L) b: ^3 a4 t4 W4 P, a text-align: center;
9 y# N* W0 c' M line-height: 25vw;
# U% ]0 S+ V( H8 n% V3 L font-size: 1.5vw;9 U Y: [6 z$ j! s
background-color: white;
% b/ ?# y. H% f1 `' d }
7 L( H# D* w: n) G2 V F. E, k! A! S2 Q4 P
h1 C* V1 A! x( x9 [2 r" f
:target {: G, c3 z* Y' J+ E$ X2 M
border: .5px solid #D4D4D4;4 ]3 B% |& a" v8 {9 I1 l
border-color: black;
2 W0 Q% V; s. T8 }5 r background-color: yellow;/ e5 c: R5 T, }
}
" l P- n* E) I! l' i</style>) O' f' c( B: v: _/ r% \: J7 A
</head># L6 `7 P3 s6 S- l1 [$ K
<body>
$ ?* n; Y7 n. z0 Q<a href="#1">zone 1</a> , <a href="#2">zone 2</a> , <a href="#3">zone 3</a> , <a href="#4">zone 4</a> ,
5 q3 `5 M S p" F0 \+ W4 ^<a href="#5">zone 5</a> , <a href="#6">zone 6</a> , <a href="#7">zone 7</a> , <a href="#8">zone 8</a>5 b# U. E6 f3 X9 B. S" U
<div id="main">
9 ]& _) z- ^6 D* S9 C <div style="background-color:lightgrey;width:1.5w;"><div class="flex-container">; K$ o! y E2 H/ G+ n( R
<div id="1" class="flex-item">1</div>( ~5 V% U( M# q8 `
<div id="2" class="flex-item">2</div>
# g) R. ]6 Y" C <div id="3" class="flex-item">3</div>1 B5 K4 ^1 i9 x: O% h
<div id="4" class="flex-item">4</div>
% r9 s- S' I6 p( J& r$ Z% E9 C</div></div>: a9 |& h" v# O, \- R1 ?, i" Y
<div style="background-color:lightblue;width:93vw;">B</div>
" k2 h3 {' l$ d, N& _7 p <div style="background-color:lightgrey;width:1.5vw;"><div class="flex-container">
' b: _! F* u9 O+ E6 o, P2 l <div id="5" class="flex-item">5</div>
+ k' ^# T9 z% Z <div id="6" class="flex-item">6</div>
; p( K) P: ~3 W x' I <div id="7" class="flex-item">7</div>+ _' V8 C) h& D
<div id="8" class="flex-item">8</div># h/ M( e6 {% d2 l& Z
</div></div>- T) H" _. W& g* R
</div>
1 E% h7 g6 G$ ~# j0 q3 o5 f: Q2 d3 n3 K8 j3 p3 Z) g3 N
4 m6 W% {0 o! }' e( Y& q; b- w7 A# G# \
</body>
8 j: A: ^9 z9 i9 T</html>
; C W: w* w' h7 Y1 I5 f1 A |
|
发表于 2021-1-22 20:43:42
楼主