Css PSD到HTML不知何故起作用，但实际上不起作用。我是个新手

我是个新手，不擅长HTML和CSS

我决定做一个项目，将PSD转换成HTML和CSS。 该文件是900 x 600个图像，其中有许多层和元素，一个在另一个之上

我看了一些关于这是如何发生的教程，但从来没有发现过一个有如此复杂图像的教程

为了完成这项任务，我一直使用括号和实时预览。当我差不多完成的时候，我决定在一些浏览器中运行HTML文件，结果都是一样的——糟糕透了

我的问题是：

怎么可能用Chrome Live预览括号来指导我自己，一切都很好，但当我在IE、Chrome和Safari中打开文件时，情况非常糟糕

使用这种非常简单的方法来编写HTML和CSS，是我错了还是非常愚蠢

我的HTML是这样的，每个div都是自己的，每个div都是平等的：

现在，一切都在正确的位置，但只在括号内实时预览。在整个CSS中，我只使用position:absolute。我还认为错误就在这个位置：绝对的

我怎样才能解决这个问题？我错在哪里？我做错了什么

以下是PSD中的一个片段：

怎么可能用Chrome Live预览括号来指导我自己，一切都很好，但当我在IE、Chrome和Safari中打开文件时，情况非常糟糕

我认为你应该打开PSD，并使用切片工具。

你可以按照你想要的任何方式对图像进行切片-例如，如果你想要一个web表单，就像我在你的屏幕截图中看到的那样，在PSD中对图像的该部分进行切片

完成切片后，您可以将文件另存为网页，并从此处继续前进

使用这种非常简单的方法来编写HTML和CSS，是我错了还是非常愚蠢

---

你不一定是错的，但我要说的是，这几乎是一种标准的做事方式。至少现在不会了。正如DA在评论中所说的那样，PSD现在通常只作为粗略的指南使用，以创建完全使用HTML/CSS/JAVA/等的包装和网站。

这真的不可能回答。一个人应该如何编写HTML取决于偏好和上下文。总的来说，我会说，绝对定位所有东西通常不是一个好的解决方案，因为它对于不同的浏览器和设备来说相当不灵活。如今，大多数人不喜欢直接将PSD转换为HTML，而只是将PSD文件用作“粗略指南”和HTML的最终设计。请提供PSD的屏幕截图。然后我就会知道你想要完成什么。您正在将图像放入div标记中？为什么？您可以定位这些元素，而无需将它们包装在div中。但同样，我不知道最终结果，所以我无法回答。如果你正在尝试学习无表网页设计，请查看我的个人作品集并查看网站。我添加了PSD中的片段。我现在知道PSD文件不像以前那样使用，但我有这个任务，我必须完成它。我已经用透明背景对所有图像进行了切片，所有的图像都进行了很好的切片。主要的问题是定位它们，因为老实说，我不知道正确的方法，但我找到了一些方法，显然是不好的。好的-现在使用Photoshop中的Save for web选项来生成HTML和CSS。也许可以看看这个家伙的答案来获得更多的帮助：我如何从网上保存生成HTML和CSS？我所有的图像都是png格式，背景是透明的。我已经用Save for web保存了图像。主要的问题是我写的HTML和CSS，可能是我在定位元素时的错误。Save for web应该会自动为您生成HTML和CSS文件，以及一个包含您的片段的图像文件夹。

<div id="woman">
<img src="/images/woman.png" alt="woman">
</div>

<div id="bgr-small">
<img src="images/bgr-small.png" alt="Beach">
</div>

<div id="lights" >
<img src="images/lights.png" alt="Projectors">
</div>

#woman {
    padding-left: 20px;
    position: absolute;
    bottom: 35px;
    left: 45px;
    float: left;
    z-index: 3;
}

#bgr-small {
    position: absolute;
    top: 147px;
    bottom: 29px;
    left: 115px;
    right: 106px;
    z-index: 2;    
}

#lights {
    position: absolute;
    bottom: 723px;
    left: 183px;
    right: 170px;
}