請賜教 css & html

喬治兄 · 发表于 2021-1-22 20:43:42

本帖最后由喬治兄于 2021-1-22 23:33 编辑

請賜教 css & html

https://www.w3schools.com/code/tryit.asp?filename=GIH4P74ZQBJ7

請賜教想要當按兩邊的 zone 1~zone 8 區域時是否能再返回到最上面的導航那列

<a href="#1">zone 1</a> , <a href="#2">zone 2</a> , <a href="#3">zone 3</a> , <a href="#4">zone 4</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>
..........這個區域且配合 hightlight

Thanks a lot

<!DOCTYPE html>
<html>
<head>
<style>
#main {
  width: max-width;
  height: 100vw;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: nowrap;

}

#main div {
  center
  height: 100vw;
  text-align: center;
  flex-grow: 1;
  flex-shrink: 1;
}
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  width:  max-width;
  height: 100vw;
  background-color: lightgrey;

}

.flex-item {
  width: 1.5vw;
  height: 25vw;
  text-align: center;
  line-height: 25vw;
  font-size: 1.5vw;
  background-color: white;
  }

:target {
  border: .5px solid #D4D4D4;
  border-color: black;
  background-color: yellow;
}
</style>
</head>
<body>
<a href="#1">zone 1</a> , <a href="#2">zone 2</a> , <a href="#3">zone 3</a> , <a href="#4">zone 4</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>
<div id="main">
  <div style="background-color:lightgrey;width:1.5w;"><div class="flex-container">
  <div id="1" class="flex-item">1</div>
  <div id="2" class="flex-item">2</div>
  <div id="3" class="flex-item">3</div>
  <div id="4" class="flex-item">4</div>
</div></div>
  <div style="background-color:lightblue;width:93vw;">B</div>
  <div style="background-color:lightgrey;width:1.5vw;"><div class="flex-container">
  <div id="5" class="flex-item">5</div>
  <div id="6" class="flex-item">6</div>
  <div id="7" class="flex-item">7</div>
  <div id="8" class="flex-item">8</div>
</div></div>
</div>

</body>
</html>

Mandolin · 发表于 2021-1-23 11:38:34

嘿嘿，乔治兄这个想法不错

喬治兄 · 发表于 2021-1-23 11:47:14

Mandolin 发表于 2021-1-23 11:38
0 x: T: a- L5 s0 f1 P嘿嘿，乔治兄这个想法不错

Mandolin 兄，可有點擊兩邊時能返回最上面的方法.....找了很久沒，不知有何方法可以處理

Mandolin · 发表于 2021-1-24 20:40:08

喬治兄发表于 2021-1-23 11:47
! U" v, X( i& d+ Z2 uMandolin 兄，可有點擊兩邊時能返回最上面的方法.....找了很久沒，不知有何方法可以處理 ...

我也不是很懂。不知加个锚点能行不：

顶部（紧接<body>后）加代码【<a name="top"></a>】，每个 zone 区内（即标签<div id="...></div>内）加【<a href="entry://#top">back top</a>】

		自动登录	找回密码
密码			免费注册

[求助] 請賜教 css & html