可以看到页面左右两个箭头和下面的导航栏框 可以想到用定位设计 让这部分在包含图片的大盒子里占有固定位置 根据子绝父相原则 让父盒子设为相对定位(相对于他原来的位置定位 原来的位置继续占有) 让三个子盒子设为绝对定位即可

这里有两个重要的点

1.绝对定位盒子垂直居中算法:先到页面50%处 再回退到小盒子对应像素的一半

2.加了绝对定位的盒子可以直接设置高度和宽度 不需要进行display转换

这用来设置圆角 让其为height一半即可

这里用到了flex布局 我们在下一次文章进行讨论 这种布局方式十分简洁有效

这里第一部分是画了5个白点 border-radius:50%将其变为圆

第二部分将指定白点变为橙色 使用了nth-child(直接选子元素) 和 nth-of-type(选择指定的标签类型的子元素) 两个结构伪类选择器