核心的右侧图片区
三张图片上下排列,平分高度
右侧悬浮 section id="suspension"
上面妲己和无序列表,五个li分别对应五项
宽260高494,引入图片,图片不重复,固定定位,优先级10 z-index: 10; ,
顶部50%,距顶部-100px,居右right: 0;
妲己:宽165高145,引入图片,图片不重复,给绝对定位,顶部30,左边25
无序列表content:
宽118高145,绝对定位,顶部150px,左边25px
li:宽118高132,引入图片,下外边距2px,去掉列表风格
通过LI给他五个节点去做偏移就好了。
用节点,li下面第一个元素:li:nth-child(1)
内边距距顶部2px,右边132px,图片偏移background-position: -243px 0px;
li下面第一个元素的图片:
转换为块级元素,居中对齐margin: 0 auto;
第二个元素li:nth-child(2):
高39,图片偏移background-position: -243px -133px;
第三四五元素同上,改图片偏移量即可
我其实用了另一种方式去写