学成在线案例
导航栏注意点:
实际开发中,我们不会直接用链接a而是用li包含的做法
无序列表dl dt dd
写了2个晚上终于把这个写完了
将盒子定在某一个位置,所以定位是在摆盒子,按照定位的方式移动盒子
定位=定位模式+边偏移
通过CSS中的position值来设定
值 | 语义 |
---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
边偏移属性 | 示例 | 描述 |
---|---|---|
top | top:80px | 顶端偏移量,定位元素相对于其父元素上边线的距离 |
bottom | bottom:80px | 底部偏移量,定位元素相对于其父元素下边线的距离 |
left | left:80px | 左部偏移量,定位元素相对于其父元素左边线的距离 |
right | right:80px | 右部偏移量,定位元素相对于其父元素右边线的距离 |
是元素在移动位置的时候,相对于原来的位置来说的
选择器{position:relative;}
在移动的时候,相对于它的祖先元素来说的
选择器{position:absolute;}
三个特点:
父元素加相对定位,子元素加绝对定位
父盒子不加定位的话,子元素的定位将由浏览器的页面为准
固定在浏览器的可视区域,与父元素无关
position:fixed;
固定到版心
margin-left:版心宽度的一半;
滑到某个位置时,盒子固定
position:sticky;
top:10px;
特点:
通过z-index的值来确定哪个靠上面
数值越大,盒子越靠上,可正可负
{z-index:2;}
加了绝对定位的盒子不能通过margin来居中
水平
垂直
特性