锚点链接

<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时，子元素会自动换行，以适应空间。这样可以保证子元素在容器内自动换行，而不会超出容器的范围。