css - PSD 到 HTML 以某种方式起作用，但实际上不起作用。我是新手

Question

我是新手，不是 HTML 和 CSS 专家。

我决定做一个元素，将 PSD 制作成 HTML 和 CSS。 该文件是 900 x 600 的图像，其中包含许多图层和元素，一层层叠叠。

我看了一些关于如何发生这种情况的教程，但从未找到过包含如此复杂图像的教程。

为了完成这项任务，我一直使用 Brackets 和实时预览。当我快完成时，我决定在某些浏览器中运行 HTML 文件，但所有结果都是一样的——太糟糕了。

我的问题是:

1. 如何使用 Chrome Live Preview(Brackets)来指导自己并且一切都很好，但当我在 IE、Chrome 和 Safari 中打开文件时，情况非常非常糟糕？

2. 使用这种非常简单的编写 HTML 和 CSS 的方法，我错了吗(或者说我很蠢)。

我的 HTML 看起来像这样(他自己的每个 div 和每个 div 都相等):

<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>

我的 CSS 是这样的(每个 div 都有 id 并通过 id 修改它们并通过下面显示的方法定位它们):

#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;
}

现在一切都在正确的位置，但只在括号实时预览中。在整个 CSS 中，我只使用 position: absolute; 。我也认为错误出在这个position: absolute;

我该如何解决这个问题？我哪里错了？我做错了什么？

这是 PSD 的一个片段:

Snippet from PSD

Folder with my HTML/CSS/Images ( Where is my fault?)

Answer 1

How is possible to guide myself with Chrome Live Preview (Brackets) and everything is fine and still is, but when I open file in IE, Chrome and Safari the things are very very bad?

我认为您应该打开 PSD - 并使用切片工具。
https://helpx.adobe.com/photoshop/using/slicing-web-pages.html

您可以随意分割图像 - 例如，如果您要有一个网络表单(如我在您的屏幕截图中看到的那样)，请在 PSD 中分割该图像部分。

完成切片后 - 您可以将文件另存为网页 - 然后从那里继续。

Am I wrong( or very dumb ) to use this very simple method of writing HTML and CSS.

您不一定是错的，但我想说它离标准的做事方式还差得很远。至少现在不是了。正如 DA 在评论中所述，PSD 现在通常仅用作粗略指南，以完全使用 HTML/CSS/JAVA/等创建包装器和网站。