|
|
本帖最后由 喬治兄 于 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>
|
|
发表于 2021-1-22 20:43:42
楼主