2024.4.15学习记录

  • 2024.4.15学习记录已关闭评论
  • 43 次浏览
  • A+
所属分类:Web前端
摘要

点击这个链接将为跳转到这个页面上id为Cat的页面
利用这个功能,我们可以实现给一个页面插眼的功能。
比如我们想建一个动物园的网站


锚点链接

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