html - 从模板的网页设计

Question

我是网页设计新手。我开始设计示例页面，但遇到了一些挑战。
我有如下图所示的 photoshop 模板。
为了将它转换为 HTML 和 CSS，我执行了以下步骤:

• 我将背景图片与 Logo 分开，然后放入正文背景
• 我创建了主 DIV 作为具有相对位置的页面容器。
• 现在我想将文本放到页面(天啊，我们迷路了!)和(您正在寻找的资源可能已被删除，其名称已更改或 暂时不可用。)我在这里有一些问题:
• 如何将它们放在页面上？他们都在一个 DIV 中？还是每一个都在单独的 DIV 中？
• 我应该如何定位它们以使其在图片和网站中具有相同的位置？有没有具体的技术存在？还是我应该做测试和尝试？

请解释一下。

Answer 1

固定宽度width:100%页面分区。并给出 <h1> "OH BOY WE'RE LOST!" 的标签具有指定的宽度和边距:0 auto;.

和<p> "HE RESOURCE YOU ARE LOOKING FOR MIGHT HAVE BEEN REMOVED, HAD ITS NAME CHANGED OR TEMPORARILY UNAVAILABLE." 剩余文本的标签

<div class="page">
<h1>OH BOY WE'RE LOST!</h1>
<p>HE RESOURCE YOU ARE LOOKING FOR MIGHT HAVE BEEN REMOVED, HAD ITS NAME CHANGED OR TEMPORARILY UNAVAILABLE.</p>
</div>

样式:

.page {
position:relative;
width:100%;
height:auto;
}
.page h1 {
position:absolute;
top:0px;
left:0px;
font-size: /*your font size*/
font-family: /*your font family*/
width:100px; /*you can change the width as per your need*/
margin:0 auto;
}
.page p {
width:98%;
margin:0 auto;
}