html - 如何在 CSS 中设置默认页面尺寸？

Question

我正在尝试将我的 Photoshop 设计转换为网站，手动编写 HTML 和 CSS。这是我第一次做这种类型的练习，所以我从一开始就遇到了页面尺寸方面的小问题。

我用 1920px 的页面宽度做了我的 PS 设计，这是全屏 result .在编写 CSS 时，我将标题宽度设置为 1920px，将 Logo 宽度设置为 150px(与 PS 文件中一样)。但是我得到了this (不用担心 Logo 位置)。

如您所见，页面非常“放大”，滚动条出现在下方。我想在没有滚动条的情况下显示整个页面，就像在 PS 中一样，保持元素之间的比例相同。

这是标题的 HTML 和 CSS 代码:

#logo img {
  float: left;
  width: 150px;
  height: 150px;
}

#header {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1920px;
  /* I also tried width: 100% */
  height: 100px;
  background: #000000;
}

<div id="header">
  <div id="logo">
    <img src="..\codice\export\logo.png" alt="logo">
  </div>
</div>

如代码所示，我还尝试将页眉的宽度设置为 100%，但这样就不会考虑 Logo 比例 (150 px/1920 px)。

如何在 CSS 中编写:“在使用浏览器可视化页面时，1920 应该是你的 100%”？

如果这是一个愚蠢的问题，我很抱歉，但这是我第一次使用这些工具。

Answer 1

我做了这个jsfiddle

你可以检查一个流畅的 width: 100% 你不应该有这个水平滚动条

然后我添加了一个固定宽度为 520px 的 header_content div(然后你可以看到它居中并且放置得很好。但你需要根据你的 photoshop 标题宽度更改该值。

注意:css margin:0 auto 使您的 div 水平居中。