:hover的延申
- a:hover 鼠标悬停时链接的变化 鼠标悬停时内容的隐藏与显示
选择器:hover要显示的元素【必须在选择器里面】{} a 标签可以切换为其他的选择器
兄弟选择器:
P+a:相邻的紧挨着的下一个元素。
p~a:后面的所有的元素。
1.固定定位:
语法:position:fixed+边偏移量【left/top/right/bottom】才能让元素达到自己想要的位置
应用:参考小小千
实现效果:div或者某些元素固定在页面的某个位置
部分代码:
效果显示:
2.粘性定位:
语法:positio:sticky
应用:参考工商银行导航栏
实现效果:如果前面有定位,并且元素有高度,那么他会滑过元素高度之后再执行固定定位,如果前面元素没有或者元素的高度之和小于top后面的属性,它直接开始固定定位
部分代码:
效果显示:
3.绝对定位
语法:position:absolute
应用:参考侧边导航栏
实现效果:注意点
如果父级元素有定位,则根据父级元素进行移动,如果父级元素没有定位,则逐级往上找有定位的元素,找到之后按照这个元素的位置开始定位,如果没有找到则根据浏览器窗口进行定位。
部分代码:
效果显示:
4.相对定位:
语法:position:relative
应用:参考侧边导航栏
注意点:根据自身的位置进行移动。
部分代码:
效果显示:
练习一:小小千
练习二:侧拉列表
部分代码:
效果显示: