0

我已经上传了网站 mrandmrsmagic.com，虽然它在最大化时看起来很好，但最小化时只显示了一半（我拿走了滚动条，因为它在最大化时会显示，所以它可能有一些松散的东西。 ）。网站本身，自从我在 Photoshop 中对它们进行切片以来，我使用了 5 个不同的背景图像（自从我从头开始构建网站已经有一段时间了，所以编码可能非常混乱。）下面是我用于的 5 个 div 的 css身体。

#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 个类标签。那可能吗？任何和所有的帮助表示赞赏，谢谢。

4

2 回答 2

0

嗯，有很多东西要学习建立网站。所以首先，这是一个很好的努力。您的问题是您已通过像素的绝对值定位所有内容，因此无论屏幕尺寸如何，左侧总会有一个边距。而不是通过你可以做得更好的一切来说服你，我会给你这个。

jsFiddle

它的布局与您的一样，但简单且中间对齐。它更小，因此您可以在示例中看到它。我会鼓励你玩，打破和修复它，以了解不同的属性如何影响布局。还可以查找有关 HTML 和 CSS 的教程。

于 2012-09-20T16:34:08.607 回答
0

将这些图像作为 s 的背景并没有使您受益<div>，而且您可能会通过使用定位来加剧这种麻烦。无需为您重新编码整个事情，这是一个“更好”的方法：

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>
于 2012-09-20T16:43:38.190 回答