Question

这是一个相对较小的项目，我一直在努力，但它让我疯了......

我试图将我的原始网站（完全使用Dreamweaver，HTML完成）移植到Visual Studio 2013 ASP.NET项目中，在那里我可以为作业添加数据库，登录等等有

我遇到的主要问题是我的CSS代码不想做我在布局方面做的事情。

我尝试过一步一步完全重建网站，确保每个方面都能正常运行，然后继续下一个。

这是我原来的网站： http://i.stack.imgur.com/sxfeg.png

（原始HTML + CSS）https://gist.github.com/anonymous/7ed94218f9374d41918e

现在，为了获得此设计，我使用了很长一段时间的模板，并且我已经尝试了解哪些CSS代码会影响布局并找到标记main_container（HTML的第13行）要点）控制网站的白色背景。

因此，如果删除标记，则会发生这种情况：http://i.stack.imgur.com/BFNLE.png

^这对我的问题很重要。

在我的网站上移植时，我正确地复制了所有代码并将其改编为ASP。（见要点：https://gist.github.com/anonymous/9c09befeb8950f4c1416）

但是，在这样做时，我遇到了main_container的CSS代码未正确使用的问题。

#main_container{
    width:977px;
    background:url(center_bg_repeat.gif) repeat-y center;

图像没有像在原始网站上那样在y轴上重复，结果如下：http://i.stack.imgur.com/E4TZU.png

我的语法错了吗？或者我的代码有什么问题？
我已将所有图片放在与CSS文件相同的文件夹中便利性。
这是Visual Studio 2013的问题还是我正在做的事情从根本上说错了？
是否有另一种方法可以在没有的情况下移植相同的设计造成这么多问题？

Answer 1

我并不完全清楚你想要实现什么，但如果它与原始网站的布局相同，那么最好先复制html和css以使其正常工作然后再看看重组或重构代码。例如，检查所有元素大小调整是否相同，以便按预期显示内容。

原始代码和新代码之间存在一些可能会影响新版网站行为的主要差异。在您的原始CSS中，您没有center_bg_repeat.gif的重复样式。此外，您的原始代码中似乎没有引用#main_container。

重复背景图片不会导致内容在整个页面上重复出现。您已经在新的html中包含了内容，因此您只需要使用定位（例如浮点数与相对/绝对定位）来按照您想要的方式布置图块（请参阅代码段）。

＆＃13;

html, body, .container
{
    height: 100%; 
    min-height: 100%;
}

.tile {
    float: left;
    width: 20%;
    height: 30%;
    margin: 10px;
    padding: 20px;
    background-color: #ccc;
}

＆＃13;

<div class="container">
  <div class="tile">first</div>
  <div class="tile">third</div>
  <div class="tile">second</div>
  <div class="tile">fourth</div>
  <div class="tile">last</div>
</div>

＆＃13;

在您的情况下，如果您希望缩放#main_container以适合内容，请将其样式设置为min-height: 100%;

显示在y轴上重复的背景图像？

1 个答案: