錨點鏈接 <a href="#Cat"></a> 點擊這個鏈接將為跳轉到這個頁面上id為Cat的頁面 利用這個功能，我們可以實現給一個頁面插眼的功能。 比如我們想建一個動物園的網站 <!-- 動物園導航欄--> <header> <ul> <li><a href="cat">Cats</a></li ...
錨點鏈接
<a href="#Cat"></a>
點擊這個鏈接將為跳轉到這個頁面上id為Cat的頁面
利用這個功能，我們可以實現給一個頁面插眼的功能。
比如我們想建一個動物園的網站
<!-- 動物園導航欄-->
<header>
<ul>
<li><a href="cat">Cats</a></li>
<li><a href="dog">Dogs</a></li>
<li><a href="fish">Fish</a></li>
<li><a href="panda">Pandas</a></li>
</ul>
</header>
<main id="zoo">
<section><h2 id="cat">Cats</h2></section>
<section><h2 id="dog">Dogs</h2></section>
<section><h2 id="fish">Fish</h2></section>
<section><h2 id="panda">Pandas</h2></section>
</main>
無下劃線
a{
text-decoration:none;
}
這個css樣式規則常用於a標簽，作用是除去a標簽的下劃線。
除這個方式外，還有
法二：
<a class=".no-underline">xxx</a>
.no-underline {
text-decoration: none;
}
還可以
法三：
<a href="your-link.html" class="no-underline">這是一個沒有下劃線的鏈接</a>
滑鼠指針懸停效果
li:hover{
background-color:#dfdfe2;
color:#1b1b32;
cursor:pointer;
}
cursor:pointer; 滑鼠放在元素上，指針變成小手。
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
justify-content:space-between;
align-items:center;
position:fixed;
top:0;
}
頁面中位置固定
position: fixed;
top: 0;
flex佈局
display: flex;
justify-content:space-between;
align-items:center;
Flex佈局是一種基於容器的佈局方式，用於對容器內的元素進行排版
display: flex;
- 這行設置了元素的顯示方式為
flex，意味著這個元素現在是一個flex容器，其子元素將遵循flex佈局模型。
justify-content: space-between;
- 這行設置flex容器中的子元素在主軸（預設是水平方向）上的分佈方式。
space-between意味著子元素之間的間隔會平均分佈，第一個子元素將靠近容器的開始位置，最後一個子元素將靠近容器的結束位置。
align-items: center;
- 這行設置flex容器中的子元素在交叉軸（預設是垂直方向）上的對齊方式。
center意味著子元素會在交叉軸上居中對齊。
flex-wrap: wrap;
flex-wrap 用於定義彈性盒子（flexbox）容器的子元素在容器內排列時是否換行。
- 作用：當子元素在容器內排列時，設置子元素是否允許換行。
- 解釋：如果容器的空間不足以容納所有子元素時，當flex-wrap屬性的值為wrap時，子元素會自動換行，以適應空間。這樣可以保證子元素在容器內自動換行，而不會超出容器的範圍。
