页面布局问题/设计问题

Question

我有一个想要显示的页面

• 屏幕上边框的菜单栏，用于整个宽度：
• 与页面中间并沿屏幕左边框对齐的图像，
• 一个 div 框（中间对齐的文本）位于屏幕的中心，另一个图像（与第一个相同的尺寸）位于屏幕的右边框 - 这称为 mainBlock
• 带有徽标的白色条带位于屏幕底部边框的中心。

如何设置 div 和位置以使其正常工作？如果我使用绝对定位，那么在调整页面大小时它会搞砸。我现在的代码是

<div style="position:absolute;top:0px;left:0px;width:100%;height:45px;background-color:black;color:white;text-align:center;vertical-align:middle;display:block;line-height:45px;">
    <font size="+2">About | Sign Up | Sign In</font>
</div>

<div style="position:absolute;top:80px;left:10px;width:4em;opacity:0.8;filter:alpha(opacity=80);background-color:white">
    <img src="img/bk.png" id="bkArrow">
</div>

<div id="mainBlock" style="position:absolute;top:80px;left:35px;opacity:0.8;filter:alpha(opacity=80);background-color:white;border-style:solid;border-width:2px;border-radius:4px;vertical-align:middle;border-color:green;">
    Main area for my content
</div>

<div style="position:absolute;top:80px;right:10px;width:4em;opacity:0.8;filter:alpha(opacity=80);background-color:white" >
    <img src="img/fw.png" id="fwArrow">
</div>

<div style="position:absolute;left:0px;bottom:0px;background-color:white;width:100%;" align=center>
    <img src="img/logo.png">
</div>

Answer 1

当然你的问题不是很清楚，但从我的结论来看，你必须使用包装器来绑定所有这些 div，你可以尝试以下（调整窗口大小）：

<div id="wrapper" style="width:100%; height:100%;" >
<div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 15%;
background-color: black; color: white; text-align: center; vertical-align: middle; display: block; line-height: 45px;">
<font size="+2">About | Sign Up | Sign In</font>
</div>

<div style="position: absolute; top: 15%; left: 0px; width: 10%; opacity: 0.8; filter: alpha(opacity=80); background-color: #FFFFFF; height: 75%;">
<img src="img/bk.png" id="bkArrow">
</div>

<div id="mainBlock" style="position:absolute;top:15%;left:10%; height:75%; width:80%;opacity:0.8;filter:alpha(opacity=80);background-color:white;border-style:inset;border-width:2px;border-radius:4px;vertical-align:middle;border-color:green;">
Main area for my content</div>
<div style="position: absolute; top: 15%; right: 0px; width: 10%; opacity: 0.8; filter: alpha(opacity=80); background-color: #FFFFFF; height: 75%;" >
<img src="img/fw.png" id="fwArrow"></div>

<div id="footer" style="position: absolute; left: 0px; bottom: 0px; background-color: white; width: 100%; height: 10%;" align=center>
<img src="img/logo.png"></div>
</div>