TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
本帖最后由 喬治兄 于 2021-1-22 23:33 编辑
2 m W& d. g6 o: ]
" ^* Y+ b7 G1 S. o1 Q' S請賜教 css & html
8 g4 l5 |- H7 e- W* Q: M2 {0 t# }# G7 i" x$ Y
https://www.w3schools.com/code/tryit.asp?filename=GIH4P74ZQBJ7. K- O, z5 z2 a) M/ d8 a
) k# M6 c$ R2 W! E* U
請賜教想要當按兩邊的 zone 1~zone 8 區域時是否能再返回到最上面的導航那列+ [! D2 U. h: l- v6 D; w
+ k1 w- _1 Z$ v* V$ L
<a href="#1">zone 1</a> , <a href="#2">zone 2</a> , <a href="#3">zone 3</a> , <a href="#4">zone 4</a> , * j* F7 Y4 G9 J1 ?
<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 A, m }* [, ` P% D
..........這個區域且配合 hightlight
+ _6 t- E7 l4 U, B [/ j/ W; Z
4 t) |$ j3 P! h% d6 g! ]9 u) NThanks a lot
: i$ }, m" k! G% L4 F$ f2 [7 v7 R8 d+ u% I, e: k" W6 C* Z
: Y& H' p: f! N7 p- p8 E. t
Y0 Q0 h u; H# R. U% e& a, g) |. V1 A6 F$ q0 X
4 T) k/ ~3 c5 |% M9 L$ E3 Z<!DOCTYPE html>9 d, u% C2 e( f1 v3 c9 f
<html>2 r# s5 v; ]# d/ G. u! H f: r
<head>
! m) @4 R) K J. Q, ^<style> $ g1 T: [; A- h/ _9 G% t6 C9 g( y/ Q
#main {
! z' g' [$ q( Q: a: _& e! p width: max-width;2 X& X. o' N% J( [
height: 100vw;
9 T. y' i: b; N+ W* O/ Z0 f; J border: 1px solid #c3c3c3;) R; P, P- ^/ a+ ?$ n
display: flex;
; f5 ^! [, H7 V, V3 I flex-wrap: nowrap;" ]; v2 z, E" D0 r
. W+ A/ K' I$ P- e/ z% F$ z/ a
}7 i+ A' J) _! O! d$ H- B: i3 S: F/ p
) I, F9 g, K+ z5 x
#main div {3 @$ |% \0 T1 P1 ?& \: Q
center# \6 V, Z1 l g4 L1 d
height: 100vw;
) [) w4 g, `, X$ @8 @4 a/ _ text-align: center;* O: X x$ O$ {% B0 f3 l
flex-grow: 1;' I& D, G! t+ N' c+ b
flex-shrink: 1;1 h: u- |8 m5 A! M& @) ~! [3 T' E9 y
}
2 U4 M; n/ q6 `" G- [' c.flex-container {
9 j" _7 j2 M6 W: D7 N4 V display: -webkit-flex;# j5 Z" z/ d- l
display: flex;7 |1 Q" V% v5 w) \* A9 s. b
-webkit-flex-direction: column;6 w; E0 s* y, z6 Q# l) H( }0 p
flex-direction: column;
6 }; `% V, U' R# g- T" Z width: max-width;
) q2 ^0 T5 H. X5 p height: 100vw;* v K" L G8 ~$ b
background-color: lightgrey;
2 n6 k( ]0 Y+ ^- e" f' ~( [4 B/ j ; J* Z7 t: j C8 ^6 L6 t
}1 p( G+ _. x: d; L. d( P
% ~7 k1 [. A. R9 r& c3 Y4 }, C1 D
.flex-item {6 ` `( L9 A0 F) B5 x# m
width: 1.5vw;" k$ n' C/ G* y/ ?) W
height: 25vw;+ H/ g/ |# r/ a, y
text-align: center;
# ^' @4 U" o1 [3 v, i, ~ line-height: 25vw;
$ V2 q) B* Y1 H6 M font-size: 1.5vw;
/ a' {& B! |2 }& F background-color: white;
1 d) y& E6 d7 K' _+ `0 T. q }
2 F2 m/ C# D* c" E5 i
* E& R1 p! s) t% D0 L! K
& g5 L, d9 u/ g5 G- a* e g:target {
. P; P) V+ ?& K5 c border: .5px solid #D4D4D4;3 O3 y2 x" K0 H! V; F' h7 A
border-color: black;; U# v, P! b- a2 p# `" a
background-color: yellow;" c1 g* j8 ?! y: @
}7 t; q% N, M: W: `
</style>2 Z, b* A6 K6 q' T) W2 i
</head>' N2 v( g" E2 a+ W; J( k
<body>
$ ^6 {2 P+ {; v( E2 q2 C- O<a href="#1">zone 1</a> , <a href="#2">zone 2</a> , <a href="#3">zone 3</a> , <a href="#4">zone 4</a> ,
9 P7 V- Z: _2 d# M- h% P<a href="#5">zone 5</a> , <a href="#6">zone 6</a> , <a href="#7">zone 7</a> , <a href="#8">zone 8</a>+ ^) M+ k, P% F/ _/ e
<div id="main">
/ f9 T: M. Z8 Y4 P9 U9 Z <div style="background-color:lightgrey;width:1.5w;"><div class="flex-container">
; X9 L* V# ?7 E8 n6 Y, \ <div id="1" class="flex-item">1</div># c( V5 l/ D0 A! Y/ @" N' F
<div id="2" class="flex-item">2</div>
: m" x) J, ]6 `) ]. D9 W <div id="3" class="flex-item">3</div>/ Q9 B: S/ K O
<div id="4" class="flex-item">4</div>8 x6 C# w1 x; a) k Q
</div></div>
7 ?/ f; X' W( j+ f% H <div style="background-color:lightblue;width:93vw;">B</div>* c! ?/ E. }; h
<div style="background-color:lightgrey;width:1.5vw;"><div class="flex-container">
" G/ d9 D2 q2 X5 [! ^ <div id="5" class="flex-item">5</div>
" K8 [$ H0 s; d <div id="6" class="flex-item">6</div>
. E1 Z% Q1 j2 b9 O <div id="7" class="flex-item">7</div>
( I8 Q3 n8 \8 x: p; F C <div id="8" class="flex-item">8</div>. p* J8 c9 l, U) Q
</div></div>2 v9 M9 f$ U" F8 }# A9 j8 {( u8 o$ h
</div>
; d" ]# h. C8 j1 b. S" p/ L' m. _0 B v$ _
* E: C/ ]6 Q2 v8 A3 l* W6 T</body>1 t( O7 |" H" G+ K# S) [! }
</html>. q0 A. e3 j: c! Q
|
|
发表于 2021-1-22 20:43:42
楼主