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

Question

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

我使用 1920 像素的页面宽度进行 PS 设计，这是全屏结果。在编写 CSS 时，我将标题宽度设置为 1920 像素，将徽标宽度设置为 150 像素（与 PS 文件中一样）。但我得到了这个（不用担心标志位置）。

如您所见，页面非常“放大”，滚动条出现在下方。我想在没有滚动条的情况下显示整个页面，就像在 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%，但这样徽标比例（150 像素/1920 像素）没有得到遵守。

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

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

标签： htmlcss

Answer 1

我做了这个jsfiddle

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

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

注意：cssmargin:0 auto使您的 div 水平居中。