TA的每日心情 | 开心 2018-8-8 03:13 |
---|
签到天数: 1 天 [LV.1]初来乍到
|
本帖最后由 喬治兄 于 2021-1-22 23:33 编辑
1 L1 U; [* S" k5 z# H8 @! H$ N5 D, a5 O# X9 S) h2 h- k
請賜教 css & html( k `8 U9 x. e v5 @, q
& {7 D- t3 ~1 s- ^https://www.w3schools.com/code/tryit.asp?filename=GIH4P74ZQBJ7
. |( V3 @! @; W' l
4 ^( o3 t5 g! l- M, P請賜教想要當按兩邊的 zone 1~zone 8 區域時是否能再返回到最上面的導航那列
3 ?7 t+ u/ f3 F' N0 |" m" u! N/ P) M( C1 J+ v8 i
<a href="#1">zone 1</a> , <a href="#2">zone 2</a> , <a href="#3">zone 3</a> , <a href="#4">zone 4</a> , 4 W3 Z M* C& z4 J. g! A
<a href="#5">zone 5</a> , <a href="#6">zone 6</a> , <a href="#7">zone 7</a> , <a href="#8">zone 8</a>
# y; u% a' V6 g0 s8 R( s, x..........這個區域且配合 hightlight 1 K5 b6 H9 e& d7 [, R( D
# r2 o2 P* p3 A2 B/ l
Thanks a lot
- v- L/ b# S( z9 s9 {8 H- K! E
9 D# i( c+ {7 Q r$ ]7 U
$ H4 i9 {- w4 N* A( E6 ~0 V/ Y9 [
/ f1 l& p( N! B& b0 s) ~& E
( e. v' M! C& x<!DOCTYPE html>
# f0 r6 n0 u: i/ l" C: M5 s<html>
" G; L# v: P4 f! J& c<head># Z* L! o* p; A( t8 h i- D9 K
<style>
+ Z* R9 X" m# ], J# k#main {
3 j& F2 o' e5 q( S r width: max-width;
# h* R1 b0 C# ] height: 100vw;
/ |5 P) |- w8 q border: 1px solid #c3c3c3;
% x5 L& \8 N2 r9 X8 P display: flex;& q+ y- s% l7 B) l: P& {
flex-wrap: nowrap; Z% w0 j. I/ o* W) R& Z: @4 b2 G+ Y
9 ?# o' r W7 Y7 |9 ~% k5 o5 ~}4 M# K2 l# B( ?7 p, D
% v j9 F, _5 E! Z+ ~
#main div {
/ V1 Q1 z( |, r9 T center8 V3 O* Z. c2 b& _# Z
height: 100vw;) B# {( [4 Z. w3 B
text-align: center;( o2 \% f, y, f( ]- H, R
flex-grow: 1;8 ~6 o# m5 U, b. V
flex-shrink: 1;
0 J' C) f2 i& x( R/ B# Y2 I}# N& r, n' q h4 x8 i; A
.flex-container {
% e y) p* ~( n) L$ m8 Y* }$ Y7 H display: -webkit-flex;# M: h9 O0 w& b+ h* j: I
display: flex;
" O( t! d6 R4 P3 v5 N -webkit-flex-direction: column;
; ~6 H/ w& s3 G) M flex-direction: column;3 v, g' w, ]7 t
width: max-width;
% R# S/ _* Q# E7 T, I7 Q$ A) | height: 100vw;
! P: Z. S+ `7 M, _' l& E background-color: lightgrey;
8 b' j! m1 Q4 S( E7 l/ s+ ~ - V' |. \1 {0 @: K9 }$ j: w2 V1 X: V
}) T& ?% C$ Y$ I0 o U
) k6 u) i( X+ Y$ U
.flex-item {
4 P: \( z- \( C2 r7 D width: 1.5vw;
2 M l6 b8 L p& l5 ` height: 25vw;
% i( c8 L7 A' s3 W9 d D, Q text-align: center;
: y: U k" b! Z% d' j, V line-height: 25vw;
& Q2 H5 e: L! o' p0 } font-size: 1.5vw;
~" Y/ ?6 S# X! g' S- k background-color: white;
) a/ A0 Q. ]) p" I; k }
4 S/ C/ M, _8 |( G+ _9 @% n! v! Y4 _, a. v' `, s5 z
, s9 T% Y9 Z; c9 B6 s; R:target {* X. x' X3 o+ ^( f
border: .5px solid #D4D4D4;& C) w2 w$ E1 ]
border-color: black;$ J& y7 {& u% p: B5 a
background-color: yellow;
6 R/ k! b9 I5 I9 e' f- h; T$ o1 C}
" S9 M4 L8 r: O1 Y- Z</style>
7 E+ w3 C0 R* S9 f) c9 ?</head>' ^! M w. W& D$ [ [
<body># C+ J& w, C. z9 n9 V6 J5 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> ,
( L9 @) G: @$ |' a<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/ X0 {1 f( i5 r4 {<div id="main">' I0 Y& R. s0 w7 }& w1 ]4 @1 ^" Z6 b
<div style="background-color:lightgrey;width:1.5w;"><div class="flex-container">
6 C* Z- n* }& J8 \% \# c1 L <div id="1" class="flex-item">1</div>
$ R, i2 z7 P) R7 _/ x- g( e, j <div id="2" class="flex-item">2</div>
0 `! c$ [8 z% Y( p: W <div id="3" class="flex-item">3</div>
; r2 r1 v. _! {3 e <div id="4" class="flex-item">4</div>0 d; m& \( v" |
</div></div>; ~) e- _: P7 s2 Z% o
<div style="background-color:lightblue;width:93vw;">B</div>- {0 z7 s t; Y) s' q. i
<div style="background-color:lightgrey;width:1.5vw;"><div class="flex-container">
$ ^! w! [- L3 p <div id="5" class="flex-item">5</div>4 F/ T+ {8 C7 C, X
<div id="6" class="flex-item">6</div>
! L) D% P; v/ ~3 X2 R* X3 ` <div id="7" class="flex-item">7</div>
+ e, G. K* p4 `% F) p <div id="8" class="flex-item">8</div>/ h+ \; ^& ]3 ]- c! }
</div></div>5 P* b; C8 o. E8 B2 o) y: r5 h7 F
</div>/ p! }( y* Q8 O# J4 R9 J
* O: B/ ^! n5 W S+ {) |
: V8 V) m3 w3 [7 u2 z5 j</body>
# B! U, D" M. l; r2 i8 b4 L</html>2 Q- n# {% {* @% W
|
|