Question

我已经上传了网站mrandmrsmagic.com，虽然看起来没什么最大化，最小化只显示了一半（我带走了滚动条，因为它显示了它最大化所以也许有松散的东西关于它。）。网站本身，我使用了5个不同的背景图像，因为我在Photoshop中将它们切片（因为我从头开始构建一个网站，所以编码可能非常混乱。）下面是我用于体。

#body {
width: 1024px;
height: 583px;
marin: 0;
padding: 0;
position: relative;
left: 448px;
top: -128px;
background: url(../images/body_02.jpg) no-repeat left top;
}

#body2 {
width: 1024px;
height: 583px;
position: relative;
left: 448px;
top: -128px;
background: url(../images/body2_02.jpg) no-repeat left top;
}

#body3 {
width: 1024px;
height: 583px;
position: relative;
left: 448px;
top: -128px;
background: url(../images/body3_02.jpg) no-repeat left top;
}

#body4 {
width: 1024px;
height: 583px;
position: relative;
left: 448px;
top: -128px;
background: url(../images/body4_02.jpg) no-repeat left top;
}

#body5 {
width: 1024px;
height: 583px;
position: relative;
left: 448px;
top: -128px;
background: url(../images/body5_02.jpg)  no-repeat left top;
}

#body6 {
width: 1024px;
height: 583px;
position: relative;
left: 448px;
top: -128px;
background: url(../images/body6_02.jpg)
}

我试图取消高度并将宽度设置为100％，但之后它没有得到补救而且几乎使它变得更糟。那么有没有办法转换css，我可以保留5个div？也许我应该只创建一个初始div标签，然后为主体制作5个类标签。这可能吗？感谢任何和所有帮助。

Answer 1

嗯，要学习建立网站还有很多东西。所以首先，它是一个很好的努力。您的问题是您已经按照像素的绝对值定位了所有内容，因此无论屏幕大小如何，左侧都会有一个边距。而不是通过eveything告诉你，你可以做得更好，我会给你这个。

jsFiddle

它的布局就像你的一样，但简单和中间对齐。它较小，所以你可以在例子中看到它。我会鼓励你玩，打破并修复它，以了解不同的属性如何影响布局。还要查找有关HTML和CSS的教程。

Answer 2

你根本不会从那些<div> s的背景图片中获益，而你可能通过使用定位来弥补这个问题。如果不为你重新编写整个内容，这里有一个“更好”的方法：

CSS

<style>
    /* Make your main components all the same width, and center them within <body>. Their heights will expand as needed */
    #header, #cssmenu, #content { width:1024px; margin:0 auto }
    #cssmenu { ... } /* Looks like what you have will work fine */
    /* #body1/2/3/4....not needed */
</style>

HTML

<body>
    <div id="header">...</div>
    <div id="cssmenu">...</div>
    <!-- img elements exist for a reason :-) don't be scared -->
    <div id="content"><img src="body2.jpg"></div>
</body>

屏幕大小调整以适应分辨率

2 个答案: