principle: Block-level elements want to be centered horizontally and vertically on the page: first to position the element (absolute positioning), then horizontally: left=50%,margin-left=-(1/2*width)Vertical Orientation Page Center: top=50%,margin-top=-(1/2*height)The code is as follows:<Divclass="Footer_top">
<Divclass="Footer_slogen">
<spanclass="One"><imgsrc="Images/slogen1.png"alt=""/></span>
<spanclass="both"><imgsrc="Images/slogen2.png"alt=""/></span>
<spanclass="three"><imgsrc="Images/slogen3.png"alt=""/></span>
<spanclass="Four"><imgsrc="Images/slogen4.png"alt=""/></span>
</Div>
<Divclass="Footer_product"></Div>
</Div>.Footer_top{
position:relative;
}
.Footer_slogenspan{
position:Absolute;
Left: -%;
}
.Footer_slogen. One{
Margin-left: -605px;
}
.Footer_slogen. Both{
Margin-left: -294px;
}
.Footer_slogen.three{
Margin-left:0px;
}
.Footer_slogen. Four{
Margin-left: thepx;}Note: (1), after absolute positioning, does not give the LRTB value, the default will be in the original standard flow position display.
(2), the level of four graphs are stacked together as one（only relative positioning and absolute positioning and solid-state positioning elements have a hierarchical concept, and floating and standard flows are not hierarchical, if several adjacent elements are positioned in the same position the elements in the back are pressed against the front elements, but the Z-index are 0 .) (3), in percent positioning, no use of margin-right
Multiple block-level elements occupy a horizontal position, and when the window becomes larger and smaller, four pictures still move with it, showing the effect of the response style.
